Align 2 Divs Horizontally Inside A Third Container Div

I have the following code:

Div 1

Div 2

I want to be able to have

Solution 1:

This will center the container, and have the two divs within it centered, while separating the styles from the actual content:

HTML:

<divid="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/

2017 Update:

Flexbox is becoming much more commonplace. Here's a way to achieve similar results with Flexbox:

HTML:

<divclass="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/

Solution 2:

Try this:

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 could also use .inlined { float: left; } or .inlined { float: right; }, but those can have unexpected behavior depending on the surrounding elements.

Solution 3:

I hope this is what you are looking for...

<styletype="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><divid="container"><divclass="box1">
       Enter box 1 content here.
    </div><divclass="box2">
       Enter box 2 content here.
    </div><divclass="clear"></div></div>