[CSS] Problem beim Positionieren von Boxen

Mr. Snoot · 18. Mai 2005

Hio,

ich will 5 Boxen positionieren (siehe Anhang), habe aber das Problem, dass, sobald Box #2 hinzugefügt wird, entweder die zwei Boxen rechts ( #3 und #4) nach unten auf Höhe von Box #2 rutschen, oder Box #2 rutscht nach unten auf Höhe von Box #3 oder #4 (je nachdem, wo Box #2 im HTML Teil angegeben wird).

Wie muss ich das im Stylesheet angeben (clear:both / right / left usw), damit das klappt?

Wie gesagt, solange Box #2 nicht drin ist passt alles. Ist Box #2 dabei, verrutscht entweder Box #3+#4 nach unten oder Box #2 selbst.

Zur Kontrolle: im IE ist die Anordnung so, wie ich sie gern hätte; "falsch" wird es im FF oder Opera dargestellt (ja ja, FF und Opera stellen es wohl richtig dar wie es sich gehört, aber eben nicht so wie ichs gerne hätte!

).

Enigma · 18. Mai 2005

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css.css">
<style>

div#left {
	float:left;
	border: 1px dashed red;
}

div#right {
	float:right;
	border: 1px dashed red;
}

div#middle {

	border: 1px dashed red;
}


#box1
{
	width:167px;
	height:250px;
	font-size:10px;
	text-align:left;
	background:#CCC;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:20px;
	padding:1px;
	border:1px solid black;
}

#box2
{
	width:167px;
	height:300px;
	font-size:10px;
	text-align:left;
	background:#CCC;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:20px;
	padding:1px;
	border:1px solid black;
}

#box3
{
	width:167px;
	height:300px;
	font-size:10px;
	text-align:left;
	line-height:15px;
	background:#CCC;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:20px;
	padding:1px;
	border:1px solid black;
}

#box4
{
	width:167px;
	height:167px;
	font-size:10px;
	text-align:left;
	line-height:15px;
	background:#CCC;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:20px;
	padding:1px;
	border:1px solid black;
}

#box5
{
	margin-top:20px;
	margin-left:20px;
	margin-right:20px;
	padding-right:10px;
	padding-left:10px;
	height:300px;
	width:auto;
	background:#CCC;
	border:1px solid #CCC;
	background:#FAFAFA;
	text-align:justify;
	font-size:12px;
	line-height:21px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>
<div id="left">
  <div id="box1">Box 1</div>

  <div id="box2">Box 2</div>
</div>

<div id="right">
  <div id="box3">Box 3</div>

  <div id="box4">Box 4</div>
</div>

<div id="middle">
  <div id="box5">Box5 </div>
</div>



</body>

</html>

Mr. Snoot · 18. Mai 2005

Aaah, wunderbar

Hatte das mit einer Box um die zwei Boxen links und rechts schonmal in einem anderen Zusammenhang getestet; da hats mir aber auch alles zerlegt, drum hab ich das gleich mal außen vor gelassen

Man dankt

Mr. Snoot · 18. Mai 2005

Aaah, Kommando zurück!

Das klappt so doch nicht, weil

1. die mittlere Box dann eine feste Breite benötigt, was aber nicht sein soll
2. im IE die Box #1 falsch dargestellt wird (der streckt die dann um paar Pixel und dann entstehen da halt unerwünschte Lücken; da die Box variable Inhalte hat kann ich im Stylesheet auch keine feste Größe zuweisen.

So falsch kann meine o.g. Lösung doch nicht sein, oder?

Wird ja auch überall so beschrieben. Setze eine Box mit float:left und Breite, dann eine Box rechts mit float:right und Breite, und die Mittlere Box nimmt dann den freien Platz in der Mitte ein, und wird nur durch margin-left / -right begrenzt.

Ich hab das jetzt mal so gemacht, dass ich die zwei Boxen links und rechts, so wie du schreibst, jeweils in eine Box packe, aber die mittlere dann frei lasse.

Scheint auch so weit zu gehen, nur dass hier auch die Box #1 gestreckt wird.

Gibbet irgend ne Möglichkeit, das zu beheben?

Enigma · 18. Mai 2005

Ich hab meinen Quellcode im 2. Post aktualisiert. So passt es bei mir.

Wie wird Box1 gestreckt? Ich seh da nichts?

Mr. Snoot · 18. Mai 2005

Hio,

sorry, konnte vorhin das Bsp. nicht posten - und dumm zum erklären

Kannst dir mal die Seite anschauen im Anhang. Das Menü (entspräche Box #1), das innerhalb einer weiteren Box steckt wird im IE falsch dargestellt (Innen-/Außenabstände falsch).

Ich dachte zumindest, dass es an der äußeren Box liegt. Es liegt aber daran, dass das Menü in der Box dann ohne Positionsangabe float angegeben war; wenn ich beim Menü float:left angebe, passt es. Dann muss ich allerdings alle anderen Boxen auf der linken Seite mit clear:left und float:left ebenfalls positionieren (die stecken aber dann trotzdem weiterhin zusammen in einer Box).

Und das funzt jetzt - zumindest bis jetzt

Suche

[CSS] Problem beim Positionieren von Boxen

Mr. Snoot

Gast

Anhänge

Enigma

Captain Pro

Mr. Snoot

Gast

Mr. Snoot

Gast

Enigma

Captain Pro

Mr. Snoot

Gast

Anhänge

Ähnliche Themen