Question

I am trying to creat a layout like this:

My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?

Answer 1

I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width – try using percents in width for small_bottom.

HTML:

<div class="main">
    <div class="top"></div>
    <div class="bottom">
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
    </div>
</div>​

CSS:

div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
    float:left;
    height:50px;
    width:50px;
    margin:5px;
}
.bottom{margin:5px; overflow:hidden;}

​

Here is an example how it looks