psifactory
Erfahrenes Mitglied
Hallo,
habe folgendes Problem. Ich habe ein 3 Spaltenlayout (sind Module)! Allerdings sind diese immer unterschiedlich hoch. Ich will aber dass die Module automatisch alle die selbe Höhe haben. Und die Höhe muss aber dynamisch bleiben. Soll heißen dass three_column_1 - three_column_3 immer die Höhe des grössten Moduls haben.
Hier mal der Code:
habe folgendes Problem. Ich habe ein 3 Spaltenlayout (sind Module)! Allerdings sind diese immer unterschiedlich hoch. Ich will aber dass die Module automatisch alle die selbe Höhe haben. Und die Höhe muss aber dynamisch bleiben. Soll heißen dass three_column_1 - three_column_3 immer die Höhe des grössten Moduls haben.
Hier mal der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cordless Layout</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<!-- Begin OuterWrapper -->
<div id="outerwrapper">
<!-- Begin InnerWrapper -->
<div id="innerwrapper">
<!-- Begin nav_container -->
<div id="nav_container">
###navigation###
</div>
<!-- End nav_container -->
<!-- Begin Header -->
<div id="header">
###header###
</div>
<!-- End Header -->
<!-- Begin three_column_container -->
<div class="three_column_container">
<!-- Begin three_column_1 -->
<div class="three_column_1">
###three_column_1###
</div>
<!-- End three_column_1 -->
<!-- Begin three_column_2 -->
<div class="three_column_2">
###three_column_2###
</div>
<!-- End three_column_2 -->
<!-- three_column_3 -->
<div class="three_column_3">
###three_column_3###
</div>
<!-- three_column_3 -->
</div>
<!-- End three_column_container -->
<!-- Begin Footer -->
<div id="footer">
###footer###
</div>
<!-- End Footer -->
</div>
<!-- End InnerWrapper -->
</div>
<!-- End OuterWrapper -->
</body>
</html>
Code:
.three_column_container {
color: #333;
background: #0b0b0b;
margin: 0px;
border: 1px solid #1d1d1d;
border-width: 1px 0px 0px;
height: auto;
width: 962px;
float: left;
}
.three_column_1 {
color: #333;
background: #0b0b0b;
margin: 0px;
border: 1px solid #1d1d1d;
border-width: 1px 0px 0px;
width: 320px;
height:100%;
float: left;
}
.three_column_2 {
float: left;
color: #333;
background: #000000;
border: 1px solid #1d1d1d;
border-width: 1px 1px 0px;
margin: 0px;
width: 320px;
height:100%;
display: inline;
}
.three_column_3 {
color: #333;
background: #0b0b0b;
margin: 0px;
border: 1px solid #1d1d1d;
border-width: 1px 0px 0px;
width: 320px;
height:100%;
float: left;
}
