✔ Warum liegen die Blöcke nicht nebeneinander?

[Spelmann]

Hallo zusammen.
Ich beschäftige mich noch nicht lange mit dem CSS Layout und bin einigermaßen frustriert.

Kann mir jemand sagen, warum diese 3 Blöcke nicht nebeneinander angezeigt werden?

<div id="container">
    <div id="block-links" />
    <div id="block-mitte" />
    <div id="block-rechts" />
</div>

#container{
height:100%;
width:600px;
float:left;
}
#block-links{
position:relative;
float:left;
height:100%;
width:200px;
background-color:red;
}
#block-mitte{
position:relative;
float:left;
height:100%;
width:200px;
background-color:blue;
}
#block-rechts{
position:relative;
float:left;
height:100%;
width:200px;
background-color:yellow;
}

Vielen Dank.

 

[Maik]

Hi,

setz den Dreispalter mal folgendermaßen um:

#block-mitte{
position:relative;
height:100%;
margin: 0 200px;
background-color:blue;
}

und notiere das DIV #block-mitte zum Schluß:

<div id="container">
    <div id="block-links">...</div>
    <div id="block-rechts">...</div>
    <div id="block-mitte">...</div>
</div>

Zudem gehört das div-Element nicht zur Familie der "leeren Element" und wird daher nicht im öffnenden Tag mit einem Slash geschlossen.

 

[Spelmann]

Danke Maik.

Die blaue Box liegt nun tatsächlich neben der ersten roten.
(Allerdings erstmal nur im Firefox. Im IE liegt die Gelbe neben der Roten.)
Ich sehe von alleine noch keinen Weg auch die gelbe an die Seite zu bekommen.

 

[Maik]

Okay, ich hab den CSS-Code noch ein wenig modifiziert, damit der IE nicht mehr "aufmuckt"

#block-links{
position:relative;
float:left;
height:100%;
width:200px;
background-color:red;
margin-right:0 !important; /* moderne Browser */
margin-right:-3px; /* IE */
}
#block-mitte{
position:relative;
height:100%;
margin:0 200px !important; /* moderne Browser */
margin:0 197px; /* IE */
background-color:blue;
}
#block-rechts{
position:relative;
float:right;
height:100%;
width:200px;
background-color:yellow;
margin-left:0 !important; /* moderne Browser */
margin-left:-3px; /* IE */
}

 

[Spelmann]

Wow.
Vielen Dank für die Mühe. Werds morgen gleich ausprobieren.