SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to keep DIVS from Overlapping...

    My "contentmain" and "sidebar" divs are overlapping. How do I fix?

    http://retrocitysunglasses.com/newblank3.html

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it seem fine to me. its a small page.

    may be due to black background i m not able to see overlaping.

    which browser are you checking it in

    vineet

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I don't see it overlapping either. I'm viewing in Opera 10.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Your #contentmain is sliding under your sidebar because floats are removed from the normal page flow. You will need to float #contentmain also then you will see it's full width as it floats next to the sidebar.

    You had overflow:auto on your #content which will contain floats, overflow:hidden will do the same without the possibility of giving scrollbars.
    Code:
    #content {
    overflow:hidden; /*contain floats*/
    width: 900px;
    margin: auto;
    }
    #sidebar {
    float: left;
    background: #ffffff;
    width: 175px;
    border-right: 3px #000000 solid;
    }
    #contentmain {
    float:left;
    background: #ffffff;
    width: 722px;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Stomme Poes has a demo set up with an opaque sidebar. It will show you how static blocks slide under floats while the text within them does not.
    http://stommepoes.nl/floaties.html

    You can also set overflow:hidden; on a static block to keep the background color from sliding under a float.
    http://www.pmob.co.uk/temp/floats-wrap-under.htm

  6. #6
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your input, guys! I took Rayzur's suggestion. That did it.


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
  •