Strange overflow or width problem

HTML & CSS
1

Hi,

I can’t figure this out for the life of me. I’m having this weird problem when the browser size is smaller than the min-width of my site… the header and footer get cut off. The black should expand across the entire page (screenshot attached).

This is on my portfolio.

I’ve tried to add width:100% on different elements and tried several different overflow options to no avail. I have no idea why this is happening.

Here’s the CSS that should be directly related to this:

#container {position:relative; min-height:100%;}

#header, #nav, #content, #footer {width:100%;}
#header p, #nav ul, #inner, #footer div {max-width:1100px; min-width:900px; margin:0 auto; padding:0 25px;}
#header, #footer {background-color:#000;}

#header {height:3.75em; line-height:4.5em;}
#header p a {font-size:3.875em; color:#fff; text-decoration:none; padding-right:15px;}
#header p a:hover {font-size:3.875em; color:#ccc;}
#header p span {font-size:1.25em; color:#fff; font-weight:bold; letter-spacing:.125em;}

Any help is much appreciated.
Thanks a lot!

2

Hi,
You just need to move your min/max widths to the parent elements and not the children.

You have all your min/max widths on the child elements currently, beware of using side paddings along with 100% width also.

#header[COLOR=Red] p[/COLOR], #nav [COLOR=Red]ul[/COLOR], #inner, #footer [COLOR=Red]div[/COLOR] {max-width:1100px; min-width:900px; margin:0 auto; padding:0 [COLOR=Red]25px[/COLOR];}

This should be all you need to do


#header, #nav, #content, #footer {
width:100%;
max-width:1100px; 
min-width:900px;
margin:0 auto;
}

That width 100% above is not really needed but in this case it is setting haslayout on IE6. You might consider chnaging it to 1000px and then you could set your side paddings back on there and keep IE6 working with a compromise.

Remove the absolute positioning from the footer to center it up

#footer {[COLOR=Red]position:absolute; bottom:0;[/COLOR] height:1.25em; padding:3px 0;}

It would really be best to set up a main wrapping div for the entire page and then just set your min/max widths there once. :wink:

3

Okay I see that you do have a main wrapping div called #container and I see that you are trying to do a sticky footer by using absolute positioning on the footer.

The AP sticky footer will not work with IE7. Have a look through the FAQ for instructions on how to set up a X-Browser sticky footer.

[SIZE=1][B]FAQ : How do you put a sticky footer at the bottom of the window?[/B][/SIZE]

Now, if you want the header and footer to stretch to the full width of the viewport while the rest of the page stays centered with min/max widths you could do something like this.

http://www.css-lab.com/test/full-hdr-ftr.html

Then you would just set your min/max widths on the container.


[B]#container[/B] {
min-height:100%;
width:1000px;/*IE6*/
max-width:1100px; 
min-width:900px; 
margin:0 auto;
padding:0 25px;
}
4

You’re awesome! This is the third forum I’ve posted this to and you’re the only person that came up with an answer that works. Using a combination of your provided solutions, I was able to get it working properly.

I haven’t been able to test on different screen resolutions/sizes or browsers yet, so I’m sure there are a few minor tweaks needed, but right now it seems to be working great.

Thanks a lot!

5

Hi,
You got it close but it is not quite working like you think it is. If you cut that slider div out of the html you will see that the sticky footer is not working.

  1. The IE6 min-height hack is not targeting your content div, it is set as #wrapper
  2. You have misspelled content on your psuedo :after rules
  3. You have added top and bottom padding to the min-height:100%, the paddings should go in the contentInner
  4. The content div needs to get haslayout set on it for IE6/7

* html [COLOR=Red]#wrapper[/COLOR]{height:100%;} /* is "min-height" in IE6 */

#[COLOR=Red]conent[/COLOR]:after, #contentInner:after {...}

#content {clear:both; [COLOR=Red]padding:25px;[/COLOR] min-height:100%;}
#contentInner {width:auto;}

Look through the source code a little more closely of the example page I posted above. :wink:

My example calls the min-height:100% div #wrapper and the inner div Content, you will see that I put the top and bottom padding on that inner Content div

You have Content as your min-height:100% div and #contentInner as the inner div. Set your padding (and haslayout) on that inner div. It will take more than 25px padding to cater to your header and footer.

There are two different ways to bring the footer back into the viewport after the main wrapper gets min-height:100%. You should become acquainted with both methods and have a full grasp on the bare bones code before adding your additional divs to it.

Sticky Footer with top border soak-up

Sticky Footer with negative top margin on footer

Those examples do not have the IE8 & Opera fixes in place yet for the sake of showing the bare bones approach to the different methods.

6

Wow, man. You’re good.
I’m bad at the cross browser fixes (hasLayout, etc). I have to learn that.

I thought this would be MUCH easier to accomplish than it is.
How do you analyze and test your css when starts getting more complex and confusing? I start to lose my mind when I’m going through this trying to figure out what’s wrong…

7

How do you analyze and test your css when starts getting more complex and confusing?

I start to lose my mind when I’m going through this trying to figure out what’s wrong…

It is best to test your pages in all major browsers while your building them. Each time you add a new element that is positioned somehow (either with floats or positioning) you should check and see that all browsers are still in agreement with what you just did. You will be able to see what the problem is as it happened rather than trying to figure it out at the end.

Once you understand the bugs that are present in various browsers you will know what each browsers needs while you (not dreamweaver) are writing the code. You will get to the point where you don’t have to test as frequently.

It just comes with experience as with any other trade or profession.

8

That’s A LOT of testing… but I know what you mean. You have to learn somehow.
Hopefully I’ll be that good one day. It’s only been a couple years for me, but I feel like I should have this down better by now.

Anyway, thanks so much for the help. I still have some testing/tweaking to do, but it’s a lot better than it was. I really appreciate it.