The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic
akira_lee   Can't get 100% width when browser resize   Jun 10 2011, 04:43 AM
Darin McGrew   I'm confused. You specify a width of 980px, an...   Jun 10 2011, 12:14 PM
pandy   I think the OP means the white container, but it ...   Jun 10 2011, 01:42 PM
pandy   Mea culpa! I thought the white box was #contai...   Jun 10 2011, 01:46 PM
akira_lee   Hello, The 980px width it's in div id="c...   Jun 12 2011, 06:55 AM
Frederiek   If you don't specify a width to a div, they ar...   Jun 12 2011, 07:44 AM
akira_lee   true, all the tables have 980px but only the white...   Jun 12 2011, 08:01 AM

« 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: Switch to: Standard · Switch to: Linear+ · Outline

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

- Lo-Fi Version Time is now: 19th April 2024 - 09:02 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC