How do I make divs of 150x150 squares along the screen

Question

*and to start new rows as they fill each previous row?
this should work but doesnt for me,
html:

<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>  
</div>

so this established 3 boxes on the page

css:

#squares {
display:inline;
background-color:#000000;
}

The css should tell them to line up and be black, so that we can see them, to guage if they are in the right place or not.
Do I need to add anything? Can you think of any different methods of achieving this outcome?

Answer 1

HTML

<div id="squares">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>​

CSS

#squares div {
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 150px;
    height: 150px;
    background: black;

    /* a small margin to separate the blocks */
    margin-right: 5px;
}

An alternative to using float would be to use inline-block styling:

display: inline-block;
zoom: 1;
*display: inline;