Wie zentriert man in HTML/CSS ein mehrspaltiges Layout?

... komplette Frage anzeigen

3 Antworten

Das clearfix ist so wie Du es aufgebaut hast ungünstig und falsch. Viel einfacher wäre:

HTML

<div class="spalten">
<div class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
<div class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
</div>

CSS

.spalten { overflow: hidden; }

.spalten .left { float: left;width: 20%; }

Anstelle von float kann man btw. auch eine Flexbox verwenden. Das ist aus meiner Sicht nicht nur komfortabler sondern auch viel flexibler. Siehe:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Savix
09.10.2016, 10:53

Dankeschön für deine Hilfe!

0
Kommentar von Savix
13.10.2016, 17:25

Leider funktioniert dieser Weg nicht. Hier mal die Code-Schnipsel, aus meinem Quellcode:

HTML

<div class="team">
<div class="left">Informationen hier eintragen.</div>
<div class="left">Informationen hier eintragen.</div>
</div>


CSS

.team { overflow: hidden; }

.team.left { float: left; width: 20%; }

So sieht das dann auf der Website aus: http://prnt.sc/cte2gv

Der riesige Umbruch zwischen dem Trennstrich und dem darunter stehenden Text ebenso ungewollt.

Wo liegt der Fehler? Habe ich ein Zeichen falsch gesetzt?
Vier Augen sehen ja bekanntlich mehr als zwei...

0

Am einfachsten wäre es, wenn du ein Grid-System nutzen würdest. Sei es das von Bootstrap, Foundation, 960.gs oder eines der vielen anderen die man im Netz finden kann. Alternativ selbiges mit Hilfe des CSS Boxmodel oder dem Flexbox-Model umsetzen. 

Was jetzt deine eigentliche Frage angeht. Wenn deine Seite mittig zentriert werden soll, alles in einen umschließenden Container packen und diesen auf eine maximale Breite begrenzen. Denn ohne Begrenzung wird der ganze Viewport genutzt. Sprich 20% des Viewports genutzt werden. 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Savix
10.10.2016, 16:51

Wenn deine Seite mittig zentriert werden soll[...]

Das ist sie schon, die beschriebene Methode kenne ich bereits. Die Frage bezog sich tatsächlich nur auf das mehrspaltige Layout.

Danke für deinen Tipp! :-)

0
<center>Hier kommen diesachen hin, welche eingemittet werden sollen</center>

Und spalten mit einer Tabelle

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von FaTech
08.10.2016, 21:20

Falls es noch nicht das ist, was du meinst, dann sag es und ich verbessere mich

1
Kommentar von Savix
08.10.2016, 21:22

Hallo,

danke für deine Antwort!

Du meinst, ich kann das Layout einfach mit dem Center-Tag in HTML zentrieren? Hm..., das erscheint mir etwas zu einfach, ich probiere es aber! 
Hast du eine Idee, wieso Margin nicht hinhaut?

Liebe Grüße,
Savix

0
Kommentar von threadi
08.10.2016, 23:38

Der center-Tag ist schon seit Jahren deprecated und sollte nicht mehr genutzt werden. Abgesehen davon ist er auch in dem Zusammenhang falsch eingesetzt.

2

Was möchtest Du wissen?