...

View Full Version : Width problem



Azriel
10-31-2009, 03:43 PM
Hi,
I have the following css:

Code:


#container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;

height:46px;
width:100%;
position:relative;
}



all background images are fixed width for 1024x768

and i have the following html
<div id="container">
<div id="banner"></div>
<div id="menu"></div>
<div id="content"> All text goes here </div>
<div id="footer"></div>
</div>

now the problem is that if i set the #container width to let say 1000px; it works fine (only resizing the browser instantly i have the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the backgrounds, thus flowing "out" of the text area.

the links is here
Code:


http://ocdmonline.org/michael/

username: ocdmonline pass:4yGx3fM
Any ideas?
10x

Excavator
10-31-2009, 04:02 PM
Hello Azriel,
I'm not sure what you gain by having your #container 100% wide. Have you tried just centering it like this?



body {
width:100%;
background:#008eb1;
}
#container {
background: url(http://ocdmonline.org/michael//images/page.gif) repeat-y center;
position:relative;
width:1024px;
height:100%;
margin: 0 auto;
}
#banner {background:url(http://ocdmonline.org/michael//images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}

Azriel
10-31-2009, 04:11 PM
Hello Excavator,

yeah i tried that , and it is a possible solution but the difference is that with the 100% when the browser is scaled down horizontally, the banner and the rest of the page remain centred (and no horizontal scrollbar until i reach the text area) whilst if i use the pixel size then immediately the horizontal scroll bar comes up and it reduces from right to left.

abduraooft
10-31-2009, 04:49 PM
Your image http://ocdmonline.org/michael/images/page.gif is not symmetric. Correct is and then set a width say, width:616px; to #contents. After that set margin: 0 auto; to centre it horizontally.

Azriel
10-31-2009, 05:39 PM
ok that worked perfectly 10x



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum