Forum Moderators: not2easy
sorry for the very long post, but i really want to solve this. I'd like that contentWrapper height grow with the content div. Is it possible to implement? It's really annoying that you have to manually set the height of the contentWrapper evrytime when you remove/add some content into content div. Please help me out with this. Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home / Info</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- End header -->
<div id="contentWrapper">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div><!-- End Left Column -->
<div id="content">
<div id="menulink">
<a href="index.html" class="navi_link">Home</a> / <a href="index.html" class="navi_link">Info</a> /
</div> <!-- End menulink -->
<div id="dropdown-menu">
</div> <!-- End dropdown-menu -->
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut est ac leo volutpat interdum. Vestibulum ante ipsum primis in faucibus orci luctus et
</div> <!-- End text -->
</div> <!-- End Content -->
<div id="rightcolumn">
</div> <!-- End Right Column -->
</div> <!-- End contentWrapper -->
<!-- <div id="footer"></div> -->
<div class="clear"></div>
</div> <!-- End Wrapper -->
</body>
</html>
main.css:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #E7DBD5 url(background9.jpg) fixed top;
color: #915d2c;
}
a:visited{
color: #0360f9;
}
#wrapper {
margin: 10px auto;
width: 854px;
}
#header {
width: 852px;
border-width: 1px;
border-style:solid;
border-color:#000;
height: 186px;
margin: 0;
background: #AEBB51 url(header.jpg) no-repeat top;
position: relative;
z-index:100;
}
#contentWrapper {
background: #989562 url(contentwrapper2.jpg) repeat-y left;
height: 4865px;
border-width: 0 1px 0 1px;
border-style: solid;
border-color: #000;
}
#dropdown-menu {
position: relative;
height:30px;
width: 558px;
position: relative;
z-index:100;
border: 1px solid #ccc;
margin: auto;
background: #ec783c;
}
#menulink {
position: relative;
width: 558px;
height: 22px;
margin: auto;
border: 0 1px 0 1px solid #ccc;
background: #ec783c 50% 50%;
}
#content {
position: relative;
float: left;
background: #c0c0c0;
overflow: visible;
/*margin: 0 0 0 146px;*/
border: 0px solid #000;
/*top: 187px;*/
width: 560px;
min-height:426px;
height:auto !important;
height: 426px;
display: inline;
max-height:500px;
}
#leftcolumn {
position: relative;
float: left;
color: #333;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
background: #ec783c url(leftcolumn.jpg) no-repeat top;
/*
top: 187px; */
width: 146px;
min-height:426px;
height:auto !important;
height: 426px;
}
#rightcolumn {
position: relative;
float: left;
color: #333;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
background: #ec783c url(rightcolumn.jpg) no-repeat top;
/* margin: 187px 0 0 707px; */
width: 146px;
min-height:426px;
height:auto !important;
height: 426px;
}
#footer{
background-color: #f0f0f0;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #000;
z-index: 100;
position:fixed !important;
position:absolute;
bottom:0;
left:0;
width:100%;
height:10% !important;
height:10px;
min-height:10px;
max-height:15px;
}
#text{
background-color: #f0f0f0;
padding-top: 20px;
padding-left: 20px;
}
h1,h2,h3,h4{
padding-bottom:10px;
}
p {
padding-bottom: 20px;
}
table td{
width: 33%;
text-align: left;
}
.links{
color: #333;
border: 1px solid #ccc;
margin: 5px;
list-style-type:none;
display: block;
position: absolute;
width: 135px;
text-align:center;
background: #fff;
}
.left_navi{
color: #333;
border: 1px solid #ccc;
margin: 5px;
list-style-type: none;
display: block;
position: relative;
width: 135px;
text-align:left;
background: #fff;
}
.left_navi a{
text-decoration: none;
}
.top-level{
text-decoration:underline;
background: #fff;
font-size: larger;
}
.clear { clear: both; }
.navi_link {
font-size:10px;
font-family:arial, verdana, sans-serif;
color: #333;
}
#menulink a:visited {
color: #333;
}
[edited by: swa66 at 10:23 pm (utc) on Dec. 16, 2008]
[edit reason] tried to make it render a bit more compact [/edit]
Anyway, glancing through it it seems the contentwrapper only contains elements that are floated ?
In that case the easiest solution is to add something after the floated elements that is not floated itself and has the clear:left property.
You kinda have it in there, already for the wrapper, not for the contentwrapper
<br class="clear" /> <!-- add this -->
</div> <!-- End contentWrapper --><!-- <div id="footer"></div> -->
<div class="clear"></div> <!--existing-->
</div> <!-- End Wrapper -->
And of course, remove the fixed height of that wrapper.
I'm not sure the clear div you had in there is doing much.
Alternatively, check out the "clearfix", it'll do more or less than same without adding things to the html, but is quite a bit more complex to understand.
here's the fix i added:
CSS:
.clearfix:after {
content: ".";
display: block;
height: 0.1px;
clear: both;
font-size: 0;
visibility: hidden;
}
.clearfix {
display: block;
}HTML:
<div id="contentWrapper clearfix">
[code]
<div id="contentWrapper" class="clearfix">
.
.
.
</div>
clearfix etc. only works in standards compliant browsers.
For IE (if it needs it (it doesn't that often)), you need to give the parent "hasLayout". My favorite way to do it is to add "zoom:1;" to the conditional comment, but there are other ways.
BTW: this really is complex code, the best suggestion I have is to review everything you have in there and check if and why you need it, and remove a lot of the unneeded stuff.
The principle of KISS (Keep It Simple and Stupid) works wonders.
I better try this KISS method soon now when i got this thing to work.
one more time: Thanks a lot for your help!
