# Zwei DIVs in Tabellenform nebeneinander



## stanleyB (11. Mai 2004)

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 (11. Mai 2004)

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 (11. Mai 2004)

Vielen Dank,
war mal wieder einfacher als ich dachte.


----------



## Vaio82 (12. Mai 2004)

@Quaese:

Bestens! 

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

Nun klappt es


----------



## Vaio82 (12. Mai 2004)

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 (12. Mai 2004)

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


----------

