• 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
Werbung:
Es gibt CSS-Lösungen (Stichwort Faux Columns), ich persönlich präferiere aber die Variante über Javascript die Höhen anzugleichen
 
Werbung:
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