CSS divs nebeneinander platzieren und zentrieren

kmuc · 5. Januar 2012

Ich bin nicht ganz so erfahren was CSS angeht und taste mich immer wieder mal an die Thematik ran. Trotzdem habe ich auch mit Hilfe von Google keine wirklich praktikable Lösung für folgendes Problem gefunden:

Ich möchte nun bspw. im Headerbereich meiner HP mehrere divs nebeneinander platzieren (Loginfelder, Logo, Menü). Das mache ich indem ich die Elemente entsprechend floate. Wie bekomme ich das Gesamtkonstrukt aus den 3 divs dann zentriert?

Ist float da der falsche Weg? Wenn ja, womit geht das besser/richtig?

Adam Gontier · 5. Januar 2012

Du packst alle 3 Divs in ein großes Div und zentrierst dann das große Div mit margin: 0 auto.

Außerdem hast du mit float:left die richtige Wahl getroffen.

kmuc · 5. Januar 2012

Ja, genau so hab ichs versucht, passiert aber nichts.
Weshalb ?

HTML:

<div id="header">
	<img id="logo" src="images/logo.jpg" />	
	<div id="login">
        </div>
</div>

Code:

#header {
background-color:#F00;
margin:0 auto;
}

#login {
font-size:10px;
color:#FFF;
float:left;

}

#logo {
float:left;
}

Adam Gontier · 6. Januar 2012

Versuch mal bitte folgendes:

HTML:

<div id="header">	
<div id="logo"></div>	
<div id="login"></div>	
</div>

Code:

#header{
margin: 0 auto;
float: left;
background-color: #F00;
}
#logo{
background-image: url("images/logo.jpg");
}
#login{
font-size: 10px;
color: #FFF;
}

+ BELA B. + · 6. Januar 2012

am Ende: <div style="clear: both"></div>

Crizzo · 7. Januar 2012

Wie soll denn #header zentriert werden, wenn es eine Breite von 100% hat? 100% zentriert, sieht genauso aus wie 100% am rechten oder am linken Rand. margin:0 auto, macht nichts anderes als die Abstände nach oben und unten auf 0 zu setzen und den die Abstände links und rechts so zu wählen, dass beide gleiche groß sind, ergo das Element in der Mitte. Breite von 100% => Abstände links und rechts 0 => zentrieren nicht möglich.
Also #header braucht einen Breite von kleiner 100%, sonst tut sich da gar nichts.

Ansonsten: http://little-boxes.de/little-boxes-teil1-online.html durchlesen. Spart dir viel Googlei.

ice-breaker · 7. Januar 2012

Grid-Systeme wie 960gs können da auch viel Zeit ersparen

gothix · 10. Januar 2012

nur mal als Hinweis: was haltet ihr statt Float von

Code:

display: inline-block !important;
display: block;

das !important und die 2. Zeile sind mal wider ne Extrawurst für den IE < 8...

Damit würde aber auch das clear:both am ende entfallen, zumal nicht-block-elemente wie span (ich weiß, das war nicht gefragt aber der Vollständigkeit halber) auch als block dargestellt werden müssen, um ihnen überhaupt eine Breite verpassen zu können.

Kokuswolf · 10. Januar 2012

Damit das funktioniert, was die Vorposter schrieben, braucht "header" eine feste Breite, damit der Auto-Wert von margin auch was zu berechnen hat. Ansonsten wäre Header einfach ein Block-Element, was in der Grundeinstellung 100% Breite einnimmt.

Hier die Quick'n'Dirty-Variante zum spielen:

Code:

<!DOCTYPE html>
<html>
<head>
 <style>
#header {
	margin:0 auto;
	width:400px;	
	background:red;
	}
 
#login {
	padding:10px;
	border:1px solid #000;
	float:left; 
	}
 
#logo {
	padding:10px;
	border:1px solid #000;
	float:left;
	}
 </style>
</head>
<body>

<div id="header">	
 <div id="logo">Box 1</div>	
 <div id="login">Box 2</div>
 <div style="clear:left"></div>
</div>

</body>
</html>

(Damit dies auch im IE funtioniert, muss das zusätzlich das Elternelement (hier <body>) das CSS-Attribut "text-align:center" und der wrapper (hier <div id="header"/>) wiederum "text-align:left;" bekommen.)

Ich kann mir aber vorstellen, das dies nun nicht ganz deiner Vorstellung entspricht. Es wäre für nähere Hilfe notwendig, weitere Aspekte "der drei zentrierten Float-Boxen" zu beschreiben

... dann ließe sich ggf. auch eine Variante ohne Float wählen, was diverse Vorteile hätte.

EDIT: Ich sehe gerade das im Post #6 schon auf die 100% eingegangen wurde. Habe ich wohl überlesen... :/

Daaron · 13. Januar 2012

Adam Gontier schrieb:
Du packst alle 3 Divs in ein großes Div und zentrierst dann das große Div mit margin: 0 auto.

Denk dran, margin: 0 auto funktioniert nur in Kombination mit einer Breitenangabe.

Adam Gontier · 13. Januar 2012

Daaron schrieb:
margin: 0 auto funktioniert nur in Kombination mit einer Breitenangabe.

Dem bin ich mir inzwischen auch bewusst.

Suche

CSS divs nebeneinander platzieren und zentrieren

kmuc

Cadet 4th Year

Adam Gontier

Gast

kmuc

Cadet 4th Year

Adam Gontier

Gast

+ BELA B. +

Gast

Crizzo

Redakteur

ice-breaker

Commodore

gothix

Newbie

Kokuswolf

Lieutenant

Daaron

Fleet Admiral

Adam Gontier

Gast

Ähnliche Themen