Can't get 100% width when browser resize |
Can't get 100% width when browser resize |
akira_lee |
Jun 10 2011, 04:43 AM
Post
#1
|
Group: Members Posts: 3 Joined: 10-June 11 Member No.: 14,738 |
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 |
Darin McGrew |
Jun 10 2011, 12:14 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
I'm confused. You specify a width of 980px, and that's what I see. What do you expect to be different?
|
pandy |
Jun 10 2011, 01:42 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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?
|
pandy |
Jun 10 2011, 01:46 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Mea culpa! I thought the white box was #container, but it isn't. What Darin said then.
|
akira_lee |
Jun 12 2011, 06:55 AM
Post
#5
|
Group: Members Posts: 3 Joined: 10-June 11 Member No.: 14,738 |
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 |
Frederiek |
Jun 12 2011, 07:44 AM
Post
#6
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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.
|
akira_lee |
Jun 12 2011, 08:01 AM
Post
#7
|
Group: Members Posts: 3 Joined: 10-June 11 Member No.: 14,738 |
true, all the tables have 980px but only the white background shrink.. how can i do this?
|
Lo-Fi Version | Time is now: 26th April 2024 - 02:18 PM |