[Question] CSS HTML Width Problem

Spirited · 04/25/2012, 19:32

Hey everyone... so I'm having a weird problem with scrolling. Sorry if this is easy to figure out, this is my first css website. If I shrink my browser's size down to where my website needs scroll bars, the html container doesn't expand. I tried setting it to 100% width, but nothing happened. It only happens in non-traditional browsers (everything but IE for a change).

Here's my CSS code:

Code:

body {
	background-image: url("../images/background.jpg"); background-color: #ac804c; 
	background-repeat: no-repeat; background-position: center top; 
	font-family: "Century Gothic" , Sans-serif; font-size: 13px; color: 1d0000;
	margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; 
	width: 100%; }
	
#top_bar {
	background-image: url("../images/top_bar.png"); background-repeat: repeat-x;
	background-position: center top; width: 100%; height: 38px; 
	z-index: -2; }
	
img { border: 0px; }
	
img.logo {
	width: 441px; height: 214px; background: url("../images/logo.png") 0 0; z-index: 0; }

#EDIT - Resolved. The solution was to make an image of the bar that was the desired width of the website and to put that in the main container, then keep the smaller image of the bar outside of the container to fill the rest of the website when scroll bars aren't necessary.

PseudoPsycho · 04/25/2012, 21:52

First:

Code:

body { ... color: 1d0000; }

Put a "#" up to there.

Code:

img.logo { ... z-index: 0; }

You can delete this. z-index is for absolute position only.

And now to your problem. You could try with:

Code:

width:auto; min-width:100%;

Spirited · 04/25/2012, 22:27

Quote:
Originally Posted by PseudoPsycho
First:
Code:
body { ... color: 1d0000; }
Put a "#" up to there.
Code:
img.logo { ... z-index: 0; }
You can delete this. z-index is for absolute position only.

And now to your problem. You could try with:
Code:
width:auto; min-width:100%;

That doesn't fix it. I tried that before, but thanks for the other too things.
I already fixed the problem. It's a browser problem that needs to be accounted for.

Edit: