Treehouse: Grow your CSS skills. Land your dream job.

Another CSS Page Wrap Problem

  • # April 13, 2011 at 10:27 pm

    Hi, I’m trying to get the above page wrap straight, but it won’t line up correctly. There is one wrap for the whole content area, and there is one for just the header.

    I want the black box to align to the right of the logo.


    # April 14, 2011 at 12:35 am

    Looks to me like your page wrap is only 960px but the logo and black box together are over 1000px

    # April 14, 2011 at 6:17 am

    Float the splash box to the right for it to align that way. otherwise set a left margin equal to the width of the logo.

    #splash {background-color: #000; height: 297px; width:708px; margin: 0; padding: 0; float: right;}

    Are you looking to have them sit side by side?

    # April 14, 2011 at 10:43 am

    Yes, I need to have them sit side by side. The other div is going to be a splash image for the company.

    The neon page wrap border is just so I can see where the page-wrap is ending up.

    Unfortunately, this still isn’t working! I don’t know why, the logo/splash equal 960px…


    # April 14, 2011 at 10:54 am

    replace your css with this… (check reference below to see it working)


    #body {background: #FFFFFF; font-family: Tahoma, Geneva, sans-serif; font-size: 24px; color: #000000; margin: 0 auto; padding: 0;}
    #page-wrap {width: 960px; height: 1500px; margin: 0 auto; padding: 0; border: #F3C solid 1px;}
    #header-wrap {width:960px; height: 297px; margin: 0; padding: 0;}
    #logo {height: 297px; width: 252px; margin: 0; padding: 0; float: left;}
    #splash {background-color: #000; height: 297px; width:708px; margin: 0; padding: 0; float: right;}
    #menu {font: Tahoma, Geneva, sans-serif; float: left; width: 66%; text-align:left; border: #F3C solid 1px;}
    #sidebar {float: left; width:34%;}
    #blog-feed {background-color: #999;}

    .clear {clear: both;}


    for reference…

    if you dont want the page to be centered remove ‘auto’ from margin 0; on the page-wrap bit.

    hope this helps!

    # April 14, 2011 at 10:58 am

    Thank you!

    # April 14, 2011 at 10:59 am

    More than welcome

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.