CODEWITHSUNDEEP
htmlcss
JLeslie
JLeslie

Reputation: 56

How do I get a div to fill the height of its wrapper when it has a float on it?

I am attempting to build a responsive design from the ground up and using jsfiddle to do some testing. I have two outer columns with fixed widths and a central column that takes up the remaining width in between. I cannot for the life of me get the outer columns to expand to fill the height of the wrapper they are in. I think this may have something to do with how I got the middle div to take the central space (putting it after the right div in the order and then adding overflow:hidden).

I have tried clearing the floats with a div with clear:both on it and have also tried adding overflow:hidden to the wrapper.

The jsfiddle link is : http://jsfiddle.net/jleslie/ErAWn/1/

Any help would be much appreciated!

Upvotes: 0

Views: 105

Answers (2)

jacek_podwysocki
jacek_podwysocki

Reputation: 807

Applying this style to the side column works in Safari, Chrome and FF even though does not seem to work in jsfiddle, plus floating is preserved if you need it:

.side_col {
width: 200px;
background-color: red;
height: 100%;

}

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77966

Don't use floats. You can keep it responsive with left and right absolute positions:

http://jsfiddle.net/ErAWn/4/

Upvotes: 1

Related Questions