Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Divs make content overlap

    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:
    Code:
    <div class="item" style="display:block;">
        <div class="item_title">
         <h2>HEADLINE HERE</h2>
        <!-- End Item_Title -->
        </div>
        <div class="item_divider">
        <!-- End Item_Divider -->
        </div>
        <div class="item_date">
         <p class="date">DATE HERE</p>
        <!-- End Item_Date -->
        </div>
        <div class="item_body">
         <div class="item_image">
        IMAGE HERE
        <!-- End Item_Image -->
         </div>
        <div class="item_text">
          <p>MAIN TEXT HERE</p>
         <!-- End Item_Text -->
         </div>
        <!-- End Item_Body -->
        </div>
            <div class="item_footer">
    RELATED LINKS HERE
            <!-- End Item_Footer -->
        </div>
           <!-- End Item -->
       </div>
    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!
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    You need to clear your floats. Read 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Arbitrator:

    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •