Div Containers and Floating

PiKe · 5 Jul 2007 at 11:01

Is it possible to have a div container, then float other div's inside it, and have the container expand to fit the content?

Augmented · 5 Jul 2007 at 11:10

Yes, you need to clear the floats. There are several methods, e.g.

Add a block level element (p, br etc.) below the last float, and give it a style of

Code:

clear: both;

e.g.

Code:

<div>
 <p>foobar</p>
 <div style="float: left;">qwerty</div>
 <br style="clear: both;>
</div>

or use the overflow property on the containing <div> to cause it to expand appropriately:

Code:

<div style="overflow: auto;">
 <p>foobar</p>
 <div style="float: left;">qwerty</div>
</div>

More info: http://www.quirksmode.org/css/clearing.html

PiKe · 5 Jul 2007 at 11:18

Tried overflkow and clear method but neither produce the result I'm after

This is the html:

Code:

<style type="text/css">
<!--
#container {
	border: 1px solid #000000;
}
-->
#float {
	float:left;
	height: 50px;
	width: 100px;
}
</style>
</head>

<body>
<div id="container">This is a container
  <div>This not floated and remains inside the container </div>
  <div id="float">This is inside the container but floated left </div>
  <div id="float">This is inside the container but floated left </div>
  <div id="float">This is inside the container but floated left </div>
  <div id="float">This is inside the container but floated left </div>
</div>
</body>
</html>

Dj_Jestar · 5 Jul 2007 at 12:39

id's are unique identifiers, you have multiples. Use class instead or just for testing, apply inline style.

PiKe · 5 Jul 2007 at 13:04

I've tried inline and it still doesn't work right, the floats are always outside the container or they stack ontop of eachother inside the container, they need to be next to eachother.

Edit: This seems to have worked.

Code:

<div class="container">This is a container
  <div>This not floated and remains inside the container </div>
  <div class="float">This is inside the container but floated left </div>
  <div class="float">This is inside the container but floated left </div>
  <div class="float">This is inside the container but floated left </div>
  <div class="float">This is inside the container but floated left </div>
  <div id="clear_both" style="clear:both;"></div>
</div>

Edit2: You need clear both before and after the floats.

Tripnologist · 5 Jul 2007 at 14:19

Or you could just float the container div as well and not have to worry about clearing.

PiKe · 5 Jul 2007 at 14:24

Doh.

Actually clearing is the only way my layout works.

PiKe · 6 Jul 2007 at 19:07

New problem, how do I get div's side by side but centered in another container div of variable width?

The only way I know of getting them side by side is to float them, but floating overrides the div align.

Tripnologist · 6 Jul 2007 at 19:27

PiKe said:
New problem, how do I get div's side by side but centered in another container div of variable width?

The only way I know of getting them side by side is to float them, but floating overrides the div align.

If it wasn't variable width, I'd say to just use margins... .. There is probably a better way to do this but I would do the following...

Drop the two divs into their own container. Give that container a left and right margin of auto. This will center the two divs while keeping them together.

Code:

<div id="container">
 <div id="innerContainer">
  <div id="div1"></div>
  <div id="div2"></div>
 </div><!-- end of innerContainer -->
</div><!-- end of container -->

PiKe · 6 Jul 2007 at 19:41

Thanks.