zwei divs 50%

bigman007 · #1 (**permalink**) 07.06.2006, 10:50

hi hab da ein kleines problem
will zwei divs nebeneinander jeweils mit 50% breite kriegs aber nicht hin.
wenns im ie passt past es im firefox nicht und umgekehrt.
was mach ich dann falsch??

Code:

<style type="text/css">
#container { 
position:absolute; 
left:0px; 
top:0px; 
width:100%; 
height:100%; 
overflow:hidden;
}
#boxleft { 
position:absolute; 
margin-left:10px; 
margin-top:0px; 
width:400px;  
height:100%; 
border:1px solid #000000;
}
#boxright { 
positoin:absolute; 
margin-top:0px;  
margin-left:410px;
width:400px;
height:100%; 
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<div id="container">
	<div id="boxleft">
	d
	</div>
	<div id="boxright">
	ddd
	</div>
</div>

jetzt hab ichs mit pixeln gemacht aber mit % en gehts auch nicht.

Boris · #2 (**permalink**) 07.06.2006, 11:00

Zitat:

will zwei divs nebeneinander jeweils mit 50% breite kriegs aber nicht hin.

Und wieso benutzt du dann 400px, wenn du 50% willst?

1. Nimm die absolute Position raus

2. Darfst du nicht vergessen, dass border zu width dazugerechnet wird. Ds gilt auch für padding und margin. Du musst das beachten

3. Versuch es pro Box so:

.boxhalb {
float: left;
width: 48%;
border:1% solid #000000;
}

Das ergibt pro Box 50%. Nutzen kannst du es so:

<div class="boxhalb">Erste Box</div>
<div class="boxhalb">Zweite Box</div>

Achte darauf, einen korrekten, aktuellen Doctype zu nutzen, sonst stellt der IE6 das falsch dar.

Chattanooga · #3 (**permalink**) 07.06.2006, 11:26

Es ist ziemlich verführerisch mit absoluter Positionierung zu arbeiten, da scheinbar alles gleich so aussieht, wie man es gern hätte. Diese Technik hat jedoch ihre Tücken, die für Beginner nicht ohne weiteres zu überschauen sind. Deshalb hörst immer wieder den Rat "Finger weg von aP - setz Dich mit der float-Technik auseinander", dem ich mich anschließe.

In #boxright ist ein Tippfehler "positoin:absolute;". Ist er auch im Original vorhanden?

Wenn Du #container als Bezugspunkt für #boxright und #boxleft verwendest, sollte #container auf position:relative gesetzt werden.

Ersetz das margin-top bzw. margin-left mit top: ... bzw. left: ...

Literaturhinweis: http://www.css4you.de/position.html

bigman007 · #4 (**permalink**) 07.06.2006, 12:27

danke für die schnelle antworten leute
werds am nachmittag probieren

nur das mit der position check ich immer noch nicht.

Boris · #5 (**permalink**) 07.06.2006, 13:03

Zitat:

nur das mit der position check ich immer noch nicht

Ok, ganz einfach ausgedrückt:

Benutze kein position: absolute mehr, sondern informier dich über float: left und float: right

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs	Kipperdesign	Javascript & Ajax	8	11.02.2013 13:03
DIVs wollen nicht in Container	Echnotron	CSS	4	22.02.2012 08:46
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren	Alien	CSS	17	20.03.2011 10:23
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32