...

View Full Version : Simple question about div's



fro0ty
11-03-2006, 02:37 PM
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

kaitco
11-03-2006, 03:02 PM
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.

fro0ty
11-03-2006, 04:35 PM
Wow kaitco, thanks! it worked like a charm :)

added rep :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum