div in div horizontal zentrieren

_tnt_ · 24.09.2012

Hallo,
ich möchte gerne einen div in einem div zentrieren.

Ich habe drei Boxen a 250px + padding. Jetzt hätte ich gerne, dass sich der umschließende container genau in der Mitte der Seite zentriert.

Ich könnte jetzt die Breite der Boxen + das padding ausrechnen und dann den container auf diese größe einstellen und mit margin auto zentrieren.
Mir stellt sich aber die Frage, ist es möglich, dass CSS automatisch die Größe des "top" divs erkennt und diesen in der Mitte der Seite zentriert.

Außerdem, ist es möglich, dass der "header" und "footer" automatisch die breite des "main" bereichs übernehmen?

oder anders gefragt, wie würdet ihr an die Sache ran gehen?

Gruß
_tnt_

HTML:

<!DOCTYPE html>
<html>
<head>
<title>FotoPort</title>
<link href="style.css" type="text/css" rel="stylesheet" /> 
</head>
    <body>
        <div id="container">
<!-- -----|----- HEADER -----|----- -->
            <div id="header">
                FotoPort<br>
                // Random Picture //
            </div>

<!-- -----|----- MAIN -----|----- -->
            <div id="main">
				<!-- ----- TOP ----- -->
				<div id="top">
					<div id="left-distance">
						<div id="color-tl">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div id="middle-distance">
						<div id="color-tm">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div id="right-distance">
						<div id="color-tr">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div class="clr"></div>
				</div>
				
				<!-- -----BOTTOM ----- -->
				<div id="top">
					<div id="left-distance">
						<div id="color-bl">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div id="middle-distance">
						<div id="color-bm">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div id="right-distance">
						<div id="color-br">
							<div id="text">
								test<br>
								test<br>
								test
							</div>
						</div>
					</div>
					
					<div class="clr"></div>
				</div>
            </div>

<!-- -----|----- FOOTER -----|----- -->
            <div id="footer">
                <a class="cen">Impressum | Wicket v.<wicket:container wicket:id="version">1.5-SNAPSHOT</wicket:container></a>
            </div>
        </div>
    </body>
</html>

Code:

body{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    font-size: 15px;
}

#container{
}

#header{
    background: rgb(14, 14, 14);
    height: 50px;
    border: 1px solid rgb(6, 68, 108);
    padding: 5px;
}

#main{
    background: rgb(14, 14, 14);
    border: 1px solid rgb(6, 68, 108);
}

#footer{
    background: rgb(14, 14, 14);
    border: 1px solid rgb(6, 68, 108);
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

#text{
	width: 250px;
	height: 250px;
	padding: 10px;
}

#color-tl{
	background: rgb(30, 30, 30);
}

#color-tm{
	background: rgb(50, 50, 50);
}

#color-tr{
	background: rgb(70, 70, 70);
}

#color-bl{
	background: rgb(90, 90, 90);
}

#color-bm{
	background: rgb(110, 110, 110);
}

#color-br{
	background: rgb(130, 130, 130);
}

#left-distance{
	float: left;
	padding: 5px;
}

#middle-distance{
	float: left;
	padding: 5px;
	}

#right-distance{
	float: left;
	padding: 5px;
}

.clr{ 
    clear: both; 
}

.cen{
    text-align: center;
    padding: 0px;
    margin: 0px;
}

DaKKK · 24.09.2012

AW: div in div horizontal zentrieren

Wenn du dem Hauptcontainer ein "margin:0 auto" gibst, wird er automatisch in der Mitte zentriert.

patrick_l · 24.09.2012

AW: div in div horizontal zentrieren

Erstelle eine Haupt-Div als Wrapper und packe alle anderen darein. Dann verpasst du dem Wrapper ein margin: 0 auto; und das war es. Du gibst der rechten und linken Spalte eine fixe Breite. Der Content-Bereich füllt den Rest aus.

Ich kenne dein Layout jetzt nicht, kann daher auch nicht so recht nachvollziehen warum du so viele Divs ineinander verschachtelst. Auch ist dein Quellcode so semantisch nicht korrekt. Packe um deinen Text ein P-Tag.

Wenn du eh mit CSS3 und HTML5 arbeitest, würde ich überlegen das HTML5 Boilerplate oder zumindest das modernizr-Script (für deine RGB/A-Farben) einzusetzen. Du könntest dann auch entsprechend mit den neuen HTML5-Tags arbeiten.

Hier mal das Grundgerüst ohne HTML5-Tags:

