• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Höhe von div-Boxen

M

Manni.KEULE

Mitglied
Hallo.
Ich habe auf meiner Seite die div-Boxen wie im Anhang skizziert angeordnet.
Die Box 2 (links unten) ändert die Höhe je nach Inhalt. Ich möchte das die Box 3 (rechts unten) jeweils die selbe Höhe einnimmt. Ist dies irgendwie machbar?
Der Abstand zwischen den Boxen hat wie auf der Skizze einen anderen Hintergrund.

Danke!
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    2,6 KB · Aufrufe: 5
Es gibt CSS-Lösungen (Stichwort Faux Columns), ich persönlich präferiere aber die Variante über Javascript die Höhen anzugleichen
 
bei den Faux Columns muss ich anscheinend mit Hintergrundgrafiken arbeiten, das muss nicht so sein.
Hab wegen der js Variante gesucht.
Hab das hier gefunden:
Code: 
<script type="text/javascript">
temp = document.getElemenById('main').offsetHeigth;
document.getElementById('sidebar').style.height = temp + 'px';
</script>';
funktioniert aber auch nicht.
Was ist da falsch?
 
Es geht auch mit ein Float/Margin-Layout

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fload/Margin-Layout </title>
<style>

* {
margin:0;
padding:0;
}

#wrapper {
width:80%;
margin:10px auto;
border:1px solid #000;
background:#edd;
}

#header {
margin:10px;
background:#aa9;
color:#fff;
}

#left {
margin-left:10px;
position:relative;
width:200px;
float:left;
z-index:99;
}

#content:before {
content:"";
position:absolute;
top:0;
left:-210px;
bottom:0;
width:200px;
background:#ada;
}


#content {
margin:0 10px 10px 220px;
background:#aee;
position:relative;
}

#content:after  {
content:"";
display:block;
clear:left;
}

#footer {
margin:10px;
clear:left;
background:#aa9;
color:#fff;
}

h1 , p {
padding:10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1>Homepage</h1>
</div><!--/header-->

<div id="left">
<p>Linke Spalte</p>
</div><!--/spalte1-->

<div id="content">
<p>Inhalt</p> <p>Inhalt</p> <p>Inhalt</p> <p>Inhalt</p> <p>Inhalt</p>
</div><!--/spalte2-->


<div id="footer">
<p>Footer</p>
</div><!--/footer-->
</div><!--/wrapper-->
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben