Drei Elemente nebeneinander in HTML?
Hallo miteinander ich bin wieder mal am Programmieren und dabei bin ich auf folgendes Problem gestoßen:Links von der Seite sollte die Navigation sein in der Mitte der Inhalt und Rechts sollten die SN wie Facebook,Twitter,Google+,YT verlinkt sein. Jedoch finde ich im web nur anleitungen wie man html so aufbaut das zwei elemente nebeneinander sind also navigation darüber, darunter links inhalt rechts verlinkungen und darunter wiederum ein footer. Jetzt währe ich auf die Methode Float gestoßen und da währen dann auch alle Drei Elemente nebeneinander. Jedoch tritt dann Folgendes Problem auf: Wenn ich einen Footer anfügen möchte ist das Nicht möglich da sich der Footer dann ca 200px unter dem anfang vom Content befindet (hierbei ist das Problem der Cont. hat immer eine mindest Höhe von 500px, das heist der Footer verschwindet hinter dem Cont.) Jetzt die Frage weis jemand von euch eine Möglichkeit in CSS das man drei Elemente nebeneinander anordnet ohne das man den Befehl Float benutzt?
2 Antworten
also ich habe immer relative Werte verwendet für width deiner divs in die du das Zeug reinpackst. Dann hab ich im CSS angegeben, dass jedes div 33% breit ist und es ging eigentlich immer. Ich finde das ist ne recht billige Lösung.
ja float funktioniert grundsätzlich aber sobald ich dann meinen Footer hinzufüge wird der irgentwie in die anderen 'gefloateten' Elemente reingebugt, ich glaube das lieg daran das die Höhe bei einem Float-Element nicht richtig übergeben wird und dann der Footer sich reinbugt aber so ist deine Idee gut, hier frage ich mich jedoch auch ist es dann möglich das man noch elemente unter diese Setzt?
versuch doch mal height von deinen bars und dem Seiteninhalt zu definieren, hilft das? Also z.B. height = 85%
Geb jedem Element eine breite in Prozent zB 20% 50% und 30% so dass du auf insgesamt 100% kommst.
Eventuell musst du jedem Element ein Display:Block oder Display: inline-Block geben damit es funktioniert
Eventuell musst du jedem Element ein Display:Block oder Display: inline-Block geben damit es funktioniert
Nicht eventuell, ganz sicher muss den drei Elementen die Eigenschaft zugewiesen werden. Mit float könnte man alternativ auch arbeiten, es ist allerdings unvorteilhaft.
.selector {
display: inline-block;
}
Das Elternelement bekommt die Eigenschaft display: block, die Tochterelemente die inline-block.
kann ich bei dieser Methode unter der Teilung dann noch einen Footer hinzufügen der Bündig unter den dreien ist?
Das geht natürlich auch. Der footer muss außerhalb des Elternelements liegen und ist demnach dann nicht mehr von der Flexbox betroffen.
<div class="parent">
<div class="row">
<span>Some content</span>
</div>
</div> <footer> ..... </footer>
Müsste gehen. Kann aber sein das du das mit margin/Padding noch anpassen musst
Würde ich der Optik halber einfügen, nötig ist es nicht. Der Footer klebt dann nur dementsprechend am Elternelement.
Müsste gehen. Kann aber sein das du das mit margin/Padding noch anpassen musst
kann ich bei dieser Methode unter der Teilung dann noch einen Footer hinzufügen der Bündig unter den dreien ist?
müsste auch ohne float gehen, oder?