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
  • 88 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by n0m4d
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.