how to make a div to wrap two float divs inside?

Question

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>

score 120 · Answer 1 · answered Dec 04 '09 at 01:18

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>

answered Dec 04 '09 at 01:18

Mikael S

5,206
2
23
21

7

I like the overflow:hidden approach best. – Cyril Gupta Dec 04 '09 at 03: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 04 '10 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 '12 at 17:16
4

This has some drawbacks, [this site](http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow) also recommends `.container { word-wrap: break-word; }` and `.container img { max-width: 100%; height: auto; }` to make big content behave well. – Kos Nov 14 '12 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 '13 at 19:55
`overflow: auto;` also does the job – eugene82 Mar 13 '14 at 10:17
I wouldn't call it `clear: both` a hack really. It does exactly what it's expected to do. It is code bloat, though. – crush Dec 09 '14 at 20:08

score 74 · Accepted Answer · edited Oct 22 '13 at 01:09

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.

edited Oct 22 '13 at 01:09

Josh Crozier

233,099
56
391
304

answered Dec 04 '09 at 01:05

Meep3D

3,803
4
36
55

43

A div is already a block element so you can remove that from your style. – mbillard Dec 04 '09 at 01:11

score 8 · Answer 3 · answered Dec 04 '09 at 01:07

8

This should do it:

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

answered Dec 04 '09 at 01:07

jerjer

8,694
30
36

score 8 · Answer 4 · answered Dec 04 '09 at 03:13

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; }

score 4 · Answer 5 · edited Oct 22 '13 at 01:07

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.

score 3 · Answer 6 · edited Oct 22 '13 at 01:07

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.

edited Oct 22 '13 at 01:07

Josh Crozier

233,099
56
391
304

answered Aug 22 '11 at 14:40

Satish Gandham

401
4
12

score 2 · Answer 7 · edited Jun 20 '20 at 09:12

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:

:last-of-type - CSS-TRICKS

score 2 · Answer 8 · answered Sep 15 '15 at 11:13

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>

score 1 · Answer 9 · edited Oct 22 '13 at 01:05

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;
}

edited Oct 22 '13 at 01:05

Josh Crozier

233,099
56
391
304

answered Jul 17 '13 at 15:50

Sebachenko

31
1

score 1 · Answer 10 · edited Oct 22 '13 at 01:05

<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)

score 1 · Answer 11 · answered May 02 '11 at 16:47

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?

answered May 02 '11 at 16:47

Mori

8,137
19
63
91

how to make a div to wrap two float divs inside?

11 Answers11

ADDITION TO Meep3D's ANSWER

Linked