div column layut

Question

Hi Im trying to create the following structure in div's, but I just need some help getting startet with the css.

The width needs to be 100%

Answer 1

<style type="text/css">
.clear{ clear: both; }
.top{ width: 100%; }
.col{ width: 25%; float: left; }
.col, .top{ text-align: center; }
</style>
<div class="main">
   <div class="top clear">Menu</div>
   <div class="col">Column1</div>
   <div class="col">Column2</div>
   <div class="col">Column3</div>
   <div class="col">Column4</div>
   <div class="clear"></div>
</div>

This will not work if you add border/padding/margin to the columns, use absolue width values if you want to use that.

Answer 2

If you want four floated columns to fill 100% width of any element you may see a slight misalignment at the end of the last column in various browsers. It's easier to get exact alignment (say, with borders) if you work to the width of a container. For example, to reproduce your visual (complete with borders) use the css:

  #container {
    width: 400px;
    text-align: center;
  }
  #menu {border: 1px solid black;}
  #cols div {
    float:left;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    width:99px;
  }
  #cols div:first-child {
    border-left: 1px solid black;
    width:98px;

With the html:

  <div id="container">
    <div id="menu">Menu</div>
    <div id="cols">
      <div>column 1</div>
      <div>column 2</div>
      <div>column 3</div>
      <div>column 4</div>
    </div>
  </div>

And (as Lekensteyn suggests) make sure any footer or element after the div columns has a clear rule.

Answer 3

You can test this examples here:

http://cssdesk.com/