Member Avatar for n0m4d

I'm having problem getting a container to expand when adding two DIVs that float left. The container would actually just not move behind the DIVs.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style type="text/css">
* { margin: 0px; padding: 0px; }
body { font-family: arial; font-size: 62.5%; }
#wrapper { margin: 0 auto; width: 100%; }
#header { width: 100%;	height: 150px; background-color: #FFCC99; }
#container { padding: 20px 0 0 0px; width: 100%; background-color: #CC3300; }
#boxWrap { width: 100%; float: left; }
.box { margin-left: 35px; width: 250px; height: 250px; background-color: #66CCFF; float: left; }
</style>
</head>

<body>

<div id="wrapper">
 <div id="header">
 </div>
 <div id="container">
  <div id="boxWrap">
   <div class="box"></div>
   <div class="box"></div>
  </div>
 </div>
</div>

</body>
</html>

If I write text just before the container DIV closes, it expands, but I can't figure out why it's not doing the same with only those two blue DIVs.

I would really appreciate some help.

Edited by n0m4d because: n/a
  • 2 Contributors
  • 3 Replies
  • 106 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by n0m4d

Dani AI

Generated

Floated children are removed from the normal flow, so their parent can collapse to zero height. That is exactly what happened in 's example: adding inline text (an in‑flow node) gave the container something to size against, but two floated boxes by themselves do not. 's overflow trick works because it forces a new block formatting context, which makes the parent include the floats.

A few practical options (pick one that fits your needs):

  • If the wrapper (your #boxWrap) does not need to be floated, remove that float. Keeping the wrapper in normal flow often fixes the issue without any additional CSS.
  • Use a clearfix on the parent so it contains its floats. Example clearfix:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Add the clearfix class to the parent element that should expand.

  • Use a modern single-line fix that creates a BFC without clipping:
#container { display: flow-root; }

Tradeoffs and tips: overflow: hidden or overflow: auto (what suggested) does create the BFC, but hidden can clip visible overflow (shadows, positioned children) and auto can introduce scrollbars. clearfix is widely compatible and non-clipping. display: flow-root is the cleanest where supported. Use browser dev tools to inspect computed height and see which element is out of flow when debugging.

For background reading on why floats behave this way and how BFCs solve it, see the MDN articles on floats and on display: flow-root (MDN: float, ).

Recommended Answers

All 3 Replies

Member Avatar for n0m4d

Nevermind. Fixed it.

Member Avatar for ko ko

Add this to your container

#container { 
padding: 20px 0 0 0px; /*You should give 'padding-top:20px' instead of this and px doesn't need after 0 value' */
width: 100%; 
background-color: #CC3300; 
overflow: hidden
}

Add red color text, and try.. I hope this will help you.

Member Avatar for n0m4d

Thank you Zero13. That's exactly what I did

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.