HTML:

<div class="wrapper">
      <div id="header">  <!-- header -->
        <div class="inside">
      </div>
      <div id="nav">
      </div>
    </div> <!-- header end -->
    <div id="main"> <!-- main -->
        <div id="sub-left">
      </div>
      <div id="content">
      </div>
      <div id="sub-right">
      </div>
    </div> <!--main end -->
    <div id="footer"> <!-- footer -->
        <div class="inside">
      </div>
    </div> <!--footer end -->
  </div>

Edit: Die Divs "inside" sind nicht notwendig. Benutze ich nur häufig bei Websites die den kompletten Bereich im Browser ausfüllen und der Content mittig sein soll.

Grüße Patrick

hub · 25.09.2012

AW: div in div horizontal zentrieren

Moin moin,
auch hier führen viele Wege nach Rom. Eine andere Möglichkeit wäre, dein top-div mit "text-align: center;" und die 3 inneren Container mit "display: inline-block;" zu bestücken, so das sie dem normalen Textfluss folgen. Ich bin mir aber im Moment nicht sicher, welches wirklich die effizienteste Methode ist ...

patrick_l · 25.09.2012

AW: div in div horizontal zentrieren

hub schrieb:
Moin moin,
auch hier führen viele Wege nach Rom. Eine andere Möglichkeit wäre, dein top-div mit "text-align: center;" und die 3 inneren Container mit "display: inline-block;"

Macht aus meiner Sicht nicht viel Sinn. Erst einmal unnötige Schreiberei und und im Ganzen nicht so elegant. Mit meinem Weg wäre es nur das margin auto und innerhalb der Div Wrapper das Positionieren bzw. floaten der einzelnen Divs

Grüße Patrick

_tnt_ · 25.09.2012

AW: div in div horizontal zentrieren

Vielen Dank schon mal!

Also was ich will:
>> Einen Wrapper/Container div welcher die ganze Seite umschließt.
>> Da drinnen 3 divs: header, main, footer
>> Im Main div sollten dann 2x3 divs gefloted werden. Das ich also 6 Kacheln habe.
>> Diese 6 Kacheln bekommen jeweils eine fixe Größe zugewiesen. Jetzt möchte ich, dass sich die Seitenbreite Automatisch an die 6 Kacheln anpasst (header und footer also am main) und im Browser mit margin auto zentriert.

Ich habe deshalb so viele divs gemacht, weil ich alles verschalten wollte.

container mit header, main, footer
main mit zwei divs top und bottom wo jeweils 3 divs drinnen sind
Diese 3 divs wurden wieder verschachtelt. Ein div für den Abstand, ein div zum Einfärben und ein div für den Text.

Ich hatte früher mal gehört, man sollte die Abstände mit paddings und nicht mit margin + padding lösen. Deshalb so viele divs damit ich mit paddings auskomme.

Ich hoffe das war verständlich. Sonst kann ich auch noch eine grafische Skizze anfertigen.

Gruß
Daniel

manfred_hst · 25.09.2012

AW: div in div horizontal zentrieren

hi daniel,
Du musst deinem container eine feste breite zuweisen, sonst geht der über den gesamten bildschirm. sieht dann so aus:
#container{
width:845px;
margin:0 auto;
}
gruss
Manfred

_tnt_ · 25.09.2012

AW: div in div horizontal zentrieren

genau das wollte ich wissen, ob ich dem container eine breite geben muss, oder ob ich sagen kann, dass er einfach selbst so groß wie nötig wird.

nehmen wir jetzt an, ich mache den container 900px breit. kann ich dann die 3 kästchen innerhalb des container zentrieren lassen oder geht das auch nicht, weil der umschließende div sich dann auch wieder auf die gesamte container größe ausdehnt?

edit: gibts zur margin / padding problematik was zu sagen oder habe ich da was falsch verstanden?

manfred_hst · 25.09.2012

AW: div in div horizontal zentrieren

das zentrieren geht wenn du den paddings in deinen distance-divs verschiedene werte zuweist. z.b. so:
padding: 10px 10px 5px 16px;
die reihenfolge ist oben, rechts, unten und links

_tnt_ · 25.09.2012

AW: div in div horizontal zentrieren

manfred_hst schrieb:
das zentrieren geht wenn du den paddings in deinen distance-divs verschiedene werte zuweist. z.b. so:
padding: 10px 10px 5px 16px;
die reihenfolge ist oben, rechts, unten und links

wie soll ich das verstehen?

manfred_hst · 25.09.2012

