Forum Moderators: not2easy

Message Too Old, No Replies

div does not extend to the whole page in Firefox

         

Erica

8:45 pm on Nov 20, 2007 (gmt 0)

10+ Year Member



I have created a page with some text in a div. If the text is too long (more than user's screen), the div is cut. How to make div to expand in order to incorporate long text? (The problem does not exist in Internet Explorer, just in Firefox.)

CSS file:

body{
background: #ffffff;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
}

#container {
margin: 0px auto;
height: 100%;
width: 800px;
position: relative;
text-align: center;
background: #0000dd;
}

#text {
padding-top: 20px;
margin-right: 10px;
text-align: right;
width: 530px;
vertical-scrollbars: auto;
}

HTML file:

<html>
<head>
<link href="css/style_second1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id = "text">
<h1>title</h1>
<br />
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
</div>
</div>
</body>
</html>

Thanks.

sgietz

10:59 pm on Nov 20, 2007 (gmt 0)

10+ Year Member



At first glance, you should probably remove the height for your #container div. That 100% only applies to the visible area in your browser, so in effect, it's not the #text div that's not expanding, it's your #container div.

rocknbil

9:00 pm on Nov 21, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Random test, I actually ran this code and use FF by default. Using a valid 4.01 trans. doctype, no problems here . . . . unless by "cut off" you mean it's actually filling out the page causing browser scrollbars.