View Full Version : Divs make content overlap

Dec 1st, 2006, 06:54 PM
Hello All!

I am having a slight problem, where I am pulling information from a database and putting it on the front page. Each record that gets pulled from the DB is put inside a div system, like this:

<div class="item" style="display:block;">
<div class="item_title">
<!-- End Item_Title -->
<div class="item_divider">
<!-- End Item_Divider -->
<div class="item_date">
<p class="date">DATE HERE</p>
<!-- End Item_Date -->
<div class="item_body">
<div class="item_image">
<!-- End Item_Image -->
<div class="item_text">
<!-- End Item_Text -->
<!-- End Item_Body -->
<div class="item_footer">
<!-- End Item_Footer -->
<!-- End Item -->

The problem I am having is that if the image for that story is taller than the text, the image starts to cut into the article below, throwing the whole page out of line.
For an example, go to http://www.robowhizards.com/index-new.html

and scroll down to '2006 Nano Quest Challenge Released'
and you'll see what I mean.

Thanks in Advance to anyone who checks this out!

Dec 1st, 2006, 09:38 PM
You need to clear your floats (http://css-discuss.incutio.com/?page=ClearingSpace). Read Containing Floats (http://www.complexspiral.com/publications/containing-floats/) first if you have no clue what Iím talking about; Containing Floats is also linked to from the top of the first resource. Quick solution: *.item { overflow: auto; }.

By the way, donít display those badges at the bottom of your page that declare that you have valid XHTML and CSS when both your document and stylesheet are invalid. Might want to also clean up things like div.item_image { display: inline; float: left; Ö }; floated elements cannot be inline so that first declaration is pointless.

Dec 1st, 2006, 10:32 PM

Thanks for your help! I've learned something new as well as had my problem solved.

As a note on the XHTML/CSS tags, the page you are looking at is just a sample I put up for people to look at to answer this problem. It isn't complete yet, and I certainly do not plan to include those tags on any live site erroneously.

Dan Barr