• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Problem mit 2 Spalten und einer Zeile

M

Monteverdi

Neues Mitglied
Ich möchte folgendes Layout umsetzen: 2 Spalten mit einer Höhe von 66% und einer Breite von 50% des Browserfensters, darunter eine Zeile mit einer Höhe von 33% und einer Breite von 100% des Browserfensters. Mein Ansatz funktioniert leider nicht:

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=utf-8" />
<title>Titel</title>
<style type="text/css">
html, body {
    background-color: #333333;
    margin: 0;
    padding: 0;
    height: 100%;
}
#rahmen {
    background-color: #FFFFFF;
    width: 100%;
    margin: 0;
    min-height: 100%;
    height: auto !important; 
    height: 100%;
    overflow: hidden !important;
}
#left {
    background-color: #AAAAAA;
    width: 50%;
    margin: 0;
    min-height: 66%;
    height: auto !important;
    height: 66%; 
    overflow: hidden !important;
    float:left
}
#right {
    background-color: #888888;
    width: 50%;
    margin: 0; 
    min-height: 66%;
    height: auto !important;
    height: 66%; 
    overflow: hidden !important;
    float:right
}
#bottom {
    background-color: #DDDDDD;
    width: 100%;
    margin: auto; 
    min-height: 33%; 
    height: auto !important;
    height: 33%; 
    overflow: hidden !important;
}
</style>
</head>
<body>
<div id="rahmen">
    <div id="left">
          <p>left</p>
    </div>
    <div id="right">
          <p>right</p>
    </div>
    <div id="bottom">
        <p>bottom</p>
    </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Ich würde vorschlagen Du baust es etwas anders auf:

Die beiden "Spalten" lässt Du einfach über die gesamte Höhe laufen. Die Breite ist ja nicht das Problem.

Die Zeile darunter positionierst Du absolut nach unten und außerhalb des #rahmen und gibst ihm eine Höhe von 33 Prozent. Dadurch kann diese Zeile die beiden Spalten überlagern - wodurch Du genau das erhältst was Du offenbar willst.

Und bitte verwende, wenn Du Quellcode hier postest, die Code-Tags.
 
Oh, da war plötzlich mein Eintrag weg, hier noch einmal mit korrigierten Code-Tags:

Ich möchte folgendes Layout umsetzen: 2 Spalten mit einer Höhe von 66% und einer Breite von 50% des Browserfensters, darunter eine Zeile mit einer Höhe von 33% und einer Breite von 100% des Browserfensters. Mein Ansatz funktioniert leider nicht:

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=utf-8" />
<title>Titel</title>
<style type="text/css">
html, body {
    background-color: #333333;
    margin: 0;
    padding: 0;
    height: 100%;
}
#rahmen {
    background-color: #FFFFFF;
    width: 100%;
    margin: 0;
    min-height: 100%;
    height: auto !important; 
    height: 100%;
    overflow: hidden !important;
}
#left {
    background-color: #AAAAAA;
    width: 50%;
    margin: 0;
    min-height: 66%;
    height: auto !important;
    height: 66%; 
    overflow: hidden !important;
    float:left
}
#right {
    background-color: #888888;
    width: 50%;
    margin: 0; 
    min-height: 66%;
    height: auto !important;
    height: 66%; 
    overflow: hidden !important;
    float:right
}
#bottom {
    background-color: #DDDDDD;
    width: 100%;
    margin: auto; 
    min-height: 33%; 
    height: auto !important;
    height: 33%; 
    overflow: hidden !important;
}
</style>
</head>
<body>
<div id="rahmen">
    <div id="left">
          <p>left</p>
    </div>
    <div id="right">
          <p>right</p>
    </div>
    <div id="bottom">
        <p>bottom</p>
    </div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben