# DIV-Container gleiche höhe



## Alice (25. Mai 2012)

Hallo Zusammen. 

Ich habe 2 DIV-Container. Links die Sidebar und rechts den Content-Bereich. Nun möchte ich das beide DIV-Container die selbe Höhe haben.

So geht es zwar, jedoch finde ich nicht das es so gut ist.


```
<div id="main">
   <div id="sidebar">Nicht soviel Text</div>
   <div id="content">Sehr viel Text</div>
</div>
```


```
#main {
   overflow: hidden;
   height: 100%;
   width: 1000px;
}

#sidebar {
   width: 150px;
   float: left;
   padding-bottom: 32768px;
   margin-bottom: -32768px;
   background: #809FFF;
}
 
#content {
   width: 850px;
   float: left;
   padding-bottom: 32768px;
   margin-bottom: -32768px;
   background: #BFCFFF;
}
```

Hat jemand ne Idee wie ich das verbessern könnte?

Hier direkt im Online-Editor: http://jsfiddle.net/CP8dG/


----------



## stef03 (1. Juni 2012)

Hallo,

ich würde es so machen: 

```
#main {
   width: 1000px;
}
 
#sidebar {
   width: 150px;
   float: left;
   background: #809FFF;
   height: 500px;
}
 
#content {
   height: 500px;
   width: 850px;
   background: #BFCFFF;
}
```

Die "height" kannst du nach belieben ändern.

mfg Stefan


----------



## djheke (2. Juni 2012)

Wenn du mit einem Float/Margin Layout leben kannst, dann kannst du dir die Clearfix Methode zu eigen machen.
Beispiel

```
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Testseite</title>
	<style type="text/css">

* {
 margin:0;
 padding:0;
}

body {  background-color: ABC9FE;
}


#container {
   width: 800px;
   margin:100px auto 0 auto;
  background:pink;
  overflow:hidden;
}


#navigation-top {
  height: 50px;
  background:#575757;
}


#sidebar {
  float:left;
  width: 200px;
  background-color: pink;
}

#sidebar_rechts {
  float:right;
  width: 200px;
  background-color: pink;
}
#content {
  margin:0 200px;
  background: orange;
}

#content:after {
 content:".";
 clear:both;
 display:block;
 height:0;
 width:0;
 line-height:0;
 visibility:hidden;
}

#footer {
 clear:both;
 background:#ada;
}

p {
 padding:10px;
}
</style>
</head>
<body> 
<div id="container"> 
<div id="navigation-top">NAVIAGTION (TOP)</div> 

<div id="sidebar">
<h2>SIDE BAR LINKS</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div>
<div id="sidebar_rechts">
<h2>SIDE BAR RECHTS</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div>
<div id="content">

<h2>Inhalt</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div> 

<div id="footer">
<p>Footer</p></div>
</div> 

 </body>
</html>
```

Übrigens, deine vorgestellte Methode ist insofern problematisch, dass keine internen Verweise benutzt werden können, ohne das wichtiger Inhalt verloren geht.


----------

