[HTML/CSS] Divs buendig ausrichten?

[alcaeus]

Hallo ihr,

ich schraube wieder mal an meiner Website, und stelle dabei einzelne Dinge auf divs um; einfach um die Codemenge etwas (= viel) zu reduzieren.

Dabei habe ich folgenden Code:

Code:

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

</div>
<div class="nav" style="float:left;clear:right;border:1px solid red;">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>

<div style="float:right;border:1px solid green;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>
<br style="clear:both;">

<table ...>
.....

Ich haette nun gerne, dass die beiden divs welche floaten (diese mit dem roten bzw. gruenen Rahmen) unten buendig an der Tabelle ausgerichtet werden; allerdings ist dies nicht der Fall; die sind gar nicht miteinander ausgerichtet.

Kann mir jemand weiterhelfen? :)

Greetz
alcaeus

[Matze]

Hi Andy,

ich weiß nicht genau, wie die Ausgabe aussehen soll, doch im IE und im FF sieht es so aus, wie ich denke, dass du es haben möchtest (s. Anhang).
Könnte es sein, dass dir die Klassen "maintitle" und "nav" einen Streich spielen? Denn ich habe das nun ohne diese Klassen getestet.

[alcaeus]

Hallo Matze,

.maintitle beeinflusst nur das Textaussehen, .nav hat zwar ein padding-bottom von 2px, aber der Abstand ist mehr als nur 2px (siehe Anhang).
Wenn das rechte div mitm Img nicht da ist, dann ist die rote Box auch unten ausgerichtet :gruebel:

Greetz
alcaeus

PS: Es sieht uebrigens im Firefox und IE gleich aus...wenigstens sind sie sich einig :roll:

[alcaeus]

So, ich habs vorerst mal mit Tabellen gemacht; Tipps sind jedoch immer willkommen. Der Code-Overhead ist ja geradezu gigantisch :roll:

Greetz
alcaeus

[DGL-luke]

Die sind irgendwie nach oben bündig ausgerichtet. Ka ob/wie man das ändern kann. Müsst ich jetzt mein Hirn einschalten. ;)

Ansonsten halt mit top: ... rumpfuschen.

[alcaeus]

Zitat:

Zitat von DGL-luke

Die sind irgendwie nach oben bündig ausgerichtet. Ka ob/wie man das ändern kann. Müsst ich jetzt mein Hirn einschalten. ;)

Keine Sorge, das hab ich schon gemacht:

Code:

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

</div>
<div style="border:1px solid blue;vertical-align:bottom;">
   <div class="nav" style="float:left;clear:right;border:1px solid red;">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>
   
   <div style="float:right;border:1px solid green;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>
   <br style="clear:both;">
</div>

<table ...>
.....

Und was ist passiert? Nichts. IE und Firefox haben beie so getan als wuerde sie das vertical-align:bottom nicht interessieren :shock:

Greetz
alcaeus

[S2B]

unten bündig geht nicht... leider. :wink: Es gibt imho nur 2 Befehle, die das (teilweise) können:

Code:

#div1 {
  position: absolute;
  bottom: 0px
}

#div2 {
  float: right
}

Beim zweiten gilt das "teilweise" von oben... :wink:

[DGL-luke]

Zitat:

Applies to: inline elements

sagt: http://www.w3.org/TR/REC-CSS1#vertical-align

;)

das is schon so richtig, wie die Browser das machen, was dir bei deinem Problem natürlich überhaupt nix hilft ;)

[Aenogym]

dann würde ich es einfach mal mit <span> innerhalb des <divs> probieren :)

[freak4fun]

Kannst du da keine Tabelle nehmen?

Code:

<table>
  <tr>
    <td>
      Text
    </td>
    <td>
    </td>
    <td> 
      Button
    </td>
  </tr>
</table>

Oder so. :mrgreen:

MfG
freak