CODEWITHSUNDEEP
csslayouthtml
Sam
Sam

Reputation: 4339

Sidebar div is not filling 100% of the parent

I'll try and explain this the best I can.

First of all, here is a mock up of my problem
http://img402.imageshack.us/img402/7370/problemfb.png

DIV A and DIV B are inside a div called contents.

Here is the CSS: 

#contents { height: auto; border: 1px solid black; }  
#a { float: left; padding-left: 10px; padding-top: 10px; width: 587px; }  
#b { border-left: 1px solid black; float: right; height: 100%; width: 300px; }

DIV A contains the generated page content. DIV B contains two child divs which provide tools for the page. These are both identical, and only set a height of 150px each.

The issue is that, as seen in the mock up, the #b div does not fill 100% of #contents. So when the generated content consumes > 300px, the black line seperating the right bar does not draw the entire vertical length of #contents.

I am using 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For the doctype.

Upvotes: 0

Views: 635

Answers (1)

alex
alex

Reputation: 490453

You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.

I used display: table and display: table-cell to do it.

Example

Example

CSS

#contents { display: table; }  

#a { width: 587px; }  

#b { display: table-cell; width: 300px; }

jsFiddle.

Note that this will not work < IE8.

Upvotes: 1

Related Questions