TUTORIAL: Getting two floated divs the same height with CSS

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Introduction


There are some situations where you are building a site with a left hand side menu and the menu and the body parts are both floated left to show up next to each other. However, the content of the menu and the content are both dynamic and thus you cannot manually specify the height for either of these. So you need to make sure they are both the same height, what I am showing you now does not actually make both columns the same height, but it gives the impression that they are the same height.

Floating the two columns


This shouldn't be an issue for you as you are coming to this tutorial with two divs that are already floated next to each other, but let's just have a quick look at what that code will look like, and what the output will be.
The code:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>R_T Tutorial</title>
<style type='text/css'>
body{
background-color:#dddddd;
}
div#container{
width:980px;
margin:0px auto 0px auto;
}
div#header{
width:980px;
height:225px;
background-image:url('images/header.gif');
}
div#body_container{
width:980px;
}
div#menu_left{
width:230px;
background-color:#004163;
float:left;
}
div#body{
background-color:#ffffff;
width:750px;
float:left;
}
</style>
</head>
<body>
<div id='container'>
<div id='header'></div>
<div id='body_container'>
<div id='menu_left'>
<a href='#'>menu link</a>
</div>
<div id='body'>
<h1>Body Heading</h1>
<p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
</div>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>R_T Tutorial</title>
  5. <style type='text/css'>
  6. body{
  7. background-color:#dddddd;
  8. }
  9. div#container{
  10. width:980px;
  11. margin:0px auto 0px auto;
  12. }
  13. div#header{
  14. width:980px;
  15. height:225px;
  16. background-image:url('images/header.gif');
  17. }
  18. div#body_container{
  19. width:980px;
  20. }
  21. div#menu_left{
  22. width:230px;
  23. background-color:#004163;
  24. float:left;
  25. }
  26. div#body{
  27. background-color:#ffffff;
  28. width:750px;
  29. float:left;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id='container'>
  35. <div id='header'></div>
  36. <div id='body_container'>
  37. <div id='menu_left'>
  38. <a href='#'>menu link</a>
  39. </div>
  40. <div id='body'>
  41. <h1>Body Heading</h1>
  42. <p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
  43. </div>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

your output should now look something like this:
Attachments:
first_part.gif

The first time you view it, it should look like this.



Making them the same height


To now make the two columns the same height, there are three things we need to do, namely:
  • Give the "body_container" div a background image
  • Give the "body_container" div a background-color
  • Add a div with clear:both inside the "body_container" div
Adding the background image:
the background-image is going to be the same width and colour as the "menu_left" div and one pixel high, we will then repeat this background-image all the way down for if the "menu_left" div is shorter than the "body" div.
Code: [ Select ]
div#body_container{
background-image:url('images/body_background_cheat.gif');
background-position:top left;
background-repeat:repeat-y;
}
  1. div#body_container{
  2. background-image:url('images/body_background_cheat.gif');
  3. background-position:top left;
  4. background-repeat:repeat-y;
  5. }

Applying the background-color:
we are going to make the background-color the same colour as the "body" div, this will then make it look as if the "body" div is just as high as the "menu_left" div even if it isn't.
Code: [ Select ]
div#body_container{
background-image:url('images/body_background_cheat.gif');
background-position:top left;
background-repeat:repeat-y;
background-color:#ffffff;
}
  1. div#body_container{
  2. background-image:url('images/body_background_cheat.gif');
  3. background-position:top left;
  4. background-repeat:repeat-y;
  5. background-color:#ffffff;
  6. }

Adding the "clear:both" part
We'll add a div underneath the two floated divs with the property "clear:both" to make the "body_container" div extend all the way to the bottom of the two floated divs, and here is the code for that one:
Code: [ Select ]
div.clear{
width:100%;
height:0px;
clear:both;
}
  1. div.clear{
  2. width:100%;
  3. height:0px;
  4. clear:both;
  5. }

now please note, the "height:0px;" part will not work in IE6, it will be 5px tall, IE6 doesn't allow a div that is less than 5px tall for some obscure reason.
Anyway, now you'll add this div beneath the two floated divs and then you'll be all set.

The final output


Once you've added all this your code should look like the following:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>R_T Tutorial</title>
<style type='text/css'>
body{
background-color:#dddddd;
}
div#container{
width:980px;
margin:0px auto 0px auto;
}
div#header{
width:980px;
height:225px;
background-image:url('images/header.gif');
}
div#body_container{
width:980px;
}
div#menu_left{
width:230px;
background-color:#004163;
float:left;
}
div#body{
background-color:#ffffff;
width:750px;
float:left;
}
div#body_container{
background-image:url('images/body_background_cheat.gif');
background-position:top left;
background-repeat:repeat-y;
background-color:#ffffff;
}
div.clear{
width:100%;
height:0px;
clear:both;
}
</style>
</head>
<body>
<div id='container'>
<div id='header'></div>
<div id='body_container'>
<div id='menu_left'>
<a href='#'>menu link</a>
</div>
<div id='body'>
<h1>Body Heading</h1>
<p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>R_T Tutorial</title>
  5. <style type='text/css'>
  6. body{
  7. background-color:#dddddd;
  8. }
  9. div#container{
  10. width:980px;
  11. margin:0px auto 0px auto;
  12. }
  13. div#header{
  14. width:980px;
  15. height:225px;
  16. background-image:url('images/header.gif');
  17. }
  18. div#body_container{
  19. width:980px;
  20. }
  21. div#menu_left{
  22. width:230px;
  23. background-color:#004163;
  24. float:left;
  25. }
  26. div#body{
  27. background-color:#ffffff;
  28. width:750px;
  29. float:left;
  30. }
  31. div#body_container{
  32. background-image:url('images/body_background_cheat.gif');
  33. background-position:top left;
  34. background-repeat:repeat-y;
  35. background-color:#ffffff;
  36. }
  37. div.clear{
  38. width:100%;
  39. height:0px;
  40. clear:both;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div id='container'>
  46. <div id='header'></div>
  47. <div id='body_container'>
  48. <div id='menu_left'>
  49. <a href='#'>menu link</a>
  50. </div>
  51. <div id='body'>
  52. <h1>Body Heading</h1>
  53. <p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
  54. </div>
  55. <div class='clear'></div>
  56. </div>
  57. </div>
  58. </body>
  59. </html>

and it should look like this:
Attachments:
final_result.gif

This would be the final result.



Conclusion


Making this work is very simple, all you need to remember is that we added a body_container around the two floated divs, and gave that "body_container" div a background-image (1px x menu's width) and a background-color (the same colour as the "body" div's background) ... then we added a div with "clear:both" to make sure the "body_container" div stretches all the way to the end of the floated divs.
Hope this helps a bit
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Digital media went over this technique in his tutorial, but thanks for the reminder :D

Post Information

  • Total Posts in this topic: 2 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 2 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.