Home/ Questions/Q 7420305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:12:54+00:00

I have an issue with my divs. I currently have four divs in html

  • 0

I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.

Thanks 

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

This is my CSS code

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
        <html><head>
<style type="text/css">
#page 
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}

#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>

<body>
<div id="page">
   <div id="container">
   </div>
   <div id="main">
      <div id="content">
      </div>
      <div id="side">
      </div>
   </div>
</div>
</body>
</html>
    • 0