nicht angemeldet
Div nebeneinander positionieren
Hi,
ist es generell möglich, zwei div-container per relativer positionierung nebeneinander darzustellen?
Mit absoluter Positionierung ist mir klar wie es geht, aber aus layouttechnischen Gründen geht das nur mit relativer Positionierung.
Ich würde gerne auf eine Tabelle verzichten, bisher seh ich das aber als einzige Möglichkeit :-(
thx4hlp
MfG
Manuel
-
Tachchen!
position:relative erlaubt auch negative Werte, das sollte dir helfen!?
Gruß
Die schwarze Piste
-
Hi,
warum nimmst Du nicht einfach float?
freundliche Grüße
Ingo-
Hi,
warum nimmst Du nicht einfach float?
Danke, genau das wars, was ich gesucht hab :-)
-
Mit float ist das leider nicht so leicht zu realisieren da Mozilla float anders interpretiert
Beispiel:
<div style="background-color:pink;width:30px;height:30px;float:left;"></div>
<div style="background-color:blue;width:30px;height:30px;"></div>IE und Opera positionieren die beiden DIV's nebeneinander, Mozilla legt die DIV's genau übereinander
MFG
Stefan-
Moin!
IE und Opera positionieren die beiden DIV's nebeneinander, Mozilla legt die DIV's genau übereinander
Welcher mozilla tut das?
tschüss ichen--
Selfcode: sh:( fo:| br: n4:& ie:% mo:| mo:| de:] zu:) fl:| ss:| ls:[ js:|-
Welcher mozilla tut das?
tschüss ichenProbier das Beispiel das ich gepostet hab.
Hab hier nur den aktuellen 1.7.1 und der macht das so, der aktuelle FireFox 0.9.2 auch
Wahrscheinlich gibts aber ein paar simple Workarounds dafür
-
-
-
-
Hi,
es gibt allerdings ein paar unterschiede in der Interpretation von float und clear, wie der kleine Test zeigt, bei dem 4 Divs quadratisch (rot oben, blau unten) angeordnet werden sollen.
Mozilla begnuegt sich mit einem clear left fuer das dritte div um einen Umbruch zu bekommen, das vierte Div floatet dann neben das Dritte.
Im IE floatet das Vierte neben das zweite Div. Er benoetigt die p-Angaben im Test, um die gleiche Darstellung zu erzeugen. Diese reicht Mozilla aber nicht.
Der Test kombiniert beide Varianten und sollte im Mozilla, IE (6) und Opera 7 korrekt dargestellt werden (Sorry, die Zaehlweise beginnt bei 0):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head><style type="text/css">
p {
margin: 0px;
clear: left;
}#ebene0 {
width:200px;
height:200px;
background-color: red;
clear: left;
float: left;
margin: 1px;}
#ebene1 {
width:200px;
height:200px;
background-color: red;
float: left;
margin: 1px;}
#ebene2 {
width:200px;
height:200px;
background-color: blue;
clear: left;
float: left;
margin: 1px;}
#ebene3 {
width:200px;
height:200px;
background-color: blue;
float: left;
margin: 1px;}
</style></head>
<body marginheight="0" marginwidth="0">
<p>
<div id="ebene0">0</div>
<div id="ebene1">1</div>
</p>
<p>
<div id="ebene2">2</div>
<div id="ebene3">3</div>
</p>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.