The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Can't get 100% width when browser resize
akira_lee
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 10 2011, 12:14 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,851
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?


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 10 2011, 01:42 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,722
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?


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 10 2011, 01:46 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,722
Joined: 9-August 06
Member No.: 6
Mea culpa! I thought the white box was #container, but it isn't. What Darin said then.


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
akira_lee
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 12 2011, 07:44 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 3,539
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
akira_lee
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th May 2013 - 03:52 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC