0

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: n/a

2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by n0m4d
1

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.