Simple question about div's

Hi Everyone!

I have a question about how to align some divs. Basically I want then to some divs to line up as columns, this is the code I use:

<div class="content-box">
</div>
<div class="content-box">
</div>
<div class="content-box">
</div>
<div class="content-box">
</div>

However it when a new div starts, it inserts a page break. I want them to line up next to each other.

Here is the CSS code im using

.content-box {
overflow: auto;
color: #000000;
margin: 10px;
padding: 3px;
width: 150px;
height: 150px;
}

I cant figure out what I'm missing :confused:

Thanks

You need to float the divs:

.content-box {
overflow: auto;
color: #000000;
margin: 10px;
padding: 3px;
width: 150px;
height: 150px;
float: left;
}

If you have content following or preceding these divs, it might be best to create a "master" div and clear it on both sides.

HTML:
<div id="master-box">

<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>

</div>

CSS:
.content-box {
overflow: auto;
color: #000000;
margin: 10px;
padding: 3px;
width: 150px;
height: 150px;
float: left;
}

#master-box {
clear: both;
}

Hope this helps.

Wow kaitco, thanks! it worked like a charm :)

added rep :p