CODEWITHSUNDEEP
htmlcss
Vinicius
Vinicius

Reputation: 22

Why does relative positioning not working when trying to assume height to divs?

Please, I can't get this code to work. I'm trying to make a header and a footer, both relative-positioned, but it's not working very well. It only works when I change all position values to Absolute, which I've read it's a bad practice, not to mention possible appearance errors. Here's my CSS code: 

body{
    margin:0px;
    padding:0px;


}

#div_header {
    background-color:#0000ff;
    width:100%;
    height:20%;
    padding:0px;
    margin:0% 0% 7% 0%;
    position:absolute;
}


#div_footer{
    background-color:#ffff00;
    width:100%;
    height:100%;
    position:relative;
    top:30%;
    margin:0px;
    padding:0px;
    bottom:0px;


}

#col1{
    position:absolute;
    bottom:0px;




}

#col2{
    position:absolute;
    bottom:0px;
    left:12%;

}

#col3{
    position:absolute;
    bottom:0px;
    left:24%;



}

#col4{
    position:absolute;
    bottom:0px;
    left:36%;


}

#div_content{
    background-color:green;
    width:65%;
    height:100%;
    position:relative;
    top:10%;
    left:17%;


}

#div_leftBar{
    background-color:orange;
    width:12%;
    height:60%;
    position:fixed;
    top:20%;



}

#div_rightBar{
    background-color:red;
    width:14%;
    height:60%;
    position:fixed;
    top:10%;
    right:0px;

}

And the HTML code: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Website</title>
        <link rel="stylesheet" href="index.css" type="text/css">



        </style>
    </head>

        <body>

        <div id="div_header">
aaa     
        </div>

        <div id="div_leftBar">
        </div>

        <div id="div_rightBar">
        </div>

        <div id="div_content">
        Lorem ipsum dolor sit amet...
        </div>

        <div id="div_footer">
            <ul id="col1">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col2">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col3">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col4">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>   
        </div>

        </body>
</html>

When run the browser (Google Chrome up-to-date) with the codes above, it shows like this: http://jsfiddle.net/c8RDC/3/

I'm really sorry if this is a silly question but I really can't get it to work.

Upvotes: 0

Views: 40

Answers (1)

aowie1
aowie1

Reputation: 846

Is this more like what you want?

http://jsfiddle.net/c8RDC/5/

The container uses:

position: relative

and the things inside of it use 

position: absolute;

Upvotes: 1

Related Questions