Frage von SavixUsermod Junior, 69

Wie zentriert man in HTML/CSS ein mehrspaltiges Layout?

Hallo an alle,

ich habe eben mit HTML & CSS ein zweispaltiges Layout erstellt, dieses lässt sich allerdings nicht in die Mitte der Website zentrieren!

Weiß jemand, wie das funktioniert? Habe ich etwas vergessen?

Normalerweise klappt das ja mit dieser Anweisung:

margin {0 auto;}

Das tut es aber nicht, der Text "klebt" nach wie vor am linken Rand.

Hier die entsprechenden Code-Schnipsel:

HTML

<div class="spalten">
    <div class="clearfix">  
        <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>  
</div>

CSS

.left
{
    float: left;
    width: 20%;
    margin-right: 20px;
}

.clearfix:before,
.clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

Dankeschön!
Die hilfreichste Antwort zeichne ich wie immer aus.

VG,
Savix

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von threadi, 56

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/

Kommentar von Savix ,

Dankeschön für deine Hilfe!

Kommentar von Savix ,

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...

Kommentar von threadi ,

Zeig einen Link zur betroffenen Webseite, dann kann man sich das auch anschauen und analysieren.

Kommentar von Savix ,

Hi threadi,

entschuldige bitte meine späte Antwort. Ich setze jetzt nochmal eine komplett neue Testseite auf und verlinke sie dann.

Kommentar von Savix ,

Dank der neuen, sauberen Dateien funktioniert es jetzt!

http://niklasfandrich.de/test/

Kommentar von Savix ,

Nachtrag

Ich habe den Befehl { float: left; }, durch { display: inline-block; } ersetzt und damit noch bessere Ergebnisse erzielt.

Dank des Elternelements wird der gesamte Inhalt dadurch nun unter der Klasse .spalten zentriert. :-)

Hier nochmal der Code für alle anderen:

.spalten.left { display: inline-block; width: 20%;}
Antwort
von medmonk, 42

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. 

Kommentar von Savix ,

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! :-)

Antwort
von FaTech, 61
<center>Hier kommen diesachen hin, welche eingemittet werden sollen</center>

Und spalten mit einer Tabelle

Kommentar von FaTech ,

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

Kommentar von Savix ,

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

Kommentar von FaTech ,

Ja, der Fehler ist, du hast geschrieben: margin-right. Ändere mal right zu left. Habe es versucht und dann klappt es

Kommentar von FaTech ,
.left

{
float: left;
width: 20%;
margin-left: 20px;
}

.clearfix:before,
.clearfix:after
{
content: " ";
display: table;
}

.clearfix:after
{
clear: both;
}

.clearfix
{
*zoom: 1;
}
Kommentar von Savix ,

So, hab das mal getestet.

Das Ergebnis ist, dass die rechte der beiden Spalten in der Mitte ist und die andere nach wie vor links an der Seite klebt.
Siehe hier: http://prntscr.com/crfwgk

Kommentar von FaTech ,

Was genau hast du getestet? Den Center Befehl? Falls ja, mache mal aus margin-right -> margin-left

Kommentar von Savix ,

Hab beides getestet, beide Wege funktionieren nicht.

  • Das Center-Tag richtet die Texte in der jew. Spalte aus, egal wo ich es platziere, aber nicht in der Seitenmitte.
  • Margin-right bewirkt einen Abstand zw. den Texten (den Spalten) & margin-left richtet nur eine der beiden Spalten zentriert aus.

Ich bin völlig überfragt.

Kommentar von FaTech ,

Hast du Skype? Dann können wir mal richtig schreiben und nachsehen

Kommentar von threadi ,

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

Antwort
von Xandoo94, 5

Bootstrap ist das Stichwort !!

Kommentar von RakonDark ,

Lol. Wer nichts kann muss ein framework laden nur um 3 Zeilen Code zu ersetzten. genauso wie man unbedingt jquery nehmen muss nur um mal ein Element ansprechen zu können.

Kommentar von RakonDark ,

Das war Ironie.

Keine passende Antwort gefunden?

Fragen Sie die Community