Gleichlange DIVs

johnpatcher · #1 (**permalink**) 16.09.2006, 18:07

Hey,

ja, ich weiß, dass es schon oft besprochen wurde, und ich habe auch etwas gefunden, z.B. faux columns. Allerdings scheint das nur mit 2 Spalten zu funktionieren (und mit absolut positionierten Designs). Außerdem verstehe ich nicht, wie dann mit dem Border eines Divs aussehen soll ...

Dann habe ich noch etwas mit der ":after" Pseudoklasse gefunden. Allerdings habe ich auch das nicht hinbekommt.

Problem ist es, dass ich ein 3 Spaltig gefloates Design erstellt habe. Vielleicht ist es ja auch der falsche Weg, aber bisher ist mir nichts über den Weg gelaufen, dass so flexibel ist. Zudem funktioniert es sowohl im Internet Explorer als auch im Firefox, was auch schonmal was Wert ist

.

Wäre sehr froh, wenn mir jemand dieses :after Pseudoelement erklären würde, bzw. sagen würde, wo ich das floating Div drumpacken muss.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">

body {
    margin-left: 20%;
}

div#head {
    width: 70%;
    font-weight: bold;
    border: 1px solid #000000;
    padding: 1px;
    margin-bottom: 3px;
    text-align: center;
}

div#links {
    background-color: #36F;
    width: 15%;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    float: left;
}

div#mitte {
    background-color: #C33;
    width: 40%;
    border: 1px solid #000000;
    float: left;
}
div#rechts {
    background-color: #6C3;
    width: 15%;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    float: left;
}
div#foot {
    maring-top: 3px;
    width: 70%;
    font-weight: bold;
    border: 1px solid #000000;
    padding: 1px;
    text-align: center;
    margin-top: 3px;
}

</style>

<title>3 Spalten Design</title>

</head>

<body>
    <div id="head">
        Header
    </div>
    <div id="links">
        Linkes Men&uuml;
    </div>

    <div id="mitte">Mitte
    <p>
    Jetzt will, dass alle 3 Spalten bis nach unten eingefärbt sind.
    </p></div>
    <div id="rechts">
        Rechtes Men&uuml;
    </div>
    <div style="clear: both;"></div>
    <div id="foot">
        Footer
    </div>
</body>

</html>

Oder ist diese Art von Design überhaupt nicht geeignet für solch ein Unterfangen ?

Hier ein Bild:

chincher · #2 (**permalink**) 16.09.2006, 18:44

faux columns gedöns klappt selbst bei drei spalten und float containern, gut deine prozentangaben sind kritisch in bezug auf faux columns

ulle · #3 (**permalink**) 16.09.2006, 20:29

Schau Dir mal diesen Thread [display: table;] an.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fullscreen Container mit internen divs	purewhite	(X)HTML	1	02.11.2009 15:24
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Höhenanpassung von divs	localex	CSS	1	21.11.2007 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
Browser-Problem bei Positionierung von DIVs	mickropixel	CSS	3	20.09.2004 16:25