Some Issues

HTML & CSS
1

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 :slight_smile:

Thanks,

Mike

2

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.

#content-wrapper 
{
    background: #FFF url("images/content-wrapper.jpg") no-repeat;
    width:940px;
    [COLOR=Red]/*height: 600px; remove the height*/[/COLOR]
    [COLOR=Blue]margin: auto;[/COLOR]
    [COLOR=Blue]overflow:hidden;[/COLOR] [B]/*contain floats*/[/B]
}

#content
{
    float: left;
    width: 640px;
    padding: [COLOR=Blue]30px[/COLOR] 0 [COLOR=Blue]20px[/COLOR] 0; /*[B]add a little bottom padding[/B]*/
}

#footer
{
    background:[COLOR=Blue]#FFF[/COLOR] url("images/footer-bg.jpg") no-repeat;
    width:940px;
    [COLOR=Blue]height:105px;[/COLOR]/[COLOR=Red]*was 100px ([B]remove[/B] position:relative -[/COLOR][COLOR=Red] [B]replace[/B][/COLOR][COLOR=Red] bottom:5px)*/[/COLOR]
    [COLOR=Blue]margin: auto;[/COLOR]
   [COLOR=Blue] clear:both; [B][COLOR=Black]/*clear the floats above*/[/COLOR][/B][/COLOR]
}