2 DIVs in 1 DIV

[Hugo]

Hi!

Ist folgendes möglich?

Ein DIV, da 2 DIVs nebeneinander rein. Das Umrandungs-DIV soll immer so groß sein, wie das höhere Innen-DIV.

Ich habe schon vieles ausprobiert, z.B. mit float und position:absolute. Leider ist es mir nicht gelungen, meist schiebt sich ein Innen-DIV einfach über den unteren Rand des Außen-DIVs.

Danke

Hugo

[schwarze Piste]

Tachchen!

Ich habe schon vieles ausprobiert, z.B. mit float und position:absolute. Leider ist es mir nicht gelungen, meist schiebt sich ein Innen-DIV einfach über den unteren Rand des Außen-DIVs.

Float sollte klappen.
Du musst lediglich anschließend das float wieder aufheben per clear,
dann streckt der innere Container auch den umgebenden äußeren.

Gruß

Die schwarze Piste

[Hugo]

Danke! Hat mit float dann doch noch geklappt.

<style type="text/css">
<!--
.div {border:1px solid blue;
width:753px;
margin-left:auto;
margin-right:auto;
}

.left {border:1px solid red;
width:600px;
float:left;
}

.right {border:1px solid green;
width:150px;
float:right;
}
-->
</style>
...
<div class="div">
<div class="left">&nbsp;</div>
<div class="right">&nbsp;</div>
</div>

Hab zwar noch keinen Plan, wo ich da clear:... anbringen soll, es funzt aber ;o) Ich wunderemich übrigens, dass ich einmal float:left und einmal float:right einfügen musste. Das hat IMO mal nur mit einem von beiden funktioniert.

Naja, egal.

Hugo

[Ingo Turski]

Hi,

Hab zwar noch keinen Plan, wo ich da clear:... anbringen soll,

als letztes Element im äußren DIV.

es funzt aber ;o)

vermutlich nicht - außer im IE.

Ich wunderemich übrigens, dass ich einmal float:left und einmal float:right einfügen musste. Das hat IMO mal nur mit einem von beiden funktioniert.

Es funktioiert mit float für das erste Element im Quelltext.

Du solltest auch korrekt rechnen:
600px + 2px + 150px +2px = 754px - und die sollen in 753px passen? Nur wenn der Browser das falsche Box-Modell anwendet.

freundliche Grüße
Ingo

[Hugo]

Danke erstmal. Jetzt hab ich's so gemacht:

<style type="text/css">
<!--
.div {border:1px solid blue;
width:760px;
margin-left:auto;
margin-right:auto;
clear:both;
}

.left {border:1px solid red;
width:600px;

}

.right {border:1px solid green;
width:150px;
float:right;
}
-->
</style>
...
<div class="div">
<div class="right">&nbsp;</div>
<div class="left">&nbsp;</div>
</div>

Allerdings vergrößert sich der äußere DIV nun nicht, wenn der rechte zu groß wird - genau das, was ich eingangs schon hatte :o(

Hugo

[Ingo Turski]

Hi,

Allerdings vergrößert sich der äußere DIV nun nicht, wenn der rechte zu groß wird

kann er ja auch nicht. Wenn Du eine Weite vorgibst, halten sich standardkonforme Browser auch daran.
Übrigens solltest Du .left keine Weite mehr zuweisen, um die Boxmodelle auszugleichen, dafür margin-right in der Breite von .right.

freundliche Grüße
Ingo