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....

<divclass="wrapper"><divid="elem1"></div><divid="elem2"></div><divid="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:

<divclass='box'></div><divclass='box'></div><divclass='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

<divid="wrapper"><divclass="inner"></div><divclass="inner"></div><divclass="inner"></div><div>

CSS

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

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

JSFiddle