[HTML/CSS] Divs buendig ausrichten?

[S2B]

Zitat:

Zitat von freak4fun

Kannst du da keine Tabelle nehmen?

Das widerspricht dem Konzept von einem Design ohne Tabellen. :wink:

@alci: Irgendwo hab ich auch mal was von height: 100% für html und body gelesen (dann dürfen die natürlich auch kein margin haben, sonst gibt's Dauerscrollleisten. :wink: ).

[Matze]

Zitat:

Zitat von freak4fun

Kannst du da keine Tabelle nehmen?

Natürlich ginge das, doch er möchte aus guten Gründen von den Tabellen wegkommen. ;)

[alcaeus]

@freak4fun: ja, so habe ich es derzeit, aber bei der Anzahl an HTML-Zeilen die ich habe, will man natuerlich davon wegkommen ;)

Bis jetzt haben alle Tipps leider nicht funktioniert :(
position:absolute;bottom:0px; hat nur dafuer gesorgt, dass die nav-Leiste ganz unten im Browser-Fenster klebte :wall:

Mit dem <span> im <div> hats auch nicht funktioniert, und ich verstehe nicht was height:100% bei html und body bewirken sollen :gruebel:

Greetz
alcaeus

[himitsu]

Zitat:

Zitat von S2B

@alci: Irgendwo hab ich auch mal was von height: 100% für html und body gelesen (dann dürfen die natürlich auch kein margin haben, sonst gibt's Dauerscrollleisten. :wink: ).

Das kommt aber darauf an, in welchem DOCTYPE man das verwendet ('s wird überall etwas anders interpretiert, laut W3C) und was wichtiger ist, welches DOCTYPE der Browser denkt zu erkennen und wie der das interpretiert und darstellt -.-''

height:100% soll angeblich den BODY auf 100% des Bildschirm (was has halt der Desktop für 'ne Höhe hat), oder 100% des anzeigbaren Bereichs im Browser bringen, oder was weiß ich noch, es wird nicht immer das gemacht, was man denk.

[Matze]

@Andy: Also vertical-align wirkt nur bei Inline-Elementen, ist auf <div>, wieso auch immer, folglich nicht anwendbar. Wenn du line-height verstellt, hast du den Text leider auch nur vertikal zentriert. Also eine reine css-Lösung gibt es für dieses Problem imho nicht.

[S2B]

height: 100% bringt nur was, wenn man z.B. etwas ganz unten ans Fenster kleben will (wie auch die position: absolute-Lösung). Die einzige Chance sehe ich bei deinem Fall beim float: right und einem damit verbundenen vertical-align: bottom. Ob das allerdings klappt, kann ich nicht sagen, bei einem meiner Foren (auch mit div-Layout) tritt der gleiche Fehler auf und ich habe ihn bis jetzt noch nicht behoben... :cyclops:

Teste mal sowas:

Code:

div.left {
  width: 50%
}

div.left span {
  vertical-align: bottom
}

div.right {
  width: 50%;
  float: right
}

und das HTML dazu:

Code:

<div>
  <div class="left">
    <span>dein Text</span>
  </div>
  <div class="right">dein Text</div>
  <div style="clear: right"></div>
</div>

Oder vielleicht funktioniert das:

Code:

div.right, div.left {
  width: 50%;
  float: right
}

div.left span {
  vertical-align: bottom
}

(mit dem gleichen HTML-Code)

@himitsu: Richtig, muss man dann halt testen. *grml* :mrgreen:

[Aenogym]

@s2b: das mit dem verschachtelten span dachte ich mir auch so. allerdings bringt's einfach nichts, da er das div nicht hoch genug macht. sprich: span und div sind so hoch, wie die schrift. dann ist das span vertikal am boden ausgerichtet, was optisch genau das gleiche in grün ist.... :(

[S2B]

Zitat:

Zitat von Aenogym

sprich: span und div sind so hoch, wie die schrift.

Naja, aber genau das sollte doch clear: right ändern...

[Aenogym]

okay, obs mit dem clear:right auch so ist, weiß ich jetzt nicht.

[alcaeus]

Moin,

das Problem ist, dass Elemente mit float den Container anscheinend nicht vergroessern :shock:

Soll heissen, wenn ich ein 30px hohes Bild mit float:right; in einem div drin habe, und einen Text mit 10px Hoehe (ohne float), dann wird das div nur so hoch sein, wie es sein muss um den 10px hohen Text unterzubringen :wall:

Naja, nachdem auch mir irgendwan das rumprobieren zum Hals raushaengt, habe ich sowas verwendet:

Code:

<div class="maintitle">[url="{U_VIEW_CAT}"]{CAT_TITLE}[/url]

</div>

<div style="width:100%;text-align:right;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>

<div class="nav">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>

Und da soll mir nochmal jemand sagen, dass man "mit CSS alles machen kann", oder dass "CSS perfekt ist", wie so manche Fanatiker es gerne tun. Wenigstens hier besteht Aufholbedarf, und diesmal ist es tatsaechlich kein Browserproblem (dass es sowas auch gibt :roll:)

Greetz
alcaeus