SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping and alignment problem

    Yesterday I posted about my problem with the content in the center of my page overlapping the nav and information on the left hand divs.

    I fiddled around all day (between answering phones and all the other secretary stuff I had to do!) The content now doesn't overlap (except in Firefox 1.5/Win 2000) but still isn't ideal in Opera, Safari, and Firefox. Looks fine in IE. Here's a view of the different layouts in different browsers:

    http://browsershots.org/http://www.w...com/index.html

    Help! Please?!

    Thank you

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    First remember that floats are removed from the flow and allow foreground content to wrap around them.

    Your .content class is 550px wide which means it starts at the left edge of the page (because floats are removed from the flow.). However foreground content is reflowed around the float but will wrap under the float as soon as it can. Your 550px width will encompass the float also so it will not reach the right side of the page

    You would either need to do one of 3 things.

    Remove the width from the center content and using a margin left that is greater than the width of the float so that the content stays away from it. Remembering that the margin applies from the containers edge and not from the float. The margin slides under the float until it hits the first non floated element.

    Alternatively apply overflow:auto to the centercontent which will make it avoid the float much in the same way that applying "haslayout" does for ie (which is why ie was staying to the side anyway.)

    Code:
    .content {
        line-height: 1.5em;
        margin: 30px 20px 10px 5px;
        width: 550px;
        text-align: left;
       overflow:auto;
    }
    
    Or thirdly (and perhaps the safest option) float the centercontent left also.

    Code:
    .content {
        line-height: 1.5em;
        margin: 30px 20px 10px 5px;
        width: 550px;
        text-align: left;
        float:left;
    }
    If you use the floated option then you will need to place a clearer div after the floats to enable the parents background's color to encompass the floats. (read the faq on floats for more information on floats and clearing methods).

    Hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YIPPEE it worked - at least, on the browsershots preview of my test page.

    I was thinking about this all evening and was on the right track, but Paul, when I read your post this morning you helped make it much more clear (no float pun intended).

    Thank you very much for taking the time to post. I'm still learning, but my boss had high expectations that I really wanted to meet.

    Now to fix the real site.

    Thanks, Paul, you made my day!


Bookmarks

Posting Permissions

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