AW: div in div horizontal zentrieren

10px ist der Abstand nach oben, die nächsten 10px nach rechts, 5px nach unten und 16px nach links

_tnt_ · 25.09.2012

AW: div in div horizontal zentrieren

heißt das, dass ich das padding dann jeweils anpassen muss, bis es zentriert ist?
ich möchte gerne eine automatische zentrierung. oder habe ich da was falsch verstanden?

manfred_hst · 25.09.2012

AW: div in div horizontal zentrieren

ja, das geht nicht anders.

patrick_l · 26.09.2012

AW: div in div horizontal zentrieren

Easy going

Du gibst der linken und rechten Spalte eine fixe Breite. Die Spalte in der Mitte bekommt als Breitenangabe ein width:"auto". Anschließend floatest du die einzelnen Divs. Hier mal auf die schnelle das komplette Gerüst.

HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="patrick_l">
    <title>3 Col Layout</title>
    <style type="text/css">
        /* -------------- CSS3 --------------- */
        * {font-size:100%;margin:0;padding:0;border:none;outline:none;}
        html {overflow-y: scroll;} /* IE */
        body {}

        .wrap {width:968px; height:700px; background:#09f; margin:10px auto; padding:0;}
        #header {width:968px; height:160px; background-color:rgba(250,250,250,0.8);}
        #main {width:968px; height:400px; background-color:rgba(250,250,250,0.4);}
        #content {width:auto; height:400px; background-color:rgba(250,250,250,0.4); float:left;}
        #sub-left, #sub-right  {width:220px; height:400px; background-color:rgba(250,250,250,0.2);}
        #sub-left {float:left;}
        #sub-right {float:right;}
        #footer {width:968px; height:140px;background-color:rgba(123,123,123,0.4);}
    </style>
</head>
<body>
    <div class="wrap">
        <div id="header">
        <!-- header -->
    </div>
    <div id="main" role="main">
        <div id="sub-left">
          <!-- sub left -->
      </div>
      <div id="content">
        <h1><!-- heading --></h1>
        <p><!-- content --></p>
        <p><!-- more --></p>
      </div>
      <div id="sub-right">
          <!-- sub right -->
      </div>
      <br clear="all">
    </div>
    <div id="footer">
        <!-- footer -->
    </div>
    </div>
</body>
</html>

-

Du benötigst auch keine zusätzlichen Divs für deinen Inhalte (Texte). Dafür reichen einfache <p>-Tags aus. Diese sprichst du dann in deinem CSS an und formatierst diese entsprechend.

Genauso für Überschriften und Co. Vielleicht kannst du uns ja mein dein Layout zeigen, dann könnte man mehr dazu sagen. Auch wie von mir schon mal erwähnt würde ich überlegen mit den neuen HTML5-Tags zu arbeiten. Dort könntest vor allem mit dem Header, Footer sowie dem Section und Aside-Tag arbeiten.

Grüße Patrick

_tnt_ · 30.09.2012

AW: div in div horizontal zentrieren

Sorry, war in den letzten Tagen etwas beschäftigt.

Also so sollte mein Layout aussehen. Das wären die Div Bereiche im groben.
Es soll einen Header und Footer geben.
Im Main sollten 6 Kacheln sein. Die Kacheln erhalten eine fixe Größe. Also zB 250x250.

Ich könnte jetzt ganz einfach alles ausrechnen (div größe + padding + margin) und dann die Container Größe wählen und mit margin 0 auto zentrieren.

Ich möchte es aber so haben, ich möchte einen Container um die ganze Div Bereiche. zB 900px breit. In dem Container mache ich dann Header / Main / Footer.
Header und Footer wären einfach so groß wie der Container.
Der Inhalt des Main Bereichs sollte sich innerhalb des Main Divs automatisch zentrieren.
Also wen die Kacheln nur 200x200 groß sind, dann sollten die trotzdem im Main zentriert sein.
Außerdem sollten sich die Kacheln beim zusammen schieben der Seite nicht verändern.

Kann ich das trotzdem noch mit float machen oder muss ich dazu mit position agieren?

Hoffe es ist jetzt etwas klarer was ich möchte.

Gruß

Pixelaner · 01.10.2012

AW: div in div horizontal zentrieren

Damit das Float nicht gebrochen wird, ist zwangsläufig ein "Eltern-DIV" mit einer angegebenen Breite notwendig. Der Aufbau Sieht so aus, dass du einen Wrapper hast (900px Breit) der die Container: Header, Main, Footer besitzt. In den Main-Container packst du deine Boxen und richtest den Main per margin:20px auto; im Wrapper DIV mittig aus.

Das sollte funzen.

_tnt_ · 05.10.2012

AW: div in div horizontal zentrieren

Vielen Dank für deine Antwort. Ich habe das jetzt mal probiert.

HTML:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FotoPort</title>
<link href="style.css" type="text/css" rel="stylesheet" /> 
</head>
    <body>
        <div id="container">
<!-- -----|----- HEADER -----|----- -->
            <div id="header">
                <h1>Header</h1>
            </div>
<!-- -----|----- Ende-HEADER -----|----- -->
<!-- -----|----- MAIN -----|----- -->
            <div id="main">
				<div id="eins">
					<p>Eins</p>
				</div>
				
				<div id="zwei">
					<p>Zwei</p>
				</div>
				
				<div id="drei">
					<p>Drei</p>
				</div>
				
				<div id="vier">
					<p>Vier</p>
				</div>
				
				<div id="fuenf">
					<p>Fuenf</p>
				</div>
				
				<div id="sechs">
					<p>Sechs</p>
				</div>
            </div>
<!-- -----|----- Ende-MAIN -----|----- -->
<!-- -----|----- FOOTER -----|----- -->
            <div id="footer">
				<h1>Footer</h1>
            </div>
<!-- -----|----- Ende-FOOTER -----|----- -->
        </div>
    </body>
</html>

CSS:

Code:

body{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    font-size: 15px;
}

#container{
	width: 900px;
	margin: 0px auto;
}

