gefloatete Container sollen gleiche Länge haben

PHP-Fan · 16. Oktober 2012

Hallo,

ich stehe vor einem Rätsel.

CSS:

Code:

.clear-both
{
	clear: both;
}

.center
{
	margin: 10px auto 10px auto;
        width: 740px;
	border: 1px solid #003266;
}

.content-left
{
	float: left;
	width: 218px;
	padding: 10px;
	color: #ffffff;
	background-color: #003266;
}

.contact
{
}

.content-right
{
	float: right;
	width: 482px;
	padding: 10px;
	background-color: #ffffff;
}

HTML:

  <div class="center">
      <div class="content-left">
        Text, links, oben

         <div class="contact">
            Text, links, unten
          </div>
      </div>
	
      <div class="content-right">
        Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
        Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
      </div>
	
    <div class="clear-both"></div>
  </div>

Aussehen tut das ganze so:

Ich möchte nun folgendes umsetzen:

1.) Der linke, blaue Container, soll immer so lang sein, wie der rechte Container
2.) "Text, links, unten" soll immer ganz unten im blauen Container sein

Ich habe sämtliche Versuche mit absoluter Positionierung, height: 100% versucht - nichts hilft.

VIELEN DANK FÜR EURE HILFE!

djheke · 16. Oktober 2012

So müsste es funktionieren.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Tabs mit CSS3</title>
<meta charset="utf-8"/>
<style type="text/css">


* {
 margin:0;
 padding:0;
 list-style:none;
 outline:none;
}


.clear-both
{
    clear: both;
}
 
.center
{
    margin: 10px auto 10px auto;
        width: 740px;
    border: 1px solid #003266;
}
 
.content-left
{
    padding:5px;
    margin-right:482px;
    color: #ffffff;
    background-color: #003266;
 position:relative;
 padding-bottom:60px;  /* etwa für zwei Zeilen + Luft nach unten */
}

.content-left:after {
 content:"";
 display:block;
 clear:both;
} 
.contact
{

 position:absolute;
 bottom:0;
 
}
 
.content-right
{
    float: right;
    width: 482px;
    background-color: #ffffff;
}
</style>

</head>
<body id="body">

 <div class="center">
      <div class="content-right">
        Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
        Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
      </div>
      <div class="content-left">
        Text, links, oben  

         <div class="contact">
            Text, links, unten 
          </div>
      </div>
  </div>
</body>
</html>

gefloatete Container sollen gleiche Länge haben

PHP-Fan

Erfahrenes Mitglied

djheke

Erfahrenes Mitglied

Neue Beiträge