Zwei DIVs in Tabellenform nebeneinander

[stanleyB]

Hiho CSS-ler,

wahrscheinlich ein eher minderwertiges Problem, aber ich komm einfach nicht drauf. Wie unten gezeigt, moechte ich *nur* zwei DIVs nebeneinander haben - aber nicht, dass DIV1 von DIV2 umflossen (float:left) wird, denn so hab ich es bereits.

Vielen Dank,
Johannes Distler

 

[Quaese]

Hi,

Du kannst die DIVs absolut positionieren. D.h. es können Koordinaten (top, left, bottom
und right) angegeben werden, wo genau das Element positioniert werden soll.

Ich persönlich würde zunächst einen relativen DIV-Container erstellen. Innerhalb
dieses können die Spalten-DIVs absolut positioniert werden.

<div style="position:relative;">
    <div class="leftCell">linker Container</div>
    <div class="rightCell">rechter Container</div>
</div>

Die zugehörigen Styles:

.leftCell{ position: absolute;
           top: 0px;           
           left: 0px;
           width: 150px;
           height: 150px;
           border: 1px solid black;}
.rightCell{ position: absolute;
            top: 0px;
            left: 151px;  /* Einrücken um linke Spaltenbreite */
            width: 150px;
            height: 300px;
            border: 1px solid black;}

Hoffentlich kannst Du damit etwas anfangen.

Ciao
Quaese

 

[stanleyB]

Vielen Dank,
war mal wieder einfacher als ich dachte.

 

[Vaio82]

@Quaese:

Bestens!

Er hat mir den Anfang des rechten Containers eben immer um einen Pixel verschoben...

Nun klappt es

 

[Vaio82]

Ach ja, entschuldigt bitte den Doppelpost!

Wenn ich nun unter den rechten Container (ich habe rechts 2 absolute Container) noch einen relativen (der von der Länge des mittlernen, rechten Containers abhängig ist) machen möchte, wie würde das in deinem Beispiel aussehen?

 

[Quaese]

Hi,

ich hoffe, dass ich Dich richtig verstanden habe. Du hast zwei rechte Container
und einen linken - sind also drei. Der mittlere (=längste) soll die Position eines
unterhalb anschliessenden DIVs vorgeben.

In diesem Fall würde ich nicht mit absoluten Angaben arbeiten. Stattdessen würde
ich die CSS-Eigenschaft float verwenden. Hiermit würde ich die drei Spaltencontainer
links anordnen, wobei ich mit margin-left: -1px; die Abstände dazwischen
entfernen würde.

.leftCell{ float: left;
           width: 150px;
           height: 150px;
           border: 1px solid black;
           background-color: red;}
.middleCell{float: left;
            margin-left: -1px;
            width: 150px;
            height: 300px;
            border: 1px solid black;
            background-color: yellow;}
.rightCell{ float: left;
            margin-left: -1px;
            width: 150px;
            height: 250px;
            border: 1px solid black; background-color: green;}
.relativeCell{clear: both;
              margin-top: 0px;
              width: 450px;
              height: 50px;
              border: 1px solid black;
              background-color: blue;}

Im relativen Container würde ich den Textumfluss wieder entfernen (clear) und ihn
direkt darunter plazieren (margin-top: 0px

Der HTML-Code sähe wie folgt aus:

<div style="width: 460px;">
    <div class="leftCell">linker Container</div>
    <div class="middleCell">mittlerer Container</div>
    <div class="rightCell">rechter Container</div>
    <div class="relativeCell">unterer Container</div>
</div>

Vielleicht bingt Dich das weiter.

Ciao
Quaese