SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Some Issues

  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Some Issues

    Ok here is the link to what I am working on...

    http://mikenificent.com/veteransinc/

    Now I'm not sure how it looks in IE yet, but in Firefox it looks fine I havent got to doing my cross-browser stuff yet.

    But one major issue which is concerning me is right-now I have a 600px heigh on the content-wrapper which contains all the content News & Events stuff but I don't want the 600px incase I decide to put more content but everytime I take out the 600px the footer goes straight below the header image and stuff and the content stuff is all on background image, which doesnt make sense as the html for the footer comes after all this so why would it move up. I may be missing something but can't seem to see what it is. So if someone can help me so when I remove the 600px everything still looks correct that would be great

    Thanks,

    Mike

  2. #2
    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,
    Go ahead and remove the 600px height from #content-wrapper.

    The problem was that you did not force it to contain the floated #content div. You should probably go ahead and learn about that subject and the various methods that can be used.

    Gary has written a good article on it -
    Gary Turner Web Dev - Containing Float Elements

    And Poes has set up a nice test case of float containment methods -
    Stoemme Poes - Float Containment Test

    I'll go ahead and use the overflow property for you in the code below.

    You just need to add clear:both to your footer also to clear all floats above it.

    Code:
    #content-wrapper 
    {
        background: #FFF url("images/content-wrapper.jpg") no-repeat;
        width:940px;
        /*height: 600px; remove the height*/
        margin: auto;
        overflow:hidden; /*contain floats*/
    }
    
    #content
    {
        float: left;
        width: 640px;
        padding: 30px 0 20px 0; /*add a little bottom padding*/
    }
    
    #footer
    {
        background:#FFF url("images/footer-bg.jpg") no-repeat;
        width:940px;
        height:105px;/*was 100px (remove position:relative - replace bottom:5px)*/
        margin: auto;
        clear:both; /*clear the floats above*/
    }


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
  •