✔ Problem bei Box-Positioniereung

[cosmanova]

Hallo

Ich habe 3 Boxen. 2 nebeneinander und eine darunter. Im Ganzen bilden diese wieder eine Box. Das heißt: Die linke Box und die darunter liegende Box sollen die gleichen Maße haben und dir rechte Box soll über die Höhe der beiden linken Boxen gehen.

Problem ist, dass die untere linke Box sich nicht direkt unter die obere setzt, solange die Rechte Box Höher ist als die Linke.

Bekomme ich das hier nur mit absoluter Positionierung hin ? Oder gibt es da einen anderen Trick ?

Vielen Dank schon mal

---------------------------------------------------------

<!--
.divbox1 {
border: 1px solid #000000;
width: 800px;
padding: 50px;}

.divbox2 {
border: 1px solid #000000;
border-color: red; #
width: 200px;
float: left;}

.divboxtext {
border: 1px solid #000000;
border-color: red; #
width: 200px;
height: 100px;}

.divbox3 {
clear:left;
border: 1px solid #000000;
border-color: red; #
width: 200px;}

-->
</style>
</head>

<div class="divbox1">
...<div class="divbox2">
......<ul>
..........<li>jiji</li>
..........<li>koko</li>
......</ul>
...</div>
...<div class="divboxtext">aaaaaaaaaaaaaaaaaaaaaaa</div>
...<div class="divbox3">huhuhuhuhuu</div>
</div>

</body>
</html>

 

[Maik]

Hi,

mein Vorschlag, damit die Box .divbox3 "nahtlos" unterhalb der Box .divbox2 angeordnet wird:

.divbox1 {
border: 1px solid #000000;
width: 800px;
padding: 50px;
}

.leftCol {
width: 200px;
float: left;
}

.divbox2 {
border: 1px solid red;
}

.divboxtext {
border: 1px solid red;
width: 200px;
height: 100px;
margin-left: 200px;
}

.divbox3 {
border: 1px solid red;
}

<div class="divbox1">
     <div class="leftCol">
          <div class="divbox2">
               <ul>
                   <li>jiji</li>
                   <li>koko</li>
               </ul>
          </div>
          <div class="divbox3">huhuhuhuhuu</div>
     </div>
     <div class="divboxtext">aaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

 

[hela]

... Oder gibt es da einen anderen Trick ?

Ja, den Trick gibt es und er hat sogar einen Namen: "FauxColumns" (Unechte Spalten) - wird hier beschrieben.

 

[cosmanova]

Danke Maik, so funktionierts natürlich. Also so langsam habe ich das Gefühl, dass man bei CSS genauso tricksen muss wie bei einem Tabellenlayout. Nun hat man hier auch eigentlich unnötige, doppeltgemoppelte Divs...

Den Tip mit den Fake-Spalten kann ich sicher auch noch mal gut verwenden

Vielen Dank.

 

[cosmanova]

Noch mal eine Frage - vielleicht habt Ihr ja eine bessere Lösung ?

In der ersten linken oberen Box soll ein Menü rein. In die Box darunter ein Hintergrundbild mit einem Farbverlauf. Da ich diesen Farbverlauf nur da unten möchte, dachte ich mir ich pack das Bild eben in eine seperate Box. Der Hintergrund vom Menü soll weiß bleiben. Gibts da noch eine geschicktere Lösung ?

 

[Maik]

Wenn du zwei Boxen auf der linken Seite untereinander anordnen willst, und diese rechts von einer dritten Box umflossen werden sollen, dann ist mein Vorschlag schon die geschickteste Lösung.

 

[cosmanova]

Ok, super - danke Habs jetzt so gelöst.