div-Rahmen um 3 div-Elemente bei Firefox nicht möglich?

[stella stellaris]

Was ich möchte:
Eine Seite mit Banner/Titel-Grafik (800x150px).
Darunter links eine Navigation und rechts den Inhalt.
Um diese 3 Elemente herum hätte ich gerne eine dünne schwarze Linie, also einen Rahmen.
Im IE klappt das auch prima mit der div-Verschachtelung.
Im Firefox wird der Rahmen aber nur um den Banner herum angezeigt.
Wie bekomme ich den Rahmen auch dort korrekt angezeigt
Bin dankbar für jede Hilfe!

<div id="rahmen">

	<div id="title">
	Titel
	</div>

	<div id="left">
	Navigation 
	</div>
	 
	 <div id="content">	
	Inhalt
	 </div>
	 
</div>

CSS:

#rahmen{
width:800px;
margin:0px auto;
border:1px solid;
background-color:#CCCCCC;
}

#title {
height:150px;
padding:0px;
margin-bottom:20px;
background-color:#CCCCCC;
}

#left {
width:25%px;
background-color:#666666;
float:left;
}

#content {
width:75%;
float:right;
margin-left:3%;
background-color:#CCCCCC;

 

[Maik]

Hallo,

für die drei verschachtelten DIVs fehlen die border -Angaben.

#rahmen{
width:800px;
margin:0px auto;
border:1px solid #000000;
background-color:#CCCCCC;
}

#title {
height:150px;
padding:0px;
margin-bottom:20px;
background-color:#CCCCCC;
border:1px solid #000000;
}

#left {
width:25%px;
background-color:#666666;
float:left;
border:1px solid #000000;
}

#content {
width:75%;
float:right;
margin-left:3%;
background-color:#CCCCCC;
border:1px solid #000000;
}

greez, maik.l

 

[stella stellaris]

Hmm...ich möchte keinen Rahmen um jedes einzelne div, sondern nur einen Rahmen. Dafür habe ich das Rahmen-div, worin die anderen 3 divs geschachtelt sind.
Das Problem ist, das der Firefox diese Schachtelung:
<div id=rahmen> andere divs enthalten </div>
anscheinend nicht versteht.
HELP!

 

[Martys]

#rahmen{
width:800px;
margin:0px auto;
border:1px solid #000000 ;
background-color:#CCCCCC;
}

Die Farbangabe fehlte.

 

[Maik]

Hallo stella,

du hast in deinem DIV #rahmen die Farbangabe für den Rahmen vergessen.

greez, maik.l

 

[stella stellaris]

Erstmal danke für die Hilfe, aaaaaaber:

Mein Problem ist erst in zweiter Linie der Border.
Das Hauptproblem, warum es nicht richtig angezeigt wird, ist die Verschachtelung der divs für den Firefox. Am besten ihr seht euch das Disaster mal selber an:
Zuerst mit dem IE, dann seht ihr, wie es werden soll
......und dann mit dem Firefox
(achja....und bitte JavaScript aktivieren, hab noch keine alternative Navigation )
http://www.e-stella.de/hp/recht.html

 

[Maik]

Hallo stella,

das Problem besteht anscheinend in allen Gecko-Browsers. Mozilla (1.6) und NN (7.0) zeigen ebenfalls die beiden floatenden DIVs unterhalb / ausserhalb des Parent-DIV #rahmen an, was an seiner eigenen CSS-Eigenschaft margin: 0px auto; liegt.

Wenn ich DIV #rahmen positioniere, werden die beiden DIVs auch innerhalb ihres Elternelement angezeigt:

CSS-Code für zentriertes DIV-Element:

#rahmen{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px; /* negative Hälfte von width:800px = zentrierte Position */
border: 1px solid #000000;
}

Browsercheck: IE 5.5, Mozilla 1.6, NN 7.0, Opera 7.23


greez, maik.l

 

[stella stellaris]

DAAAAAAAAAAAAAAAAAAANKE Michael *superfreu*

damit funktioniert es!

Tausend Dank, Stella

 

[Maik]

Danke, gern geschehen.

Habe ein bischen experimentiert, denn das (Problem) wollte ich auch generell für Mozilla (1.6) & NN (7.0) gelöst wissen ...

greez, maik.l

 

[hela]

Hallo,

vielleicht wäre es auch damit gegangen:

 <div id="rahmen">
   
   <div id="title">Titel</div>
   <div id="left">Navigation </div>
   <div id="content">Inhalt</div>
   
   <br style="clear:both;">
   
   </div>

(mike war leider schneller )