Forum Moderators: not2easy
Ive tried everything but the solution just wont reveal itself, can someone shed some light on this problem.
<html>
<head>
</head>
<body>
<!-- used to make shadowed edges /-->
<div id="outer">
<div id="inner">
<!-- end shadowed edges -->
<div id="header">
<h1>logo</h1>
</div>
<div id="content">
<div id="menu_container">
<ul>
<li>link</li>
</ul>
</div>
<div id="text">
<h1>Heading 1 </h1>
<p>Lorem ipsum est lorem fierent te, ea mei doming vituperata, an decore
commune est. Ad appetere lobortis disputando eam, his in illum nostro.
Ne legimus intellegebat mel, omnium omittantur ius no. Ne pri veri
probatus inciderint, porro euripidis pri ne. Dicant ubique at sed.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer junk</p>
</div>
</body>
</html>and now the css
* {padding: 0px; margin: 0px;}
html{
background-image: url(images/back.jpg);
background-repeat: repeat-x;
text-align: center;
height: 100%;
color: #000000;
}
body{
height: 98%;
font-size:62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#footer {
height: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
clear: both;
font-size: 0.9em;
position: relative;
width: 770px;
margin: 50px auto 0px;
float: none;
}
#outer {
width: 780px;
background: #FFF url(images/shadow_r1_c1.jpg) no-repeat left top;
text-align: left;
position: relative;
height: 600px;
margin: 8px auto 0px;
padding: 0px;
}
#inner {
padding-left: 5px;
padding-right: 6px;
background: url(images/shadow_r1_c5.jpg) no-repeat right top;
height: 574px;
}
#header {
height: 137px;
margin: 0px;
padding: 0px;
width: auto;
position: relative;}
#content {
margin: 0px 7px;
float: left;
width: 770px;
}
#text {
width: 590px;
margin: 0px 0px 23px 12px;
padding: 0px;
float: left;
}
#menu_container{
width: 150px;
background: url(images/menu_r3_c1.gif) repeat-y;
height: 550px;
float: left;
margin: 0px 0px 0px 7px;
padding: 0px;
}
If your having issues with divs not clearing when you want them to try inserting another one below the block/s you need to clear and apply this style to is
height: 0px;
clear: both;
[edited by: PSWorx at 12:29 am (utc) on Mar. 15, 2007]
I dont understand what the doctype does
Perhaps one of the forum mods could help out here or further more take a look on w3c website for additional info related to the doctype and how it affects the rendering of html.
1 example i can offer is regarding the centering of content in divs, if no doctype is used then this is not possible as far as i am aware and the use of a containing div with text-align: center is required, but with the doctype (or the correct doctype) the use of margin-left/margin-right: auto and a preset width would have the same effct.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">All tested browsers showed the footer below both "link" and "Heading 1 [...] ubique at sed."
Most notable effects of correct doctypes in the correct location are:
... but this is not the only problem.
The other problem is that your footer is outside of both
#outer#inner#inner#outer#outer#innerHeight is calculated irrespective of content - basically, it will go "I am this height. What's inside me? Taller than my height? Oh well, too bad."
So, I suggest:
min-heightmin-heightmin-heightAnd that's it :)
