CODEWITHSUNDEEP
htmlcss
Hithere Paperbag
Hithere Paperbag

Reputation: 2808

How can I get my sidebar to fill space vertically?

I have a pretty simple layout that looks like this

enter image description here

The code for is this:

<!DOCTYPE html>
<html>
<HEAD>
    <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
  </HEAD>
<body>

<div id="wrap">

    <div id="header">
    <p> Im the header. </p> 
    </div>

    <div id="nav">
    <p> Im the nav. </p> 
    </div>

    <div id="sidebar">
    <p> sidebar here </p> 
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    </div>

    <div id="main">
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    </div>

    <div id="footer">
    <p> footer </p> 
    </div>
</div>

<body> 


</html>

Here is the CSS: 

#wrap
{ 
    width: 100%; 
    background-color:blue; 
    padding: 10px; 
}

#header 
{ 
    background-color:white; 
    width: 98%; 
    float: left; 
    padding: 10px; 
}

#nav
{ 
    background-color:yellow; 
    padding: 10px; 
    width:100%;

}


#main 
{ 

    width:100%; 
    background:green; 
    padding: 10px; 

}


#sidebar
{ 
    background-color:pink; 
    float:right; 
    float:top; 
    padding: 10px; 
    width:20%;
    height:100%; 

}

#footer 
{ 
    background-color:orange; 
    padding: 10px; 
    width:100%;
    clear:both;


}

Now I just dont know why I cant get the pink are / sidebar to fill all the space vertically, down to the orange footer?

Upvotes: 1

Views: 3724

Answers (3)

Venkat
Venkat

Reputation: 314

Mr.Hithere Paperbag

Try it... first create a image look like this link

http://www.vanseodesign.com/blog/wp-content/uploads/2011/05/faux-columns-background.png

    background: url("faux-columns.png") repeat-y;

in css

Here is 4 Tutorial about Equal Columns: http://www.vanseodesign.com/css/equal-height-columns/

Best of Luck !

Upvotes: 0

Fabian
Fabian

Reputation: 3495

You could also give #wrap the color pink and set your #main width to ~70%, this is often used as a workaround.

Now your border is also pink because of the padding in #wrap, but you can play around until it fits your needs.

#wrap
{ 
    width: 100%; 
    background-color:pink; 
    padding: 10px; 
}

#main 
{ 

    width:70%; 
    background:green; 
    padding: 10px; 

}

Example: http://jsfiddle.net/y9Yja/

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

Example: http://jsfiddle.net/s96Tw/

1) append #sidebar content to the #main element;

2) add position:relative to the #main element;

3) add this extra code to the css file:

#sidebar {
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:pink;
}

Upvotes: 1

Related Questions