How to display 3 boxes in the same line?

Question

I am trying to design a page using CSS and I need to display three boxes in the same line.

I used three div's and have added float:left to the first, margin-left:8cm; to the center and float:right to the right.

The left and center box are perfectly displayed but the right one goes to the next line. I even tried adding margin-left:16cm; , it still goes down by a line.

Can someone help?

Answer 1

float:right floats the block element right of the next block element, not the previous one.

If you want to preserve the order of the <div> elements in your DOM, you should set both the first and the second as float:left and set the left margin of the third one to accomodate for the space taken by the first two.

Alternatively, you can put the <div> elements in first, third, second order and keep your current styles.

Answer 2

Simply use float:left; on all three elements, and they will line up next to each other.

Answer 3

An alternative that does not mess with your markup, and does not require a margin that depends on the other divs' width is to float the first two divs left, and float the last right. So long as the added widths of the divs fits within the parent element it should display as three columns.

<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div>

#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }

The clear:none in the third div makes this work in IE 6 & 7.