Umschließendes div

[Andi]

Hallo,

ich möchte 2 divs nebeneinander ausrichten und damit sie auf der gleichen Höhe sind mit vertical-align:bottom ausrichten:

<div style='vertical-align:bottom;border:1px solid red;'>
  <div style='width:50%;float:left;'>
  test
  </div>
  <div style='width:50%;float:right;'>
  <input type='text' name='text'>
  </div>
</div>

Aber das außere div umschließt mir die beiden anderen divs nicht?

Danke für euer Hilfe
Gruß
Andi

[Gerd]

Hallo,

ich möchte 2 divs nebeneinander ausrichten und damit sie auf der gleichen Höhe sind mit vertical-align:bottom ausrichten:

<div style='vertical-align:bottom;border:1px solid red;'>
  <div style='width:50%;float:left;'>
  test
  </div>
  <div style='width:50%;float:right;'>
  <input type='text' name='text'>
  </div>
</div>

Aber das außere div umschließt mir die beiden anderen divs nicht?

Danke für euer Hilfe
Gruß
Andi

Hi Andi,

Du musst die gefloateten DIvs innerhalb der Container DIV clearen.
Also

<div style='vertical-align:bottom;border:1px solid red;'>
<div style='width:50%;float:left;'>
test
</div>
<div style='width:50%;float:right;'>
 <input type='text' name='text'>
</div>
<div style="clear: both"></div>
</div>

Es gibt auch noch eine Methode ohne zusaetzliches Markup, aber das genannte Beispiel sollte fuers erste reichen.

Gruß,
Gerd

[Andi]

Hallo,

<div style='vertical-align:bottom;border:1px solid red;'>
<div style='width:50%;float:left;'>
test
</div>
<div style='width:50%;float:right;'>
<input type='text' name='text'>
</div>
<div style="clear: both"></div>
</div>

Es gibt auch noch eine Methode ohne zusaetzliches Markup, aber das genannte Beispiel sollte fuers erste reichen.

Kannst du mir dazu einen Link geben oder das erleutern?

Gruß
Andi

[Ashura]

Hallo Andi.

Kannst du mir dazu einen Link geben oder das erleutern?

Ganz aktuell: SELFHTML Aktuell Weblog - Grundlagen für Spaltenlayout mit CSS.

BTW: Es heißt „erläutern“.

Einen schönen Freitag noch.

Gruß, Ashura

[Gerd]

Hi Andy,

hier sind einige Links (leider nur in englisch aber mit schönen Beispielen):
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html