4 spalten layout

feinshdens · 6. Oktober 2010

hab diesen Code für ein 4 spalten layout erstellt

jetzt interessiert mich was ihr davon hält

würdet ihr es auch so machen
macht das jemand mit position absolut

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<div id="cont">
<div id="_1">erste box</div>
<div id="_2">vierte box</div>
<div id="_3">dritte box</div>
<div id="_4">zweite box</div>
</div>
</body>
</html>

Alles anzeigen

CSS

Code

#cont {
width:800px;
}
#_1 {
width:200px;
height:200px;
background-color:red;
float:left
}
#_2 {
width:200px;
height:200px;
background-color:yellow;
float:right;
}
#_3 {
width:200px;
height:200px;
background-color:green;
float:right;
}
#_4 {
margin-left:200px;
width:200px;
height:200px;
background-color:orange;
}

Alles anzeigen

Gruß

Basi · 6. Oktober 2010

Das würde ich so lösen:

Code

* {
margin: 0;
padding: 0;
}
div#cont {
}
div.contBox {
float: left;
}
div.boxEins {
width: 200px;
height: 500px;
background-color: red;
}
div.boxZwei {
width: 200px;
height: 500px;
background-color: pink;
}
div.boxDrei {
width: 200px;
height: 500px;
background-color: blue;
}
div.boxVier {
width: 200px;
height: 500px;
background-color: green;
}
div.clear {
clear: both;
}

Alles anzeigen

Code

<div id="cont">
<div class="contBox boxEins"></div>
<div class="contBox boxZwei"></div>
<div class="contBox boxDrei"></div>
<div class="contBox boxVier"></div>
<div class="clear"></div>
</div>

Alles anzeigen

feinshdens · 6. Oktober 2010

bravo

find ich super

das heißt alles in der box cont wird links gefloatet bis clear

gefällt mir

Gruß

EDIT

hatte übersehen das zwei classen für die boxen definiert sind

warum?

damit du float nicht in jeder box definieren musst?

oder gibt es da nocht weitere gründe

Sarkkan · 6. Oktober 2010

"Peter1978" schrieb:

EDIT

hatte übersehen das zwei classen für die boxen definiert sind

warum?

damit du float nicht in jeder box definieren musst?

oder gibt es da nocht weitere gründe

Alles anzeigen

Da hat man dem was gezeigt.. <.< xD

Öhm, ja ich denke doch.
Wenn du es jetzt sogar noch genauer/besser machen willst, würde ich die widht und heigt angaben ebenfalls da rein packen.. .__.
Dann hast duauf jedenfall immer 4 gleiche und musst das nicht jedesmal neu definieren

Basi · 7. Oktober 2010

Es ging mir darum das ja die Steuerung z.B. links breiter sein könnte als der Inhaltsbereich daneben z.B.,

deshalb habe ich da gleich 2 Klassen definiert damit man alles separat einstellen kann.

So lange im div#cont nichts anderes drinne steht kann man sich die Klasse ja auch sparen:

Code

* {
margin: 0;
padding: 0;
}
div#cont {
}
div#cont > div{
float: left;
}
div.boxEins {
width: 200px;
height: 500px;
background-color: red;
}
div.boxZwei {
width: 200px;
height: 500px;
background-color: pink;
}
div.boxDrei {
width: 200px;
height: 500px;
background-color: blue;
}
div.boxVier {
width: 200px;
height: 500px;
background-color: green;
}
div.clear {
clear: both;
}

Alles anzeigen

Code

<div id="cont">
<div class="boxEins"></div>
<div class="boxZwei"></div>
<div class="boxDrei"></div>
<div class="boxVier"></div>
<div class="clear"></div>
</div>

Alles anzeigen

Erklärung:
E > F: Selektiert jedes Element F, das ein Kind von E ist.

Also in diese Falle alle div's die in div#cont drin sind.

feinshdens · 7. Oktober 2010

mh fein

das gefällt mir

4 spalten layout

Ähnliche Themen

Responsive Layout mit Bildern und Text

Booststrap - Grid - Umbruch