nicht angemeldet
Hallo,
Nun will ich, dass der gelbe Bereich, ohne dass sich Scrollbalken bilden, bis ganz zum Rand geht. Das funktioniert in allen Browsern, wenn die orangene und die gelbe Box keine Breitenangaben haben, und die gelbe Box mit float:left; neben der roten (sie hat auch float:left) steht.
--------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#gelb {
margin:0px 0px 0px 150px;
background-color:#ffd700;
}
#dummeBoxfuerIE {
height:150px;
}
#blau1, #blau2 {
float:left;
width:140px;
height:140px;
background-color:#4169e1;
margin:5px;
}
#rot {
width:150px;
height:450px;
float:left;
background-color:#dc143c;
}
#camouflage {
float:right;
}
</style>
</head>
<body>
<div id="rot">rot</div>
<div id="camouflage"></div>
<div id="gelb">
<div id="dummeBoxfuerIE">
<div id="blau1">blau 1</div>
<div id="blau2">blau 2</div>
</div>
<!--
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
noch mehr Inhalt
-->
</div>
</body>
</html>
-----------------------------
Die "dummeBoxfuerIE" ist für den IE (logisch ;-) ) nötig, denn solltest du bei "gelb" eine Höhe angeben, macht er wieder einen Abstand zum "rot". Für FF reicht bei "gelb" ein min-height.
Ohne min-height bzw. height für "gelb", stellen keine der beiden die gelbe Box richtig dar, also dann eben mit der "dummeBoxfuerIE"
Grüße
Thomas