CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-7
Kevin M.
Kevin M.

Reputation: 139

Stretch DIV to Page Width

I need a div to expand to the whole page width of the HTML document depending on its content.

Here is the scenario:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Traditional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testing</title>
<style type="text/css">
body
{
background-color:pink;
padding:0;
margin:0;
}
#testDiv
{
background-color:red;
}
</style>
</head>

<body>
<div id="testDiv">
<table width="2000px">
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>

</html>

testDiv will only stretch to the size of browser window, but not the whole page itself. I have gotten this behaviour to work with a table layout, but I would prefer if someone could provide a CSS solution. I also need the solution to work for IE 7.

Upvotes: 1

Views: 4396

Answers (2)

Gabe
Gabe

Reputation: 50493

To stretch to the size of content inside of the <div> just set the display rule to inline-block, For IE7 you will have to include a couple hacks as well.

Example

<!DOCTYPE html>
<html>
   <head>
     <title>testing</title>
     <style type="text/css">
       body
       {
         background-color:pink;
         padding:0;
         margin:0;
       }
       #testDiv
       {
         background-color:red;
         display: inline-block;
         /* IE 7- hacks */
         zoom: 1;
         *display: inline;
       }
      </style>
   </head>
   <body>
     <div id="testDiv">
       test
       <div style="width: 2000px"></div>
     </div>
   </body>
</html>

Upvotes: 2

R&#233;p&#225;s
R&#233;p&#225;s

Reputation: 1820

try with this. :)

html {width: 100%; height: 100%; padding: 0; margin: 0;}
body {width: 100%; height: 100%; position: relative; padding: 0; margin: 0;}
#testDiv {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

Upvotes: 0

Related Questions