76

I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>
0

11 Answers 11

120

Aside from the clear: both hack, you can skip the extra element and use overflow: hidden on the wrapping div:

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
7
  • 7
    I like the overflow:hidden approach best. Dec 4, 2009 at 3:23
  • 9
    I'm so glad someone put this on here... it drives me crazy when people add an element just to clear the floats when its just a css issue.
    – tybro0103
    Mar 4, 2010 at 15:30
  • 1
    It works with overflow:auto; to. I think it's hack with overflow more elegant "hack" then div clear :)
    – Alex Dn
    Sep 12, 2012 at 17:16
  • 4
    This has some drawbacks, this site also recommends .container { word-wrap: break-word; } and .container img { max-width: 100%; height: auto; } to make big content behave well.
    – Kos
    Nov 14, 2012 at 10:43
  • This doesn't seem to work on my body element in which i have two floated divs. The body doesnt take up the size of the inner elements even with overflow:hidden. I always used this approach, no idea why it doesn't work, plz help!
    – A. Sallai
    Jul 21, 2013 at 19:55
74

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

1
  • 43
    A div is already a block element so you can remove that from your style.
    – mbillard
    Dec 4, 2009 at 1:11
8

This should do it:

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
0
8

overflow:hidden (as mentioned by @Mikael S) doesn't work in every situation, but it should work in most situations.

Another option is to use the :after trick:

<div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
</div>

.wrapper {
  min-height: 1px; /* Required for IE7 */
  }

.wrapper:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ".";
  font-size: 0;
  }

.col {
  display: inline;
  float: left;
  }

And for IE6:

.wrapper { height: 1px; }
4

Float everything.

If you have a floated div inside a non-floated div, everything gets all screwy. That's why most CSS frameworks like Blueprint and 960.gs all use floated containers and divs.

To answer your particular question,

<div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

should work just fine, as long as you float:left; all of your <div>s.

3

Use this CSS hack, it saved me lot of trouble and time.

http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-containing-floats-and-inline-lists/

I use it in every project.

2

Here's another, I found helpful. It works even for Responsive CSS design too.

#wrap
{
   display: table;
   table-layout: fixed; /* it'll enable the div to be responsive */
   width: 100%; /* as display table will shrink the div to content-wide */
}

WARNING: But this theory won't work for holder contains inner elements with absolute positions. And it will create problem for fixed-width layout. But for responsive design, it's just excellent. :)

ADDITION TO Meep3D's ANSWER

With CSS3, in a dynamic portion, you can add clear float to the last element by:

#wrap [class*='my-div-class']:last-of-type {
  display: block;
  clear: both;
}

Where your divs are:

<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
   <div class="my-div-class-<?php echo $i ?>>
      <p>content</p>
   </div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>

Reference:

2

Here i show you a snippet where your problem is solved (i know, it's been too long since you posted it, but i think this is cleaner than de "clear" fix)

#nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          overflow: hidden
        }
    <div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
    </div>

1

Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?

1
<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

The secret is the inline-block. If you use borders or margins, you may need to reduce the width of the div that use them.

NOTE: This doesn't work properly in IE6/7 if you use "DIV" instead of "SPAN". (see http://www.quirksmode.org/css/display.html)

1

HTML

<div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>      
    <div class="clearFloat"></div>
</div>

CSS

.clearFloat {
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.