CODEWITHSUNDEEP
htmlcss
rameshrasaiyan
rameshrasaiyan

Reputation: 177

How to dynamically equal the DIV height

I have two columns in my layout. Main content and side bar. My requirement is the side bar should automatically adjust its height if the main content is growing. And I want to achieve this vice versa.

Here is the sample code: http://jsfiddle.net/SZ7y9/4/

It will be great if I get the fix for IE6 too.

Upvotes: 4

Views: 148

Answers (3)

SpaceBeers
SpaceBeers

Reputation: 13947

Faux columns is good but if you want a pure CSS version - http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

EDIT: If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Upvotes: 4

Tim
Tim

Reputation: 779

I've seen this needed a million times. Generally what I'll do is this:

Fiddle

Basically put an inner container in there, with the sidebar background color, and set the sidebar to transparent. Then, if you want the background to show through in the gutter, put a border-right on the main-content area, so that you get a sort of artificial gutter.

Caveat: The main content area needs to be longer than the sidebar, or the "gutter" will only show as far down as the main content area. I'll generally "fix" this by setting a minimum height on the main-content area.

Upvotes: 1

Scott Simpson
Scott Simpson

Reputation: 3850

I think faux columns would work: http://www.alistapart.com/articles/fauxcolumns/

Upvotes: 2

Related Questions