elite Mitglied
Angemeldet: 20.07.2004 Beiträge: 1005
Interessen: Coding, DLRG, Radsport
|
Verfasst am: 14.01.2010, 20:56 Titel:
Zwei div`s genau auf 100% Höhe |
|
|
|
|
Hi,
bin seit langem mal wieder nen bisschen am coden und hab gerade ein kleines Problem mit CSS, was ja sowieso noch nicht meine Stärke ist.
Schaut euch doch mal bitte folgenden Code an:
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
html{
height: 100%;
width: 100%;
}
img{
border: 0px;
}
*{
padding: 0;
margin: 0;
}
body{
background-color: #AFACA7;
height: 100%;
width: 100%;
font-family: Tahoma;
font-size: 9px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div style="width: 1200px; height: 100%; background-color: #000000; margin: 0 auto;"><!-- <<==== WRAPPER-->
<p>testabc</p>
<div style="width: 500px; background-color:#FF0000; height: 100%; float:left;"></div>
<div style="width: 500px; background-color: #00FF66; height: 100%; float:left;"></div>
</div>
</body>
</html>
|
Bevor ihr schimpft: Normalerweise lagere ich die CSS-Sachen extern aus, habe das jetzt alles mal in den Quellcode mit reingepackt, da es ja noch nicht so unübersichtlich ist.
Der erste div sorgt dafür, dass der nachfolgende Code mittig zentriert auf der gesamten Seite angezeigt wird. Darin eingeschlossen sind zwei divs nebeneinander, die durch die 100%-Angabe auch bis zum Browserrand reichen.
Jetzt kommt das Problem: Sobald über den zwei div`s ein Text, Bild, ect. steht (wie oben) gehen diese zwei div`s ÜBER den Browserrand (und auch das wrapper-div) hinaus, und zwar genau um die Höhe des Textes/Bildes. Ich möchte aber, dass alle drei div`s jeweils nur bis zum unteren Browserrand gehen.
Was mache ich falsch? |
|