Top align 3 floating divs

Question

I am trying to get 3 divs that span the width of the page to align to the top. The idea is to have:

Left Div| Center Div | Right Div

with both the left and right divs taking 25% of the width and the centre taking 50%. I am using float to get the left and right div's to align to the sides of the screen. However, my problem is that once I set the center div to 50% , the right div no longer aligns to the top. Setting 45% width for the center gets the desired effect in terms of aligning the tops, however the center div does not take up all the available space

simple HTML demonstrating the problem:

<div class="parent">
<div class="title-bar">Title goes Here</div>
<div class="sidecontent left">Some content</div>
<div class="content">More content and more and more More content and more and more More content and more and more</div>
<div class="sidecontent right">Some Content</div>
</div>

CSS

    .title-bar {
    color: @color;
    background-color: @title-color;
    padding: 5px;
    font-family: @font-family;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
    border: 1px solid #D5D5D5;
    border-radius: 5px;
    }
.left {
    float: left;
}
.right {
    float: right;
}
.sidecontent {
    width: 25%;
    border: 1px solid #D5D5D5;
    display: inline-block;
    //padding: 5px;
    vertical-align: top;
    height: 500px;
    background-color: red;
    overflow-y: auto;
}
.content {
    float: left;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

here is a jsFiddle demonstrating the problem: http://jsfiddle.net/s6vqC/

Any assistance would be appreciated (I'm new to this css thing) Thanks.

Chanckjh Chanckjh · Accepted Answer · 2013-09-14T00:54:15

you have given the left sidebar a border. If you give a border it will do 25%+1px. So that means if u add it all together it will be 100% and some pixel because u gave it a border. 25% + 50% + 25% + border:1px = 100% + 1px = whole width screen + 1px

Top align 3 floating divs

2 Answers