vertical-align i div?

Försöker få allt som fiinns i en div att hamna längst ned i diven. Vertical-align verkar inte fungera... går det att lösa på något annat sätt att lösa det med styles UTAN extra tabeller och fler divar?

Det här är kanske att skjuta över målet men det enda jag kom på.
http://www.alistapart.com/articles/footers/

Mvh
Jan-Olov

<div style="border:1px solid red; position:relative; width:300px; height:300px;">
	<div style="position:absolute; bottom:0;">Längst ner</div>
</div>

Visst går det, t ex genom att använda en hög smal bild i diven. Fördelen är att koden är enkel, nackdelen att den bara grejar en rad. Använder denna metod på min personliga hemsida för att få text i nederkanten på navigeringsikonerna.

<div>
<img class="aligner" src="gfx/1x1trans.png" />
Text nere
</div>

img.aligner {height: 150px; width: 1px; vertical-align: text-bottom}

Om du skriver vertical-align: bottom så fungerar det bara i Mozilla, men med text-bottom funkar det även i MSIE och Opera

Känns som vertical-align är helt felkonstruerad då. :/ Tack för svaren, jag kör på PepeJerias variant!

Kan så tyckas - men om webbläsaren skall följa standard skall vertical-align bara funka på två typer av taggar:

dels "inline-taggar" (som t.ex. span) där den anger hur innehållet skall justeras i höjd gentemot gentemot typsnittets baslinje eller "inline-blockets" kanter,
och dels i "table cells" - och det är antagligen därifrån många av oss vant sig vid dess beteende i "block-liknande" omgivningar ;)

Dvs - enligt CSS2 är "vertical align" inte byggd för att fungera i "fullskaliga" block som div ;)

Higas variant fungerar för att en <img> är ett "inline-block", dvs blocket som omsluter bilden likställs med en jättestor bokstav, och sätter man då justering mot baseline eller textens "bottom" så ligger ju den under bild-inline-blocket/"bokstaven" ;)

Om man använder PepeJerias kod så förutsätter det att den yttre diven har en fixerad höjd, och då om man har en för lång text så hamnar en del av texten ovanför diven. Finns något sätt man kan göra så diven har en min-height men ingen max-height och att diven då förstoras beroende på hur mycket text det är? Alltså att slippa ha en fixerad height helt enkelt ;)

jarvklo skrev:

Kan så tyckas - men om webbläsaren skall följa standard skall vertical-align bara funka på två typer av taggar:

dels "inline-taggar" (som t.ex. span) där den anger hur innehållet skall justeras i höjd gentemot gentemot typsnittets baslinje eller "inline-blockets" kanter,
och dels i "table cells" - och det är antagligen därifrån många av oss vant sig vid dess beteende i "block-liknande" omgivningar ;)

Dvs - enligt CSS2 är "vertical align" inte byggd för att fungera i "fullskaliga" block som div ;)

Higas variant fungerar för att en <img> är ett "inline-block", dvs blocket som omsluter bilden likställs med en jättestor bokstav, och sätter man då justering mot baseline eller textens "bottom" så ligger ju den under bild-inline-blocket/"bokstaven" ;)

AAAaaaa........ det där var guld att läsa!!!! Tack tack!!! Fan vad jag har svurit över att det inte gått att lägga prylar i botten på divvar med vertical-align...

Men nu får jag fortsätta att svära över W3C istället.... :)

Ingen som har koll på mitt problem? :r

web00132 skrev:

Ingen som har koll på mitt problem? :r

Tror ingen förstod att du hade en fråga. Men ska nog inte posta egna, nya frågor i en redan pågående tråd utom kanske i extremfall. Dels är det ett oskick att kapa andras trådar, och dels kan ju ens eget inlägg försvinna i bruset - som nu.

web00132 skrev:

Om man använder PepeJerias kod så förutsätter det att den yttre diven har en fixerad höjd, och då om man har en för lång text så hamnar en del av texten ovanför diven. Finns något sätt man kan göra så diven har en min-height men ingen max-height och att diven då förstoras beroende på hur mycket text det är? Alltså att slippa ha en fixerad height helt enkelt ;)

Nej, den yttre, relativt positionerade divven behöver inte fixerad höjd för att vertical-align ska funka. Ta bort "height:300px" bara. För att få minsta höjd, lägg till "min-height:300px" istället.

Men jesus, har det man skriver något att göra med det som tråden handlar om så är det väl passande att man skriver i den tråden. Annars får man dessutom bara höra att man ska testa att söka i forumet eller att man spammar forumet. Och läser man folks inlägg korrekt så ser man oftast om det står en fråga i meddelandet eller ej.
Mitt problem löstes av att layouten ändrades till en annan lösning, tack för svar iaf.

web00132 skrev:

Men jesus, har det man skriver något att göra med det som tråden handlar om så är det väl passande att man skriver i den tråden.

Kan du gissa varför du inte fick mer än ett svar? :OO

...eller så sätter man "display: table-cell" på diven så fungerar "vertical align: bottom" jättebra. Förutsätter dock en angiven höjd.

IE stöder dock inte display: table-cell.

visslaren skrev:

IE stöder dock inte display: table-cell.

Och självklar ställer IE till det igen.... varför är jag inte förvånad

Det finns i alla fall ingen lösning enligt spec, vilket W3C ger ett definitivt svar på här:

CSS level 2 doesn't have a property for centering things vertically.

http://www.w3.org/Style/Examples/007/center.html#vertical

Men nu när jag tänker lite så frågade du ju om placering i botten, inte mitten :p