✔ "Normales" 3-Spalten-Layout mit anderer div-Reihenfolge

ZodiacXP

ZodiacXP

Erfahrenes Mitglied
Das "normale" 3-Spalten-Layout (http://www.tutorials.de/forum/css-tutorials/279637-zentriertes-layout-mit-drei-spalten.html) mit
HTML: 
<div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>

Möchte ich umändern in (was in diesem Beitrag auch verwendet wird für das folgende CSS)
HTML: 
<div id="leftCol">leftCol</div>
     <div id="centerCol">centerCol</div>
     <div id="rightCol">rightCol</div>
Oder sogar (was optimal wäre)
HTML: 
     <div id="centerCol">centerCol</div>
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>

Dazu habe ich es zum folgenden geändert:
CSS: 
div#leftCol {
	float: left; 
	width: 20%;
}

div#rightCol {
	margin: 0 0 0 80%;
	width: 20%;
}

div#centerCol {
	float:left;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background-color: #fff;
	margin: 0 20%;
	width: 60%;
	border-left: 0.17em solid #adf;
	border-right: 0.17em solid #adf;
}

Problem ist, dass der rechte div rechts unter centerCol gepackt wird.
Wie zwinge ich es nach oben auf die Seite?

EDIT: OMG ich Nuss! Das margin beim centerCol war noch auf beiden Seiten.
Hier kann man keine unbeantwortete Themen löschen :-(
 
Zuletzt bearbeitet:
Moin,

indem die width:20%-Deklaration für #rightCol entfernt wird - die Breite für diesen Spaltenblock ergibt sich automatisch durch seinen linken Außenabstand.

Desweiteren solltest du die Rahmendeklaration der mittleren Spalte besser an ein Nachfolgeelement übergeben, da diese gemäß dem CSS-Boxmodell zur width:60%-Deklaration hinzuaddiert wird, und folglich die Boxenbreite >60% beträgt.

mfg Maik
 
Hab beim Posten gesehen das margin für centerBox links und rechts war. Sorry.
Stimmt allerdings, das width bei dem rechten nehm' ich auch raus. Dangö
 
Habe es nochmal überarbeitet und nun sollte es besser sein:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="start.css">
<title>Title</title>
</head>
<body>
	
	<div id="wrapper" class="clearfix">
		<div id="centerCol">
			centerCol
			<div id="footer">footer</div>
		</div>
	</div>
	<div id="leftCol">leftCol</div>
	<div id="rightCol">rightCol</div>
	

</body>
</html>

CSS: 
* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

div#wrapper {
	float: left;
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

div#leftCol {
	float:left;
	width:20%;
	margin-left:-100%;
}

div#rightCol {
	float:left;
	width:20%;
	margin-left:-20%;
}

div#centerCol {
	margin: 0 20%;
}

div#footer {
	clear: both;
	position: absolute;
	bottom: 0;
	width: 60%;
	height: 20px;
	background: #fff;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* MacIE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end */

Wenn noch was stört bitte bescheid sagen.
Ansonsten war's das ^ ^ Danke!
 
Niemals :D Bei mir is sowas Transferaufgabe und gibt 1 :p War vorhin auch halbwegs abgeschrieben.
Mit überarbeitet meinte ich, dass
http://www.tutorials.de/forum/css-tutorials/280722-css-layout-mit-100-hoehe.html
(von vorhin) und
http://blog.html.it/layoutgala/LayoutGala01.html
zusammengeführt wurde, nur mal sauberer als im letzten CSS-Code.

Hab ich das vorhin richtig verstanden?
Den Rahmen an Nachfolgeelement übergeben:
HTML: 
		<div id="centerCol">
			<div style="border: 2px solid #ace;">centerCol</div>
			<div id="footer">footer</div>
		</div>

Da hab ich ein Problem mit, dass der Rahmen nicht bis nach unten reicht und komm auch mit keinem height, min-height etc. hinterher
 
Jaja, red dir deine Leistung nur schön :p

Zum Rahmen: Das Höhenproblem hast du aber ebenfalls, wenn du den Rahmen direkt für #centerCol deklarierst, denn nur die Mutterbox #wrapper besitzt im Viewport eine "tatsächliche" Höhe von 100% - die Höhe der Spaltenblöcke ergibt sich wiederum aber erst durch ihren Inhalt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück