# Div-Boxen ausrichten



## sprefer (20. November 2011)

Hallo zusammen,

ich stehe glaube ich gerade aufm Schlauch. 

Ich bastel gerade an einer Seite, diese soll mittig ausgerichtet werden, mittels eines wrappers.

Nun soll der Header zwei Bilder enthalten, eines links ausgerichtet (quasi der Banner) und rechts noch Text (für Login usw).

Leider schaffe ich es nicht, diese beiden Sachen ordentlich auszurichten, eben nach links und rechts. 

Hier der Code:

```
<div id="wrapper">
  <div id="header">
    <div id="logo" align="left"><img src="http://www.tutorials.de/images/logo.png" width="160" height="30" /></div>
    <div id="logheader" align="right"><?php if ($login == 1) 
	{ echo "<img src='images/logout.png' width='32' height='32' />"; }
	 else {echo "<img src='images/login.png' width='32' height='32' />";} ?>
    </div>
    <div id="menu">Home // usw</div>
  </div>
...
```

Dazu die CSS:

```
#wrapper {
	width: 970px;
	padding: 0 10px;
	margin: 0 auto;
	/*border:#000 1px solid;*/
}
#header {
	/*border:#333 1px solid;*/
	padding:5px;
	height:100px;
	width:970px;
}
#logo {
	width:160px;
	height:30px;
}
#logheader {
	width:60px;
	height:30px;
}
```

Kann mir bitte jemand einen Anstoss geben wo der Fehler liegt? Nach ewig hin und her habe ich die Divs mal übereinander, dann wieder alles verschoben usw... Der Knackpunkt ist sicher im <div align="left"...

Vielen Dank im Voraus
Sprefer

Edit: Habe jetzt in der CSS jeweils float verwendet, ist das denn CSS-konform richtig? Also so: 

```
#logo {
	float:left;
	width:160px;
	height:30px;
}
#logheader {
	float:right;
	width:60px;
	height:30px;
}
```


----------



## threadi (20. November 2011)

Die Frage gibt es öfter. Das Geheimnis ist die Reihenfolge im HTML-Code. Schau z.B. mal hier:
http://www.tutorials.de/css/381669-div-mittig.html


----------



## Starfox2007 (27. November 2011)

Also einmal würde ich die Div´s nicht im HTML Code ausrichten wie du es hier getan hast:

<div id="logheader" align="right">

Die kannst du im CSS ausrichten:


```
#logheader {
    width:60px;
    height:30px;
margin-right:0px;
}
```

für Text:


```
text-align:right;
```


zum zentrieren von Div Elementen benutze ich:

```
margin-left:auto;
margin-right:auto;
```


----------

