Højde på to div skal følges ad
Hejsa,Hvorfor er det lige at man ikke kan lave det her lidt smartere?
www.2lderlund.dk/2007
html til siden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2lderlund.dk ver2007</title>
<meta http-equiv="Content-Language" content="da-dk">
<meta http-equiv="imagetoolbar" content="no">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta name="Description" content="Description">
<meta name="Keywords" content="Keywords">
<meta name="author" content="Enlighten Designs">
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
<div id="page-container">
<div id="header"></div>
<div id="subheader"><img src="layout/sublogo.jpg"></div>
<div id="menucontainer"><img src="layout/menu/menutemp.jpg" width="257" height="30">
<img src="layout/menu/menutemp.jpg" width="257" height="30">
<img src="layout/menu/menutemp.jpg" width="257" height="30"> </div>
<div id="flashcontainer">Flash</div>
<div id="divider"></div>
<div id="contentcontainer">
<div id="leftsidebar">
<p>bla bla blabla bla bla bla bla bla bla <br>
bla bla bla bla bla</p>
</div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="clearer"></div>
</div>
<div id="footer">la bla blabla bla bla bla bla bla bla</div>
</div>
</body>
</html>
css:
html, body {
margin: 0;
margin-top: 30px;
padding: 0;
}
body {
margin-top:30;
text-align: center;
background-color:#615b50;
}
#page-container {
width: 850px;
margin:auto;
}
#header {
width: 850px;
height: 42px;
background-image:url(../layout/toplogo.jpg);
background-repeat:no-repeat;
background-position:left bottom;
text-align:right;
}
#subheader {
width: 850px;
height: 38px;
background-image:url(../layout/right_top_grabber.jpg);
background-repeat:no-repeat;
background-position:right bottom;
text-align:left;
}
#menucontainer {
width: 359px;
height: 239px;
background-image:url(../layout/menu_bg.jpg);
background-repeat:repeat-y;
text-align:right;
float:left;
}
#flashcontainer {
width: 491px;
height: 239px;
background-image:url(../layout/flash_bg.jpg);
background-repeat:repeat-y;
text-align:right;
}
#divider {
clear: both;
background-color:#FF0000;
height: 13px;
}
#contentcontainer {
width: 850px;
position:relative;
min-height: 100%;
height: auto;
}
#leftsidebar {
width: 359px;
background-image:url(../layout/leftsidebar_bg.jpg);
background-repeat:repeat-y;
text-align:right;
float:left;
clear:left;
}
#content {
width: 491px;
background-image:url(../layout/content_bg.jpg);
background-repeat:repeat-y;
text-align:left;
float:right;
clear:right;
}
#clearer {
clear:both;
}
#footer {
width: 850px;
height: 46px;
background-image:url(../layout/footer_bg.jpg);
background-repeat:no-repeat;
text-align:right;
float:left;
clear:both;
}
Leftsidebar og Content vil ikke tage samme højde lige meget hvor meget jeg prøver med hidden divs og "height=100%" og hvad der eller findes af gode tricks.
Jeg vil gerne prøve at forstå hvordan man omgås denne problematik, for det er ved at udvikle sig til noget virkelig irreterende!
