Html, Css With Center Div Problem

I would like to create centered html page with three separated columns (with different colors). I can't find solution for my #container1 in css. The red color is spreading from lef

Solution 1:

You really need to reconsider your approach to this problem.

I'd suggest: 3 floated divs wrapped in a container.

<div id="container">
  <div id="column1">Lorem ipsum</div>
  <div id="column2">Dolor sit amet</div>
  <div id="column3">Mauris orci</div>
</div>

And as for your CSS, there are a few significant things you can build on:

#container {
  overflow: hidden; //this will clear the floated columns
  width: 960px;
}

#column1 {
  float: left;
  width: 320px;
  background: #f00;
}

#column2 {
  float: left;
  width: 320px;
  background: #0f0;
}  

#column3 {
  float: left;
  width: 320px;
  background: #00f;
}      

Essentially:

• Wrap the floats and clear them using overflow: hidden;
• The total width of the floats is equal to the width of the container