Ich versuche, eine Kopfzeile für eine Website zu gestalten, und ich möchte 4 Container in der Kopfzeile haben, in die ich verschiedene Benutzerelemente einfügen kann.
Die 4 Container müssen oben links, oben rechts, unten links und unten rechts innerhalb des Hauptcontainers der Kopfzeile positioniert werden.
Soweit kann ich das erreichen, was ich nicht kann, ist, dass der untere linke und der untere rechte Container mit den Böden ihrer Container auf der gleichen Höhe ausgerichtet sein müssen.
Wenn ich eine Höhe zuweisen #Bottom es funktioniert gut, aber ich will nicht, dies zu tun, da ich nicht vorhersagen kann, welche Steuerelemente auf der Seite sein wird und daher nicht wissen, welche Höhe zu setzen.
Es muss im IE7 funktionieren.
Ich hoffe, das macht alles Sinn.
Ich habe eine Beispielanwendung erstellt, um das Problem zu demonstrieren...
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
.clearFloats
{
clear:both;
}
#topLeft
{
float:left;
border: 1px solid blue;
height:50px;
}
#topRight
{
float:right;
border: 1px solid blue;
height:50px;
}
#bottom
{
position:relative;
border: 1px solid green;
}
#bottomLeft
{
float:left;
border: 1px solid red;
position:absolute;
top:0;
}
#bottomRight
{
float:right;
border: 1px solid red;
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="topLeft">top left</div>
<div id="topRight">top right</div>
<div class="clearFloats" />
<div id="bottom">
<div id="bottomLeft">bottom left</div>
<div id="bottomRight">bottom right<br />Some content<br />some more content</div>
<div class="clearFloats" />
</div>
</div>
</form>
</body>
</html>
