Frage stellen
Ich habe einen DIV-Container bestimmter Größe. In diesem soll links, in der Mitte, rechts und unten ein weiterer Container sein.
Hier der Code:
- Code: Alles auswählen
<link href="test.css" media="screen" rel="stylesheet" type="text/css">
<div class="container">
<div class="oben">
<span class="logo"><a href="anbieter"> <img src="logo.png" alt="Anbieter"></a></span>
<span class="titel"> Beschreibung</span>
<span class="bewertung">
<a href="plus"> <img src="positiv2.png" id="plus"></a><br>
<a href="minus"> <img src="negativ.png" id="minus"></a>
</span>
</div>
<div class="unten">
<div class="footer">
Irgendein Text
</div>
</div>
</div>
- Code: Alles auswählen
.container {
height: 80px;
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 5px;
border-style: dotted;
border-width: 1px;
}
.container .oben {
height: 70px;
}
.container .unten {
height: 10px;
}
.container .logo {
height: 90%;
width: 90%;
border-style: dotted;
border-width: 1px;
border-color: white;
margin-top: 7px;
margin-bottom: 7px;
margin-left: 7px;
position: float;
float: left;
}
.container .logo img {
width: relative;
height: 90%;
}
.container .titel {
text-align: center;
font-family: 'Trebuchet MS';
font-weight: bold;
margin-left: 25%;
font-size: 1.3em;
position: relative;
clear: both;
}
.container .bewertung {
float: right;
margin-right: 7px;
margin-top: 5px;
}
.container .bewertung img {
width: 33px;
}
.container .footer {
clear: both;
width: 100%;
background-color: grey;
height: 10px;;
margin-top: 0px;
position: float;
}
Das Problem: Der äußerste Container und das Logo sind korrekt platziert. Der Rest scheint einfach um die Höhe des äußeren Containers nach unten verschoben zu sein. Die Verhältnisse zu den Seiten stimmen jedoch.
Weiß jemand woran das liegt? Gerne auch sonstige Verbesserungen oder Tips
