Верх выравнивания 3 плавающих divs

Question

Я пытаюсь получить 3 divs, которые охватывают ширину страницы, чтобы выровнять ее. Идея состоит в том, чтобы иметь:

Левый Div | Центр Div | Правое поле

как с левым, так и с правым разделом, занимающим 25% от ширины, а центр занимает 50%. Я использую float, чтобы получить левый и правый div для выравнивания по сторонам экрана. Тем не менее, моя проблема заключается в том, что как только я устанавливаю центр div на 50%, правый div больше не выравнивается с вершиной. Настройка ширины 45% для центра получает желаемый эффект с точки зрения выравнивания вершины, однако центр DIV не занимает все доступное пространство

простой HTML, демонстрирующий проблему:

<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%; 
} 

здесь является jsFiddle демонстрирует проблему: http://jsfiddle.net/s6vqC/

Любая помощь будет оценена (я новичок в этом Css т hing) Спасибо.

Answer 1

Вы указали левую боковую панель границы. Если вы дадите границу, она будет делать 25% + 1px. Таким образом, это означает, что если вы добавите все это вместе, это будет 100%, а некоторые пиксели, потому что u дал ему границу. 25% + 50% + 25% + граница: 1px = 100% + 1px = экран всей ширины + 1px

Answer 2

@Chanckjh правильный, это граница, которая вызывает несоосность.

Вы можете использовать box-sizing: border-box;, чтобы предотвратить добавление границы к ширине элементов.

Пример: http://jsfiddle.net/s6vqC/1/