nicht angemeldet
Hi,
ich hätte hier folgendes HTML-Dokument, das ich gerne komplett mit Floats formatieren möchte. Das Element "frame_left" soll auf der gleichen Höhe wie "frame_right" stehen. Und das so, dass sie auch noch dann auf der gleichen Höhe stehen, wenn die Höhe von "frame_top" sich ändert. Hat jemand eine Idee, wie ich das realisieren könnte? Man müsste "frame_left" irgendwie über "frame_top" hinweg-floaten. Probiere schon die ganze Zeit herum, klappt aber irgendwie nicht so, wie ich das gerne hätte. BTW die Reihenfolge der DIV-Blöcke darf nicht geändert werden (DIV-Konstrukte können aber nach belieben drumherumgebaut werden), das macht das Ganze so schwierig :-/
THX & Gruß
Karl
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Unterschriftenverzeichnis</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script type="text/javascript" src="/javascript/main.js"></script>
<style type="text/css">
<!--
body {
background-color: white;
margin: 10px 9px 10px 10px;
padding: 0;
}
body
,input
,select
,table
,textarea {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
hr {
display: none;
}
img {
border: 0;
}
#main {
background-color: red;
overflow: hidden;
padding-left: 150px;
}
#frame_header {
background-color: green;
margin-left: -150px;
padding-right: 150px;
width: 100%;
}
#frame_right {
background-color: yellow;
float: left;
position: relative;
width: 100%;
}
#frame_top {
background-color: purple;
float: left;
position: relative;
width: 100%;
}
#frame_left {
background-color: blue;
display: inline; /* IE 6 */
float: left;
margin-left: -150px;
position: relative;
width: 150px;
}
#frame_footer {
background-color: brown;
clear: both;
margin-left: -150px;
padding-right: 150px;
width: 100%;
}
#frame_bottom {
background-color: gray;
float: left;
position: relative;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="frame_header">
frame_header
</div>
<hr>
<div id="frame_left">
frame_left
</div>
<hr>
<div id="frame_top">
frame_top
</div>
<hr>
<div id="frame_right">
frame_right
</div>
<hr>
<div id="frame_bottom">
frame_bottom
</div>
<hr>
<div id="frame_footer">
frame_footer
</div>
</div>
</body>
</html>