Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Can't get 100% width when browser resize

Posted by: akira_lee Jun 10 2011, 04:43 AM

Hello

I'm trying to do a layout that's 100% width but when i resize the browser width to eg 500 px, the contents_contents (with white background) does not occupy the actual size of the browser, i can't figure out why this is happen.. Can someone help me out? Here's the example: http://carlajesus.com/projectos/cnc/teste_width100.html the error appear in all browsers (IE, FF, Chrome..)

Here's the code:
<style type="text/css">

body {
margin: 0 auto;
margin-bottom:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#46443d;
background-image:url(http://carlajesus.com/projectos/cnc/images/bg_pattern.jpg);
}

a {
outline:none;
}

#container {
width:100%;
float:none;

width:100%;
background-color:#fff;
}

#contents_topo{
width:100%;
height:365px;
float:none;

background-image:url(http://carlajesus.com/projectos/cnc/images/bg.jpg);
background-repeat:repeat;
}

#contents_contents{
width:980px;
float:none;
margin:0px auto;
}

#contents {
width:980px;
float:none;
margin:0px auto;
background-color:#F00;
}

#contents_footer{
width:100%;
height:100%;
float:none;

position: relative;
z-index: 1;
background-image:url(http://carlajesus.com/projectos/cnc/images/bg_pattern.jpg);
}

#contents_footer_sombra {
width:100%;
height:10px;
background-image:url(http://carlajesus.com/projectos/cnc/images/bg_sombrabottom.jpg);
background-repeat:repeat-x;
z-index:2;
}

</style>
</head>

<body>

<div id="container">

<div id="contents_topo">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>top</td>
</tr>
</table>

</div>
<div id="contents_contents">
<div id="contents">

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="250">contents</td>
</tr>
</table>

</div>
</div>

<div id="contents_footer_sombra"></div>

<div id="contents_footer">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200">footer</td>
</tr>
</table>
</div>

</div>

Thanks in advance

Posted by: Darin McGrew Jun 10 2011, 12:14 PM

I'm confused. You specify a width of 980px, and that's what I see. What do you expect to be different?

Posted by: pandy Jun 10 2011, 01:42 PM

I think the OP means the white container, but it is 100%. It doesn't expand to more than 100% when you scroll horizontally though and it shouldn't. Is that what you meant?

Posted by: pandy Jun 10 2011, 01:46 PM

Mea culpa! I thought the white box was #container, but it isn't. What Darin said then.

Posted by: akira_lee Jun 12 2011, 06:55 AM

Hello,

The 980px width it's in div id="contents" but the white bar it's in div id="contents_contents" and that one have width:100%.

The white bar is working fine when the width of the browser is larger than X pixels but when I reduce the browser window the white bar does not occupy 100% of the browser. You can see the error in here http://img809.imageshack.us/img809/7792/errorbz.jpg

Do you know how this error can be resolved?
Thank you

Posted by: Frederiek Jun 12 2011, 07:44 AM

If you don't specify a width to a div, they are 100% by default as they are block-level elements. On the other hand, all your tables inside those div's have a width="980", forcing scrolling when the window is smallr than that.

Posted by: akira_lee Jun 12 2011, 08:01 AM

true, all the tables have 980px but only the white background shrink.. how can i do this?