Top Align 3 Floating Divs

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

Solution 1:

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

Solution 2:

@Chanckjh is correct, it's the border that's causing the misalignment.

You can use box-sizing: border-box; to prevent the border from adding to the elements' width.

Example: http://jsfiddle.net/s6vqC/1/