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"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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; }


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


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

7 Years
Discussion Span
Last Post by n0m4d

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.