Hallo Zusammen,
hat jemand eine Idee, wie man die rechte Spalte automatisch auf die Höhe des äußeren Containers (#wrapper) bekommt (ohne height:100%!!) ?
Hoffe jemand hat da einige Ideen parat. Danke.
hat jemand eine Idee, wie man die rechte Spalte automatisch auf die Höhe des äußeren Containers (#wrapper) bekommt (ohne height:100%!!) ?
Hoffe jemand hat da einige Ideen parat. Danke.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<link rel="stylesheet" type="text/css" href="styles2.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-navi">main navi</div>
<div id="right-column">
<div class="teaser-box" style="background-color:#c0c0c0;">
<h3 class="teaser-box-headline" style="background-color:#888888;">headline</h3>
<div class="teaser-box-content">
<p style="color:#888888;">Now you have seen how TemplaVoila provides a point'n'click interface to templating the overall structure of a TYPO3 based website. And why not take this concept to other levels!</p>
<div class="teaser-box-morelink"><a href="#">more...</a></div>
</div>
</div>
</div>
<div id="left-column">
<div id="banner"><img src="images/banner.jpg"></div>
<div id="breadcrumb">breadcrumb</div>
<div id="sub-navi">sub navi</div>
<div id="main-content">main contentmain contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content
ntent main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content
ntent main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content main contentmain contentmain content main contentmain contentmain contentmain content
main contentmain contentmain content
</div>
</div>
<div class="clearer"></div>
<div id="footer">footer</div>
</div>
</body>
</html>
Code:
/* CSS Document */
* {
padding:0;
margin:0;
}
html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
text-align: center;
}
#wrapper {
margin:0 auto;
background-color: #f9f9f9;
width:961px;
clear:right;
}
.inner {
clear:right;
}
#header {
background-image: url(images/header-bg.gif);
background-repeat: no-repeat;
height:101px;
}
#footer {
height:30px;
background-image: url(images/footer-bg.gif);
background-repeat: no-repeat;
}
#main-navi {
height: 25px;
background-color: #E5E6E0;
}
#left-column {
background-color: red;
}
#banner {
background-color: #000;
width:685px;
}
#right-column {
float:right;
width:250px;
background-color: yellow;
}
#main-content{
margin-left:136px;
}
#sub-navi {
float:left;
width: 136px;
}
#breadcrumb {
background-color: green;
}
.clearer {
clear:both;
}