# Div-Boxen nebeneinander



## schiese (8. August 2006)

Hallo,
ich möchte mich in CSS einarbeiten und bin gleich auf ein Problem gestoßen.
Un zwar kriege ich es nicht hin, das die beiden Boxen nebeneinander stehen! Wenn es Tabellen wären, würde ich in die erste bloß align="left" schreiben und ich habe sie nebeneinander, aber hier funktioniert es nicht!

```
<html>
<head>
<title>Div-Klassen</title>
<style type="text/css">
<!--

#haupt{
width:800px;
font-size:9pt;
font-family:Arial;
border:1px solid black;
padding: 10 10 10 10;
align:center;
}

#box1{
width:100px;
height:100px;
font-size:8pt;
font-family:Arial;
padding: 5 5 5 5;
border:1px solid black;
margin: 0 0 10 0;
}

//-->
</style>
</head>
<body>

<div id="haupt">

<div id="box1" align="left">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

<div id="box1">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

</div>


</body>
</html>
```

Danke schiese


----------



## Maik (8. August 2006)

Erweiter die CSS-Regel für die *#box1* mit der float:left-Eigenschaft und füge noch ein DIV*.clear* hinzu, damit nach den floatenden Boxen wieder der normale Textfluss im Dokument hergestellt wird.

Zudem hast du bei den padding- und margin-Werten die Einheit (px) vergessen.


```
#haupt{
width:800px;
font-size:9pt;
font-family:Arial;
border:1px solid black;
padding: 10px;
text-align:center;
}

#box1{
width:100px;
height:100px;
font-size:8pt;
font-family:Arial;
padding: 5px;
border:1px solid black;
margin: 0 0 10px 0;
float:left;
}

.clear {
clear:left;
}
```
Das zweite DIV mußt du in *#box2* umbenennen, da eine ID in einem Dokument nur einmal vergeben werden darf:


```
<div id="haupt">
     <div id="box1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
     <div id="box2">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
     <div class="clear"></div>
</div>
```


----------

