Header and Footer CSS Alignment Issues

[fcvolunteer]

Hi,

I'm new to this forum and need a little bit of help. I made a site using tables rather than css for the format but when it wasn't showing up correctly in different browsers and screen resolutions I decided to fix it (with help from some people who know css formatting better than me :-) )

I'm almost done but I have two problems:

1. My logo and top navigation menu aren't cooperating with each other. In some browsers (and screen sizes) they sit side by side with some room in between but in others, they push each other out of place or overlap so you can't see the nav menu correctly.
2. The footer is shifting over to the left instead of being centered with the rest of the site.

I'm pretty sure these are both easy to fix I just have no clue what exactly needs to be changed.

My current site can be seen here. The table version can be seen here so you can see how I'd like it to look (assuming it shows up correctly in your browser :-/)

Thanks in advance!

[ndeniche]

Try creating a css class for a <div> container for the whole page (header, content and footer). This way, all your absolute positions and float properties will be included in that container.

Next, in the navbar class, you got

float:right;
margin-left:-225px;

If you tell it to float right, there's no need to specify a left margin.
Another thing: sicne you're telling the #nav container to float right, tell the <img> element to float left. That way they won't overflow throughout the header.

[fcvolunteer]

Try creating a css class for a <div> container for the whole page (header, content and footer).

Pardon my ignorance but what css should I assign to that class? For now I have a modified version of the #content container's css and I know it's not right cuz I still have the same problem.

Next, in the navbar class, you got

float:right;
margin-left:-225px;

If you tell it to float right, there's no need to specify a left margin.
Another thing: sicne you're telling the #nav container to float right, tell the <img> element to float left. That way they won't overflow throughout the header.

I took your suggestions and removed the

margin-left:-225px;

and I floated the <img> element left. Honestly though it didnt help and now the logo is all the way to the left and I don't want it floated that far :-/.

So I still have all my same problems :-/ What now?

[moritz11]

hay, i m new here, i m studding on web development and i hope i learning lot of things on this forum

[ndeniche]

try wrapping everything into a

<div class="wrapper">
...
</div>

container, with the following properties (or you can play with your own):

.wrapper
{
    width:1000px;
    left:0;
    right:0;

    margin-left:auto;
    margin-right:auto;
}

Next, remove the margin-right from your nav menu.

The wrapper will act as a margin guide for the rest of the document, so the alignment for the elements will therefore be automatic.

[floatingDivs]

To center your footer, set .inner-footer margin to auto;

.inner-footer {
margin: auto;
}

Also, remove the overflow on your header, because I get a little scroll bar if my window is too small...come on, man! :P

[teedoff]

hay, i m new here, i m studding on web development and i hope i learning lot of things on this forum

umm spelling too? lol

OP, I think Nichito was suggesting you create a new div, wrap it around everything between the body tags, and style that div(class or id either one) with a width and margin auto.

This will center all elements in your page. I assume you have a valid doctype..thats very important as well for centering page elements.

[fcvolunteer]

Nichito- Thanks for your clarification I made those changes and it definitely helped :-)

floatingDivs - I made the changes you suggested and that centered the footer correctly. Also, thanks for the heads up about the overflow issue, I removed that. I used your margin: auto; solution for the top also as well as changing the name of the div id's to replicate the way the footer was setup since the header background was cutting off on top but not on bottom when I implemented the suggested changes.

Thanks everyone for your help!