Position:absolut + float - divs nebeneinander

[Jessica]

Hallo Zusammen,

Habe ein "kleines" Problem und komme einfach nicht weiter!
Möchte eine Fußzeile (feste Breite und Höhe) aus drei Spalten erstellen! In der Linken steht Text (links ausgerichtet), mittig ist ein Logo (zentriert) und rechts wieder Text (rechts ausgerichtet)!
Soweit kein Problem! Jedoch "klebt" der Text oben im div! Brauche Ihn aber unten, sodass alles auf einer Linie ist incl. Logo! Unten ausrichten klappt ja mit der position: absolute; und bottom:0 Variante! Jedoch scheint dann eine Anordnung der div´s nebeneinander nicht mehr möglich?

Hier mein Code:

  
<div class="footer">  
  
   <div id="leftbox">linksbox</div>  
   <div id="rightbox">Rechtsbox </div>  
   <div id="centerbox"><img src="logo.png"></div>  
  
</div>  
  

  
.footer {  
	padding: 50px 0;  
	position: relative;  
	height:38px;  
	width: 784px;  
        }  
  
#leftbox {  
        float: left;  
        text-align:left;  
        width:200px;  
        }  
  
#rightbox {  
        float: right;  
        text-align:right;  
        width:200px;  
        }  
  
#centerbox{  
        text-align:center;  
        margin-left: 200px;  
        width:384px;  
        }  
  
  

Wie bekomme ich jetzt hier leftbox und rightbox dazu, die Schriftunten auszurichten? Weise ich den Elementen die Werte

  
position:absolute;  
bottom:0;  

bleiben die divs nicht mehr nebeneinander und überlagern sich (vermutlich wegen der float Anweisung)!

Wäre um eine Lösung sehr dankbar,

Liebe Grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

> <div class="footer">
> 
>    <div id="leftbox">linksbox</div>
>    <div id="rightbox">Rechtsbox </div>
>    <div id="centerbox"><img src="logo.png"></div>
> 
> </div>
> 
> 

Zunächst drei Hinweise ohne deinem Problem näher zu kommen.

Müssen es wirklich div-Elemente sein gibt es nichts spezielleres? Vielleicht <p>?

Mindestenstens die Centerbox kannst du sparen. Das Bild kann auch direkt in den Footer.

Benenne IDs nicht nach der (gegenwärtig) gewünschten Darstellung, sondern nach ihrer Funktion

Dann kannst du

[code lang=html] <div class="footer">   <img src="logo.png">   <p id="hinweis">Hinweistext</p>   <p id="impressum">Text mit Link zum Impressum</p> </div>

Dann könntest du den beiden inneren p irgendein float geben (Verwende die Forumssuche, suche "Floatboxen einschließen". oder sie absolut positionieren.

Matthias

[Jessica]

Danke für deine Antwort!

Habe jetzt einiges probiert, aber es klappt einfach nicht! Auch stundenlanges googlen hat mich leider nicht weitergebracht!
Scheinbar gibt es wohl keine "eindeutige" Lösung für diese Sache!

Div´s nebeneinander legen, kein Problem! Die Float Elemente einzuschließen auch nicht! Lediglich der Wunsch alles an der Grundlinie auszurichten klappt nicht (bei Tabellen vertical-align:buttom)!
Die mir einzig bekannte Methode mittels position:absolute; und bottom:0 scheint sich mit einem float nicht zu vertragen!?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

Visuelles Formatierungsmodell W3C. Was spricht denn gegen absolute Positionierung?

Matthias

[Jessica]

»»Was spricht denn gegen absolute Positionierung?

Wenn ich absolut positioniere, wird die float Eigenschaft doch ignoriert!?
Hab eigentlich alles mir sinnvoll erscheinende schon probiert, aber gibt immer wieder Probleme! Und dabei hatte ich mir so fest vorgenommen, mein "schönes" Tabellenlayout umzuschreiben!

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

Hab eigentlich alles mir sinnvoll erscheinende schon probiert, aber gibt immer wieder Probleme! Und dabei hatte ich mir so fest vorgenommen, mein "schönes" Tabellenlayout umzuschreiben!

Eine gute Idee, förderungswürdig.

Wenn ich absolut positioniere, wird die float Eigenschaft doch ignoriert!?

Du hast doch selbst festgestellt, dass float nicht das leistet, was du möchtest, wenn wir nicht anneinander vorbei reden, kann absolute Positionierung das leisten, von dem ich glaube, dass du es möchtest. Um das wilde Herumraten abzukürzen - Onlinebeispiel her.

Matthias

[Jessica]

Lieben Dank für deine Hilfe Matthias!
Hab jetzt mit folgendem Code das erreicht was ich möchte

CSS:

  
  
.footer {  
	width:784px;  
	height:38px;  
	position:relative;  
	}  
  
#left {  
	width:200px;  
	text-align:left;  
	position:absolute;  
	bottom:0;  
	left:0;  
	}  
	  
#right{  
	width:200px;  
	text-align:right;  
	position:absolute;  
	bottom:0;  
	right:0;  
	}  
	  
#center{  
	width:384px;  
	position:absolute;  
	left:200px;  
	bottom:0;  
	text-align:center;  
	}  
  

HTML:

  
<div class="footer">  
 <div id="left">Links</div>  
 <div id="center"><img src="logo.png"></div>  
 <div id="right">Rechts</div>  
</div>  

Ist das so zulässig und wird dies auch in allen Browsern gleich angezeigt oder muss hier irgendwas hnizu?
Hab mich wohl zu lange mit dieser float-Geschichte aufgehalten!

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

Ist das so zulässig und wird dies auch in allen Browsern gleich angezeigt oder muss hier irgendwas hnizu? Hab mich wohl zu lange mit dieser float-Geschichte aufgehalten!

Beachte meine ! Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Hab eigentlich alles mir sinnvoll erscheinende schon probiert, aber gibt immer wieder Probleme! Und dabei hatte ich mir so fest vorgenommen, mein "schönes" Tabellenlayout umzuschreiben!

Eine gute Idee, förderungswürdig.

Eine Trennung vom Tabellenlayout impliziert, dass man zuerst an die Inhalte denkt und dann erst an die Gestaltung. Es ist zum Beispiel überaus unsinnig, aus jedem <tr> und <td> ein <div> machen zu wollen.

Matthias