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: 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?
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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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?
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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Mea culpa! I thought the white box was #container, but it isn't. What Darin said then.
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: 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.
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: 25th April 2024 - 11:24 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC