comptherapy
08-06-2006, 07:08 PM
I can't get a DIV tag to expand with the content in Firefox. I've played with this for hours and can't figure it out. Can anyone show me what I can do to fix this? Any help would be greatly appreciated.
:confused:
Here is the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topwrapper">
<div id="top">Title Goes Here </div>
<div id="info">Stay Informed</div></div>
<div id="navwrapper">
<p> </p>
</div>
<div id="headingwrapper">
<div id="heading">
<p>Heading Goes Here</p>
</div>
<div id="headingimage"><img alt="image placeholder" width="450" height="50"></div>
</div>
<div id="contentwrapper"><div id="content">
<p>Main Content Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
</div>
<div id="footerwrapper">Footer Content Goes Here</div>
</body>
</html>
This is my CSS file:
body {
background-color: #5076AC;
margin: 0px;
}
#navwrapper {
background-color: #FFFFFF;
width: 848px;
border: 8px solid #D1DCEB;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
}
#contentwrapper {
background-color: #FFFFFF;
width: 832px;
border: 8px solid #D1DCEB;
margin-right: auto;
margin-left: auto;
position: relative;
padding: 8px;
overflow: visible;
visibility: visible;
}
#footerwrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
width: 848px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#topwrapper {
width: 848px;
margin-right: auto;
margin-left: auto;
padding-bottom: 5px;
padding-top: 10px;
position: relative;
height: 15px;
overflow: visible;
visibility: visible;
}
#info {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
float: right;
}
#top {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #FFFFFF;
}
#headingwrapper {
background-color: #FFFFFF;
width: 848px;
margin-right: auto;
margin-left: auto;
border-top: 8px solid #D1DCEB;
border-right: 8px solid #D1DCEB;
border-left: 8px solid #D1DCEB;
position: relative;
overflow: visible;
visibility: visible;
height: 50px;
margin-top: 10px;
}
#heading {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #D40000;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
float: left;
overflow: visible;
position: relative;
visibility: visible;
height: 34px;
width: 383px;
}
#headingimage {
float: right;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
float: left;
position: relative;
width: 398px;
overflow: visible;
visibility: visible;
}
:confused:
Here is the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topwrapper">
<div id="top">Title Goes Here </div>
<div id="info">Stay Informed</div></div>
<div id="navwrapper">
<p> </p>
</div>
<div id="headingwrapper">
<div id="heading">
<p>Heading Goes Here</p>
</div>
<div id="headingimage"><img alt="image placeholder" width="450" height="50"></div>
</div>
<div id="contentwrapper"><div id="content">
<p>Main Content Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
</div>
<div id="footerwrapper">Footer Content Goes Here</div>
</body>
</html>
This is my CSS file:
body {
background-color: #5076AC;
margin: 0px;
}
#navwrapper {
background-color: #FFFFFF;
width: 848px;
border: 8px solid #D1DCEB;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
}
#contentwrapper {
background-color: #FFFFFF;
width: 832px;
border: 8px solid #D1DCEB;
margin-right: auto;
margin-left: auto;
position: relative;
padding: 8px;
overflow: visible;
visibility: visible;
}
#footerwrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
width: 848px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#topwrapper {
width: 848px;
margin-right: auto;
margin-left: auto;
padding-bottom: 5px;
padding-top: 10px;
position: relative;
height: 15px;
overflow: visible;
visibility: visible;
}
#info {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
float: right;
}
#top {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #FFFFFF;
}
#headingwrapper {
background-color: #FFFFFF;
width: 848px;
margin-right: auto;
margin-left: auto;
border-top: 8px solid #D1DCEB;
border-right: 8px solid #D1DCEB;
border-left: 8px solid #D1DCEB;
position: relative;
overflow: visible;
visibility: visible;
height: 50px;
margin-top: 10px;
}
#heading {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #D40000;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
float: left;
overflow: visible;
position: relative;
visibility: visible;
height: 34px;
width: 383px;
}
#headingimage {
float: right;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
float: left;
position: relative;
width: 398px;
overflow: visible;
visibility: visible;
}