What's new

CSS trickery?

Webfunk

Top Contributor
Lets say that we have 2 floating div's, surrounded by a containing div. One is floating left, one is floating right. However, the right div is higher than the one on the left. Because the div's have coloured backgrounds, it looks weird to have them different heights, so...

Question: How does one extend the height of the left div to the same height of the right div? As in, extend it to the 100% height of the containing div?

I realise there is some trickery you can do with a 'fake background' for the containing div, but I'm looking for other solutions...

How do you do it?

Eg.

<div id="wrapper">
<div id="leftColumn"></div>
<div id="rightColumn"></div>
</div>

P.S. The height must be flexible, no fixed heights.
 

davids

Top Contributor
As far as I'm aware you'll either need to use the "trickery" with a background, or use javascript to have it extend the div based on the containing div's height.
 

sp@rky13

Top Contributor
With fixed heights it's easy but from memory you've either got to use css hacks or javascript with changing heights.
 

Webfunk

Top Contributor
Hmm yes I think javascript is going to be the way out here.... Like someone said on that link Ash, you can't specify a 100% height on the child div's without first knowing the height of the parent div...

Might give this code a go...

var highestCol = Math.max($('#element1').height(),$('#element2').height());
$('.elements').height(highestCol);
 

Webfunk

Top Contributor
Something like this....

HTML:

Code:
<div id="wrapper">

     <div id="sidebar">
          <ul>
               <li>item 1</li>
               <li>item 2</li>
               <li>item 3</li>
          </ul>
     </div> <!-- END sideBar -->

     <div id="content">
          <p>blah blah blah (several paragraphs long)</p>
     </div> <!-- END content -->

     <div class="clear"></div>

</div> <!-- END wrapper -->

CSS:

Code:
#wrapper {
     width: 960px;
     margin: 0 auto;
}
#sidebar {
     width: 260px;
     background: #29ABE2;
     float: left;
}
#content {
     width: 700px;
     background: #CCC;
     float: right;
}
.clear {
     clear: both;
}
 

jam

Top Contributor
Something like this....

Try something like this.
It will give you the look you're after.

Code:
<div id="wrapper">
     <div id="sidebar">
          <ul>
               <li>item 1</li>
               <li>item 2</li>
               <li>item 3</li>
          </ul>
     </div> <!-- END sideBar -->
     <div id="content">
          <p>blah blah blah (several paragraphs long)</p>
     </div> <!-- END content -->
</div> <!-- END wrapper -->

Code:
#wrapper {
     width: 960px;
     margin: 0 auto;
     background: #29ABE2;
     overflow:hidden;
}
#sidebar {
     width: 260px;     
     float: left;
}
#content {
     width: 700px;
     background: #CCC;
     float: right;
}
 
Last edited:

Webfunk

Top Contributor
Try something like this.
It will give you the look your after.

Code:
<div id="wrapper">
     <div id="sidebar">
          <ul>
               <li>item 1</li>
               <li>item 2</li>
               <li>item 3</li>
          </ul>
     </div> <!-- END sideBar -->
     <div id="content">
          <p>blah blah blah (several paragraphs long)</p>
     </div> <!-- END content -->
</div> <!-- END wrapper -->

Code:
#wrapper {
     width: 960px;
     margin: 0 auto;
     background: #29ABE2;
     overflow:hidden;
}
#sidebar {
     width: 260px;     
     float: left;
}
#content {
     width: 700px;
     background: #CCC;
     float: right;
}

Will give it a shot...cheers mate!
 

Webfunk

Top Contributor
Works good mate, thanks for that. What exactly is the overflow doing? Because it works without it also...
 

jam

Top Contributor
I'm guessing you're still have the .clear class?
If you are still using that then the overflow is not needed. Choose one or the other.
 

Community sponsors

Domain Parking Manager

AddMe Reputation Management

Digital Marketing Experts

Catch Expired Domains

Web Hosting

Members online

No members online now.

Forum statistics

Threads
11,098
Messages
92,044
Members
2,394
Latest member
Spacemo
Top