How to Position Two Divs Horizontally Within Another Div

align 2 divs horizontally inside a third container div

This will center the container, and have the two divs within it centered, while separating the styles from the 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/

2017 Update:

Flexbox is becoming much more commonplace. Here's a way to 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/

How do I position two divs horizontally next to each other?

The first one is more widely supported in older browsers, but float usually leads to some weird behavior (not bad, nothing that will break your design, just a little unexpected).

You'll crank away with inline-block only to find something broken in your design when you check some random browser later on in the lifecycle.

I usually stick with float, and only float.

EDIT

Revisiting this answer almost 10 years later and my recommendation now would be stick with flexbox and only flexbox. Try out https://flexboxfroggy.com/ if you need some practice.

How to position two divs horizontally within another div

Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:

#sub-title { overflow:hidden; }

How can I align two divs horizontally?

Float the divs in a parent container, and style it like so:

.aParent div {    float: left;    clear: none; }

<div class="aParent">    <div>        <span>source list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div>    <div>        <span>destination list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div></div>

<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>

div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}

section {  height: 341px;  background: purple;  border-radius: 5px;  margin: 0 1.5% 24px 1.5%;  text-align: center;  clear: both;}
.vid {  border-radius: 5px;  margin: 0 1.5% 24px 1.5%;  text-align: center;  background: pink;  height: 300px;  width: 300px;  display: inline-block;}.image1{  width: 300px;  height: 300px;  background: pink;  display: inline-block;}

<section>  <div class="vid">    Div 1  </div>  <div class="image1">    Div 2  </div></section>

white-space: nowrap;

.header {  display: inline-block;   width: 100%;  border: 1px solid red;}.playerOne {  float: right;}.playerTwo {  float: left;}

<div class="header">  <div class="playerOne">    Oli  </div>  <div class="playerTwo">    Matt  </div></div>

.bottom-add-bid-buttons {  text-align: center}.add-to-list,.connect-now {  width: 150px;  display: inline-block;  text-align: left;  border: 1px solid #ddd;}

<div class="infor-experience col-lg-2 more_info">  <div class="bottom-add-bid-buttons">    <div class="add-to-list">div 1</div>    <div class="connect-now bottom">div 2</div>  </div></div>

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}