how to place two divs besides each other - html

Question

On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.

Answer 1

You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)
<div>
<div style="float: left">
<p> This div will be on the left</p>
</div>
<div >
<p> This div will be on the right</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.
<div>
<div style="width: 100px; float: left">
<p> 100px div will be on the left</p>
</div>
<div style="width: 200px">
<p> 200px div will be on the right as long as there is enough
horizontal space in the container div
</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>

Answer 2

<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"><!-- usually leave this empty --></div>
</div>
You can also float:right; in order to make the divs align on the right side of the page. The clear is VERY IMPORTANT. In IE a lot of the time the float left/right rule is propagated to other elements to elements you did NOT intend to float. Usually though; you don't pick up on this right away and it becomes a nightmare to figure out why your page looks like crap down the road. So just make a habit of putting an empty clear div as the last sibling of any divs you decide to float.

Answer 3

Most simple way is CSS float:
<div id="div1">hello</div>
<div id="div2">world</div>
And the CSS:
#div1 {float: left;}
#div2 {float: left; margin-left: 10px;}
Simple test case.
After the floating divs add another one to clear the float so that further contents will be displayed fine:
<div style="clear: both;"></div>

Answer 4

float is a quick way, inline-block is another quick way and has some advantages over float such as not needing a clear:both element.
here's an example with both methods http://jsfiddle.net/dGKHp/
HTML:
<div id="floatExample">
<div>Float Left</div>
<div>Float Right</div>
<br />
</div>
<div id="inlineBlockExample">
<div>Left</div><div>Right</div>
</div>
CSS:
#container {width:600px;margin:0 auto;}
#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}
#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}
This is a pretty good write-up on ins and outs of inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/