Align 2 div horizontally inside third div container

Question

I have the following code:

<div id="container"> <div id="div1">Div 1</div> <div id="div2">Div 2</div> </div> 

I want to have # box1 and # box2 one next to the other inside the container. Container centered

Answer 1

This centers the container and has two divs in it in the center, dividing the styles into actual content:

HTML:

 <div id="container"> <div>Div 1</div> <div>Div 2</div> </div> 

CSS

 #container > div { display: inline-block; border: solid 1px #000; } #container { border: solid 1px #ff0000; text-align: center; margin: 0px auto; width: 40%; } 

Working example:

http://jsfiddle.net/JLjjK/

Update 2017 :

Flexbox is becoming much more commonplace. Here you can achieve similar results with Flexbox:

HTML:

 <div class="outer"> <div>1</div> <div>2</div> </div> 

CSS

 .outer { border: 1px solid #000; display:flex; justify-content: center; padding: 3px; } .outer > div { border: 1px solid #000; margin:2px; } 

Example: https://jsfiddle.net/pb61a1cj/1/

Answer 2

Try the following:

HTML:

 <div id="container"> <div id="box1" class="inlined"> <div id="box3"></div> <div id="box4"></div> </div> <div id="box2" class="inlined"></div> </div> 

CSS

 .inlined { display: inline-block; } 

You can also use .inlined { float: left; } .inlined { float: left; } or .inlined { float: right; } .inlined { float: right; } , but they may have unexpected behavior depending on the surrounding elements.

Answer 3

Hope this is what you are looking for ...

 <style type="text/css"> .container{ margin-left: auto; margin-right: auto; width: 300px; } .box1, .box2 { width:280px; height:auto; float:left; margin-bottom:10px; padding:10px; border:1px solid #888; } .box1 { clear:left; margin-right:10px; } .clear { clear:both; } </style> <div id="container"> <div class="box1"> Enter box 1 content here. </div> <div class="box2"> Enter box 2 content here. </div> <div class="clear"></div> </div>