Dropping Inline Divs To A New Line

Sorry, I'm sure this question has been asked before, but if there anyway to do the following: I have three divs in-line like the diagram shown below, when the browser window is shr

Solution 1:

Wrap the divs in a container element, like....

<div class="wrapper">
     <div id="elem1"></div>
     <div id="elem2"></div>
     <div id="elem3"></div>
</div>

Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.

Solution 2:

Try:

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

and:

.box { 
   background: #000;
   width: 300px;
   height: 300px;
   float: left;
}

They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/

Solution 3:

Elements into it

<div id="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
<div>

CSS

.inner
{
    width: 100px;
    height: 100px;
    display: inline-block;
    background: black;
}

div#wrapper
{
    width: 100%;
    text-align: center;
}

JSFiddle