# Div container neben- und untereinander anordnen



## bomberman (18. April 2007)

Hab ein kleines CSS Problem. Und zwar möchte ich mehrere kleine Boxen innerhalb eines DIVs nebeneinander und untereinander anordnen.

Bei einigen Lösungsansätzen überschreiten die Container das DIV-Elternelement, bei den anderen werden sie nicht nebeneinander angeordnet.

```
#cont_0{
margin:15px;
z-index:1;
position:relative;
width:250px;
left:20px;
border:1px solid #374752;
padding:0 10px 10px 10px;
}
#cont_1{
margin:15px;
position:relative;
width:250px;
left:280px;
border:1px solid #374752;
padding:0 10px 10px 10px;
}
```

Ziel soll eine Ansicht wie z.B. bei http://www.netvibes.com/ sein.

Hat jemand Ideen oder Vorschläge?


----------



## Maik (18. April 2007)

Hi,

mit Hilfe der float-Eigenschaft lassen sich die Spalten einrichten, und darin dann die Boxen untereinander anordnen.


```
#wrapper {
width: 610px;
margin: 0 auto;
}

#leftCol {
float: left;
width: 200px;
}

#centerCol {
margin: 0 205px;
}

#rightCol {
float: right;
width: 200px;
}

.box {
border: 1px solid #000;
margin-bottom: 5px;
text-align: center;
}
```


```
<div id="wrapper">
     <div id="leftCol">
          <div class="box">box 1</div>
          <div class="box">box 2</div>
          <div class="box">box 3</div>
          <div class="box">box 4</div>
     </div>
     <div id="rightCol">
          <div class="box">box 9</div>
          <div class="box">box 10</div>
          <div class="box">box 11</div>
          <div class="box">box 12</div>
     </div>
     <div id="centerCol">
          <div class="box">box 5</div>
          <div class="box">box 6</div>
          <div class="box">box 7</div>
          <div class="box">box 8</div>
     </div>
</div>
```


----------



## D-LuX (2. Mai 2007)

moin 

und wie würd ich das machen, wenn ich 2 div Boxen nebeneinander anordnen würde, das hab ich geschafft ...wie setz ich dann eine weitere box darunter ..also 2 kleine und darunter eine große box, die die größe der beiden kleinen von oben hat 

wenn ich eine weitere box erstelle, dann verzerrt mein ganzes design ...


----------



## Maik (2. Mai 2007)

Hi,

das ist ganz einfach 


```
#wrapper {
width: 600px;
margin: 0 auto;
}

#leftCol {
float: left;
width: 300px;
background: red;
}

#rightCol {
float: right;
width: 300px;
background: yellow;
}

#centerCol {
clear: both;
background: green;
}
```


```
<div id="wrapper">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
</div>
```


----------



## D-LuX (2. Mai 2007)

auf dich hab ich seit heute morgen gewartet 

nunja, ich habe es mit position absolute hinbekommen ...vielleicht komm ich nochmal auf deine alternative zurück ..

nur mal zur verständnis. ich habe links das menü und rechts ein menü ..

in der mitte soll halt die content box aufgeteilt sein wie oben beschrieben 

das mit dem float wird demnach nicht so einfach funktionieren oder?
weil ich ganz rechts schon ein menü gefloatet habe und links ebenso


----------



## Maik (2. Mai 2007)

Sorry, ich kann dir jetzt nicht ganz folgen ...

Jeweils links und rechts eine Menüspalte und dazwischen der Inhalt? Und von welcher Aufteilung sprichst du jetzt? Hast du vielleicht eine Skizze zur Hand?

Und bitte halte dich an die Groß- und Kleinschreibung - siehe Netiquette Nr.15. Vielen Dank!


----------



## D-LuX (2. Mai 2007)

Ups ..wusst ich nicht 

                         ------               div header------ 
div menü links------          div content1------        div content2------             div menü rechts
                                       ------       div content3   ------ 
------               div footer------ 

Ist es so verständlicher? Generell hattest das richtig verstanden.
Habe es aber jetzt hinbekommen


----------



## Maik (2. Mai 2007)

Und welche Bedingungen sollen nun für welche der drei Content-DIVs gelten?

Zeig doch einfach mal deinen bisherigen Quellcode.


----------



## D-LuX (2. Mai 2007)

Ich habe es doch hinbekommen ...ist also erledigt 
Quellcode habe ich nicht hier auf dem mac, der liegt auf dem laptop 
Danke und schönen Feierabend!


----------



## Maik (2. Mai 2007)

D-LuX hat gesagt.:


> das mit dem float wird demnach nicht so einfach funktionieren oder?
> weil ich ganz rechts schon ein menü gefloatet habe und links ebenso


Dann schau dir mal dieses Modell an 


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

#wrapper {
width: 800px;
margin: 0 auto;
}

#header, #footer {
background: #000;
color: #fff;
}

#menue_left, #content_1, #content_2 {
float: left;
width: 200px;
}

#menue_left {
background: #aaa;
}

#content_1 {
background: #bbb;
}

#content_2 {
background: #ccc;
}

#menue_right {
float: right;
width: 200px;
background: #ddd;
}

#content_3 {
clear: both;
background: #eee;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="menue_left">menue_left</div>
     <div id="content_1">content_1</div>
     <div id="content_2">content_2</div>
     <div id="menue_right">menue_right</div>
     <div id="content_3">content_3</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
```


----------



## D-LuX (3. Mai 2007)

Moin 

Ja, so sieht es fast aus, nur dass content3 genau unter content1 und content2 liegt und nicht schon links unter dem menue_left beginnt


----------



## Maik (3. Mai 2007)

*content3* soll also im DIV *wrapper* mittig unter *content1* und *content2* sitzen?

Et voilà:

```
#content_3 {
clear: both;
width: 400px;
margin: 0 auto;
background: #eee;
}
```


----------



## D-LuX (3. Mai 2007)

Dankeschön 

Das wird jetzt mein Grundgerüst


----------

