I am attempting to get 3 divs that cover the entire width of the page to align at the top. The goal is to have:
Left Div| Center Div | Right Div
with both the left and right divs occupying 25% of the width and the center occupying 50%. I am using float to align the left and right divs to the sides of the screen. However, my issue arises when I set the center div to 50%, as the right div no longer aligns at the top. Setting the center div to 45% width achieves the desired effect in terms of aligning the tops, but the center div does not utilize all available space.
Below is a simple HTML snippet illustrating 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...</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 demo showcasing the issue: http://jsfiddle.net/s6vqC/
Any assistance would be greatly appreciated as I am new to CSS. Thank you.