ansaurus

Question

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

Answer 1

+5 A:

It's a common problem when you have two floats inside a block. The best way of fixing it is after the second div (inside the main container) put...

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

And it should force the container to be the correct height.

Meep3D 2009-12-04 01:05:59

A div is already a block element so you can remove that from your style.

GoodEnough 2009-12-04 01:11:16

Answer 2

+3 A:

This should do it:

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

jerjer 2009-12-04 01:07:26

Answer 3

+4 A:

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>

Mikael S 2009-12-04 01:18:31

I like the overflow:hidden approach best.

Cyril Gupta 2009-12-04 03:23:03

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 2010-03-04 15:30:32

Great solution, thanks!

Somebody still uses you MS-DOS 2010-06-25 20:36:44

Answer 4

A:

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

lepe 2009-12-04 01:22:47

Answer 5

+1 A:

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

Thomas J Bradley 2009-12-04 03:13:48

Answer 6

A:

float everything.

If you have a floated DIV inside a non-floated DIV, everything gets all screwey. 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.

Alex Lane 2010-08-23 21:31:39

ansaurus

tags:

views:

answers:

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

wrap1

related questions