1
Hi,
ich schlage mich mit einem Problem rum, das die Größe der container-Divs mit enthaltenen float-divs betrifft. Das Problem ist, ich habe ein CMS programmiert, in dem ich hochgeladene Bilder in Seiten einfügen kann. Diese werden mit der Beschreibung in ein div gepackt und dann entweder mit float left oder right ausgerichtet, dass der Text sie umfließt. So weit so gut, aber die Fenstergröße passt sich den Bildern nicht an. Mir ist klar, dass dies seine Richtigkeit hat, aber wie kann ich das trotzdem so hinbekommen, dass das einschließende Div mit dem Text immer so hoch wird wie die enthaltenen Bilder es verlangen? Dass sie also nicht unten "raushängen", auch wenn man das Fenster staucht. Eine fixe Höhe einstellen ist nicht sehr schön, da es immer noch Bilder geben kann, die zu weit unten im Text platziert sind.
Schönen Gruß,
Rudy
ich schlage mich mit einem Problem rum, das die Größe der container-Divs mit enthaltenen float-divs betrifft. Das Problem ist, ich habe ein CMS programmiert, in dem ich hochgeladene Bilder in Seiten einfügen kann. Diese werden mit der Beschreibung in ein div gepackt und dann entweder mit float left oder right ausgerichtet, dass der Text sie umfließt. So weit so gut, aber die Fenstergröße passt sich den Bildern nicht an. Mir ist klar, dass dies seine Richtigkeit hat, aber wie kann ich das trotzdem so hinbekommen, dass das einschließende Div mit dem Text immer so hoch wird wie die enthaltenen Bilder es verlangen? Dass sie also nicht unten "raushängen", auch wenn man das Fenster staucht. Eine fixe Höhe einstellen ist nicht sehr schön, da es immer noch Bilder geben kann, die zu weit unten im Text platziert sind.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<style>
html, body {
height:100%;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
}
div#container {
height: 100%;
width: 90%;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding-top:100px;
background-color:#FFFFE0;
text-align:center;
border-left: 1px solid orange;
border-right: 1px solid orange;
}
div#mainwindow {
width:90%;
margin-left:auto;
margin-right:auto;
padding:15px;
min-width:570px;
border:1px solid #91B874;
background-color:#FFFFFF;
color:#333333;
text-align:justify;
font-size:12px;
}
div.picleft, div.picright {
float: left;
height:200px;
width:250px;
background-color:#FFFACD;
border:1px solid gray;
margin-right: 10px;
}
div.picright {
float:right;
margin:0;
margin-left: 10px;
}
div#navigation {
height:30px;
border: 1px solid red;
margin-bottom: 10px;
margin-left:-30px;
margin-right:-30px;
background-color:orange;
}
</style>
<body>
<div id="container">
<div id="mainwindow">
<div id="navigation"> </div>
<div class="picleft"> </div>
<div class="picright"> </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a odio vel dui consectetuer porttitor. In libero elit, fermentum ac, tincidunt ac, scelerisque non, wisi. Nullam turpis. Praesent non libero. Donec non lorem sed tellus lacinia gravida. Sed tristique pulvinar lorem. Mauris et libero. Fusce ut enim in ante iaculis ultrices. Sed vitae quam. Nulla sollicitudin viverra diam. Praesent at eros at velit faucibus rhoncus. Suspendisse ornare dignissim lectus. Nulla facilisi. Sed sed arcu non lorem gravida rutrum. Cras euismod libero quis diam. Cras ante. Sed convallis feugiat risus. Quisque vulputate aliquet odio. Aenean condimentum, lacus ac facilisis malesuada, lacus nibh vehicula justo, sit amet pharetra lacus purus a urna.
</div>
</div>
</body>
</html>Schönen Gruß,
Rudy