banner won’t stretch when window sized small

[shamai]

if you go here:
http://www.baseshamai.com

and resize your screen really narrow you get scrollbars and if you scroll right the banner is broken
what can i do to fix this for all size screens?
i added width 100% but that doesn’t work.
and i noticed that when its narrow the body isn’t the whole viewport for some weird reason

[xpy]

body {min-width:960px;} (same as .wrap) ;)

[noahgelman]

Hello good sir!

The Problem: width:100% does not work because it refers to the current width of the window, and because your content is wider then the width of the window (thus needing the scrollbar) it stops when you scroll over.

Fun Facts!: If you were to set the width to over 100%, you would see it account for the extra stuff, but it also causes more problems :(

The Solution!: The html tag has a default of width:100%. Simply adding a minimum width to it will fix the issue. That way it will always account for all of your content.

BAM! Code Example!

html {

min-width:960px /* the width of your content */

}

[shamai]

it helps a little but not enough i still see a gap and theres nothing even overflowing the viewport now.
oh and I’m talking about a different page actually. this one:
http://dl.dropbox.com/u/1090829/wpbaseshamai/index.html

im remaking my website into a wordpress theme

[shamai]

ahh…
because i made a dynamic width centered on my menu list. instead of setting a width to the ul and giving it margin auto I did a weird thing and the actual ul is off to the side. its weird but it was the only way to make a dynamic width centered.
so the actual min-width would have to be more than 960 in this case.

or the simple overflow:hidden did the trick :)

[Author]

Posts