#header{
background: rgb(30, 30, 30);
}

#main{
	margin: 20px auto;
}

#footer{
	background: rgb(30, 30, 30);
}

#eins, #zwei, #drei, #vier, #fuenf, #sechs{
	width: 200px;
	height: 200px;
	background: rgb(14, 14, 14);
}

#eins{
	float: left;
}

#zwei{
	float: left;
}

#drei{
	float: left;
}

#vier{
	clear: both;
	float: left;
}

#fuenf{
	float: left;
}

#sechs{
	float: left;
}

#footer{
clear: both;
}

h1{
padding: 0px;
margin: 0px;
}

Jetzt meine Fragen:

1) Wo kommt der Abstand zwischen Header und Main (Kacheln) her? Ich glaube das hängt mit dem main margin 20px zusammen. Nur warum ist dann kein Abstand zwischen Footer und Main?

2) Die Kacheln sind aber noch immer nicht im Main zentriert. Wie kriegt man das hin?

3) Passt der Aufbau soweit mit den floats?

4) Muss ich auf etwas aufpassen, wenn ich mit padding und margin arbeite? Kann es sein das es zu Browser Schwierigkeiten kommen kann?

Vielen Dank schonaml.

Gruß

newbie50plus · 06.10.2012

AW: div in div horizontal zentrieren

Ich habe deinem ersten(!) CSS-Code lediglich dem div "container" und "main" je eine feste Breite zugewiesen und sie mit "margin: auto" ergänzt.
Ich denke, so geht's wohl.

Code:

body{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    font-size: 15px;
}

#container{
    width: 900px;
    margin: auto;
}

#header{
    background: rgb(14, 14, 14);
    height: 50px;
    border: 1px solid rgb(6, 68, 108);
    padding: 5px;
}

#main{
    background: rgb(14, 14, 14);
    border: 1px solid rgb(6, 68, 108);
    width: 840px;
    margin: 20px auto;
}

#footer{
    background: rgb(14, 14, 14);
    border: 1px solid rgb(6, 68, 108);
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

#text{
    width: 250px;
    height: 250px;
    padding: 10px;
}

#color-tl{
    background: rgb(30, 30, 30);
}

#color-tm{
    background: rgb(50, 50, 50);
}

#color-tr{
    background: rgb(70, 70, 70);
}

#color-bl{
    background: rgb(90, 90, 90);
}

#color-bm{
    background: rgb(110, 110, 110);
}

#color-br{
    background: rgb(130, 130, 130);
}

#left-distance{
    float: left;
    padding: 5px;
}

#middle-distance{
    float: left;
    padding: 5px;
    }

#right-distance{
    float: left;
    padding: 5px;
}

.clr{
    clear: both;
}

.cen{
    text-align: center;
    padding: 0px;
    margin: 0px;
}

Habe es in den gängigsten Browsern getestet: es funzt.
Ich hoffe, ich konnte dir etwas helfen.

L. G. Fred