homepage Welcome to WebmasterWorld Guest from 54.166.110.222
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Css problem
Divs seem to be line breaking
Ben878




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

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.

 

your_store




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

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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved