DIV-Container gleiche höhe

A

Alice

Erfahrenes Mitglied
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.

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

CSS: 
#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/
 
Hallo,

ich würde es so machen:
HTML: 
#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
 
Wenn du mit einem Float/Margin Layout leben kannst, dann kannst du dir die Clearfix Methode zu eigen machen.
Beispiel
Code: 
<!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.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück