3 Spalten Layout mit height:100%

von **fabelhaft** » 16.07.2010, 15:17

Hallo liebes Forum,
Das ist mein erster Eintrag in einem css-forum. 3 Tage Verzweiflung pur sind geung, jetzt hoffe ich auf Hilfe von euch.

Ich habe ein Layout mit div das in 3 Spalten aufgebaut ist. Es gibt insgesamt 4 solcher Spaltenreihen untereinander die 2te Reihe ist die Content Reihe. Das darin enthaltene mittlere div soll den content enthalten. Links und rechts davon die beiden div sind nur 19px bzw 22px breit und sollen einen Schatten mit nach unten ziehen.
Bisher bin ich soweit das eigentlich alle funktioniert auch alle div nebeneinander sind schon gleich hoch NUR die beiden Schatten wollen einfach nicht mit der länge des content mitwachsen.

Ich habe mir das ganze Layout später nochmal um all die element innerhalb des content vereinfacht gebaut und nach einigen Versuchen bin ich darauf gekommen das es an dem
<!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">
liegt. Wenn ich einen einfachen Doctype verwende passt es.
Frage: Wie bekomme ich die background images auch mit diesem Doctype angezeigt.

Mein vereinfachtes Layout das genauso reagiert wie es nicht soll:



<!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">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>

<STYLE type="text/css">
*{
margin:0;
padding:0;
}
html, body {
background-color: #333333;
margin: 0;
padding: 0;
}

#outer {
width:800px;
margin: auto;
height: 60px;
}
#L1 {
width:20px;
background-color:Teal;
float:left;

min-height: 100%;
height:auto !important;
height:100%;
}
#wrapper {
background-color: lime;
width: 760px;
float:left;

}
#L2 {
width:20px;
background-color:Teal;
float:right;

min-height: 100%;
height:auto !important;
height:100%;
}

#outer2 {
width:800px;
margin: auto;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}
#L3 {
width:20px;
background-color:yellow;
float:left;

min-height: 100%;
height:auto !important;
height:100%;
}
#wrapper2 {
background-color: #97C873;
width: 760px;
float:left;

min-height: 100%;
height:auto !important;
height:100%;
}
#L4 {
width:20px;
background-color:AliceBlue;
float:right;
min-height: 100%;
height:auto !important;
height:100%;
}

.clearall {
clear:both;
}
#footer {
height:45px;
background-color:coral;
}
</style>

</head>
<body>
<div id="outer">
<div id="L1"> </div>
<div id="wrapper">
header
<br />
111111111<br />
header
</div>
<div id="L2"> </div>
<div class="clearall"></div>
</div>

<div id="outer2">
<div id="L3"> </div>
<div id="wrapper2">
irgend ein Text
<br />
22222222222
</div>
<div id="L4"> </div>
<div class="clearall"></div>
<div id="footer"></div>
</div>

</body>
</html>

von **fabelhaft** » 16.07.2010, 15:22

Das <html> am Anfang das mir da reingeruscht ist gehört natürlich bei dem xhtml doctype nicht hinein - es ändert aber nichts am Problem.

von **sejuma** » 17.07.2010, 10:31

http://www.ohne-css.gehts-gar.net/0058.php

von **fabelhaft** » 19.07.2010, 08:53

Hallo Sejuma,

vielen Dank das funktioniert.
Es funktioniert aber nur weil es ein fixes Layout ist. Ganz zu Beginn war geplant die HP als Liquid Design zu erstellen, jetzt ist es aber doch ein fixes Deisgn geworden da habe ich Glück gehabt. Wie macht man den Schatten mit Liquid Designs?

3 Spalten Layout mit height:100%

3 Spalten Layout mit height:100%

Re: 3 Spalten Layout mit height:100%

Re: 3 Spalten Layout mit height:100%

Re: 3 Spalten Layout mit height:100%

Ähnliche Beiträge zu "3 Spalten Layout mit height:100%"

Wer ist online?