Elemente mit position:relative nebeneineander anordnen

Status
Nicht offen für weitere Antworten.
S

SuperSonik

Erfahrenes Mitglied
Hi Leute,
ich würde gerne <div>-Elemente nebeneinander anordnen die ich alle mit position:relative
positioniert habe.
Die Idee ist folgende:
Ich hätte gerne ein 3-Spaltiges Seitenlayout mit Kopfzeile, bei dem der gesammte Inhalt in einer Box steht die einen 10px großen Abstand rundheru hat.
Diese Box soll sich der Größe des Inhalts anpassen.
Zu diesem Zweck habe ich mir folgende CSS-Regeln geschrieben:

HTML: 
body {
		margin: 0;
		background-color: #009966;
		padding:20px;
	}
	
#rahmen{
	position:relative;
	width:100%;
	height:100%;
	background-color:#ffff99;
	padding-top:10px;
	padding-bottom:10px;
	
}

#kopf{
	position:relative;
	background-color:#ccffcc;
	margin-left:10px;
	margin-right:10px;
	height:120px;
	padding:10px;
}

#balkenlinks{
	position:relative;
	background-color:#66cc66;
	width:200px;
	margin-left:10px;
}
#balkenrechts{
	position:relative;
	background-color:#ccffcc;
	right:0px;
	width:200px;
}

Und dazu passend folgenden HTML-Code:

HTML: 
<body>
<div id="rahmen">

<div id="kopf">
ydfxdf <br>

</div>
<div id="balkenlinks">
 ydfxdf1 
 ydfxdf1 
 ydfxdf1 
</div>

<div id="balkenrechts">
 ydfxdf1 
 ydfxdf1 
 ydfxdf1 
</div>



</div>
</body>

Das sieht dann so aus:
Seite

Mein Problem ist nun das "balkenlinks" und "balkenrechts" nicht nebeneinander
dargestellt werden. Das liegt wohl daran das <div> ein Blockelement ist.
Aber wenn ich <span> benutze ist z.B. die Hintergrundfabe futsch!?
Ich kann die beiden Elemente auch nicht einfach mit position:absolute positionieren,
da sich dann die Box nicht automatisch an die Größe der Balken mitanpasst.

Hat jemand ne Idee?

SuperSonik
 
Hallo!

Ich hoffe das ich dich da richtig verstehe das Du es so haben möchtest.
Code: 
body {
  margin: 0;
  background-color: #009966;
  padding:20px;
 }
 
#rahmen {
  background-color: #ffff99; 
  padding: 10px; 
  position: relative; 
  width: 100%; height: 100% 
  }
#kopf  { 
  background-color: #ccffcc; 
  padding: 10px; 
  position: relative; 
  height: 120px 
  }
#balkenlinks   { 
  background-color: #66cc66; 
  position: relative; 
  width: 200px; 
  float: left 
  }
#balkenrechts{
  position:relative;
  background-color:#ccffcc;
  right:0px;
  width:200px;
  float: left
  }
Axel
 
Fast!

Es gibt nur 1 Problem:
-der Rahmen ist jetzt kleiner als der Inhalt


Edit: Das tut´s nur im firefox nicht im IE schon!
Weiß jemand ne Lösung das es auch im firefox klappt

Gruß,

SuperSonik
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück