Welcome to WebmasterWorld Guest from 54.167.155.147

Forum Moderators: not2easy

Message Too Old, No Replies

Css problem

Divs seem to be line breaking

   
9:21 pm on Jan 23, 2008 (gmt 0)

5+ Year Member



Hmmm hi, I seem to be having some trouble with CSS and Divs.

Heres the relevant code:


<div class="pagecontentmiddlebox">
<div class="windowboxtitle">
Latest.</div>
<br>


<div class="thumbboxcontent">
<div class="thumbboxtitle"><a href="stainedskulls.php">Stained Skulls</a></div>
<a href="stainedskulls.php"><img src="images/stained_thumb.jpg" alt="Stained Skulls Thumbnail" border="0"></a>
</div>


<div class="thumbboxcontent">
<div class="thumbboxtitle"><a href="midnightpirate.php">Midnight Pirate</a></div>
<a href="midnightpirate.php"><img src="images/midnightpirate_thumb.jpg" alt="Midnight Pirate Thumbnail" border="0"></a>
</div>
<br>


</div>
</div>

And the CSS:


.thumbboxtitle{
text-align:center;
color:#FFFFFF;
position:relative;
width:134px;
height:20px;
z-index:1;
background-color:#A40000;
background-image: url('images/windowtitlebar.jpg');
background-repeat: repeat-x;
}


.thumbboxcontent{
position:relative;
left:16px;
width:134px;
height:148px;
z-index:3;
background-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#A40000 #A40000 #A40000 #A40000;
}


.windowboxtitle{
text-align:center;
color:#FFFFFF;
position:relative;
width:100%;
height:20px;
z-index:1;
background-color:#A40000;
background-image: url('images/windowtitlebar.jpg');
background-repeat: repeat-x;
}


.pagecontentmiddlebox{
text-align:left;
position:relative;
margin-left:300px;
width:500px;
z-index:2;
background-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#A40000 #A40000 #A40000 #A40000;
}

Now my problem is these Divs appear and render correctly except that instead of being placed next to each other they are going onto a new line and appearing directly below each other. Any ideas? I want the Thumbnails to appear next to each other on a row. 3 on a row.

10:22 pm on Jan 23, 2008 (gmt 0)

10+ Year Member



Divs are block elements, meaning they are displayed on a new line by default. To display them next to each other, you need to float them.

.thumbboxcontent {
float: left;
}