floatende Box bis zum Rand?
0 
Felix Riesterer
0
floatende Box bis zum Rand?
Hallo,
ich komme gerade mit dem IE nicht weiter. Ich versuche gerade, ein Design mit folgender Struktur aufzubauen:
www.sanjarok.de/css.jpg
Dabei ist der orangene Bereich eine umgebende Box, der rote Bereich ist die linke Box und die gelbe Box steht mit float:left; links von der roten (und beinhaltet wiederum zwei blaue Boxen).
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.
Im Internet Explorer kann ich es mir allerdings aussuchen:
- Wenn für die gelbe Box kein float:left; angegeben ist, steht sie neben der roten, allerdings mit ein paar Pixeln Abstand (was nicht sein darf).
- Wenn ich für die gelbe Box float:left angegeben habe, schliesst sie zwar direkt an der roten an, allerdings hat die gelbe Box dann nur noch die Breite des Inhalts.
Ich habe auch schon einiges anderes ausprobiert, komme aber nicht weiter. Was kann ich tun?
Mira
-
Liebe Mira,
Dabei ist der orangene Bereich eine umgebende Box, der rote Bereich ist die linke Box und die gelbe Box steht mit float:left; links von der roten
"links von der roten"... Bist Du Dir da sicher?
Nun will ich, dass der gelbe Bereich, ohne dass sich Scrollbalken bilden, bis ganz zum Rand geht.
Was passiert bei width:auto? Muss die gelbe Box gefloatet werden? Reicht da eventuell auch ein margin-left in der Breite der roten Box? Ist die rote Box in ihrer Breite fest, oder variabel?
Im Internet Explorer kann ich es mir allerdings aussuchen:
Stimmt: Im IE hast Du die Wahl zwischen Pest oder Cholera.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
"links von der roten"... Bist Du Dir da sicher?
nein. Ich meine natürlich rechts..
Was passiert bei width:auto? Muss die gelbe Box gefloatet werden?
bei width:auto hat die gelbe Box die Breite des Inhalts, leider.
Ja, die Box muss meiner Meinung nach gefloatet werden, da in dem Bereich unterhalb der Box noch etwas stehen soll. Ansonsten hätte ich die gelbe Box einfach weggelassen und die blauen Boxen gefloatet. Für weitere Ideen bin ich aber gerne offen...Reicht da eventuell auch ein margin-left in der Breite der roten Box? Ist die rote Box in ihrer Breite fest, oder variabel?
die Breite ist fest. Das mit margin-left habe ich eben ausprobiert, (so?:
position:relative;
top:0px;
left:0px;
margin-left:150px; (Breite der roten Box)),aber komischerweise interpretiert der IE das auch wieder anders als die anderen Browser.
Stimmt: Im IE hast Du die Wahl zwischen Pest oder Cholera.
*gg* ohne den hohen Marktanteil des IE hätte ich ihn längst ignoriert. :D
Vielen Dank und viele Grüße,
Mira-
Liebe Mira,
Ja, die Box muss meiner Meinung nach gefloatet werden, da in dem Bereich unterhalb der Box noch etwas stehen soll.
das sehe ich anders, aber ich mag mich täuschen.
Elemente mit display:block erzeugen ja eine neue Zeile. Daher denke ich dass Du auf das float verzichten kannst. Besonders da der rote Bereich eine feste Breite hat!
position:relative;
Das braucht es nicht! Wenn die rote Box gefloatet ist (oder per position:absolute an ihre Stelle platziert wird, dann reicht ein display:block mit margin-left völlig aus.
top:0px;
left:0px;Diese Angaben entfallen dann ebenfalls.
margin-left:150px; (Breite der roten Box))
Vielleicht braucht es ein paar Pixel Abstand dazwischen...?
aber komischerweise interpretiert der IE das auch wieder anders als die anderen Browser.
Ach was!? Aber könnte man sich das online einmal ansehen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
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