• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Variable Zentrierung

S

sam77

Neues Mitglied
Moin moin,

Folgendes Anliegen:

Ich habe auf meiner Seite mehrere Artikelboxen, je 200px breit, welche in einem contentblock mit dynamischer Breite stecken (width=90%)
Diese sind mit float left an die linke Seite geheftet und "stacken sich nebeneinander" je nachdem wie breit das Browserfenster geöffnet ist.
Ist das Fenster nicht breit genug landen sie in der Reihe darunter.

Nun ist das Problem, das der Abstand des (pro zeile) letzten Kastens zur rechten Seite Abhängig ist von der aktuellen Breite des Fensters.

Ich würde gerne mit CSS3 einen Weg finden die Boxen zu zentrieren und ihren Abstand zueinandere dynamisch zu gestalten, so dass der Abstand zu beiden Seiten gleichmäßig wächst.

Danke für jede Hilfe
 
so vllt...


HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#top{
border: 1px solid #ddd;
max-width: 90%;
min-width: 715px;
height: 250px;
margin-right: auto;
margin-left: auto;
padding-right:5%;
}

#bodytopleft, #bodytopmiddel, #bodytopright
{
margin-left: 5%;
width: 200px;
height: 200px;
float: left;
background: #ddd;
}

</style>

<body>
<div id="top">
    <div id="bodytopleft">

    </div>
    <div id="bodytopmiddel">

    </div>
    <div id="bodytopright">

    </div>
</div>
</body>
</html>

Anmerkung:
im übrigen muss sich die 90% ja an irgendeiner Größe festmachen lassen in "px" ich meine 90% von was? % ist immer nur eine Bezugsangabe, welche sich ja auf eine Größe beziehen muss.
Rechnung:
Du hast schon 3x200px breite, das sind 600px ich gehe mal davon aus das du einen Abstand von mindestens 10px links rechts einhalten willst (5x10px) dann sind wir bei 650px. Insgesamt liegst du also bei mindestens 715px breite. (da sich die 650 nur auf 90% beziehen müssen wir nochmal 10% drauf rechen damit die Breite passt also 650px + 65px)

Definieren wir doch also den Bereich Top mit mindestens 715px breite... wenn du nun dem "margin" eine Prozent Angabe hinzufügst, sind die Abstände immer gleich. Erst wenn das Fenster oder der Bereich Top kleiner Skaliert wird als die 715px rutscht ein Element nach unten, (Das verhindert Min-width:715px) es passt dann nicht mehr in den Top-Bereich hinein.
;

Padding-right 5px; ist vllt. auch sinnvoll.habe ich mal nachgetragen
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben