✔ 3 divs neben 2 großen anderen

Status
Nicht offen für weitere Antworten.
Qualifying? Das war doch schon gestern. Oder gibt's davon 'ne Wiederholung (auf DSF?)?

mfg Maik
 
o_O bin auch schon voll kaputt in der Birne meinte eh das Rennen irgendwie dacht ich in dem Moment heute ist erst Samstag dabei is ja schon Sonntag
 
PHP: 
<html>
<head> <style type="text/css">
*{
margin:0px auto;
padding:0px auto;
}

#root{
	
	width:500px;
	min-height:0px;	
	height:0px;
}
.left {
	
	background-color:#f00;
	height:100%;
	float:left;
	width:100px;
}
.mid {
	float:left;
	width:300px;
	height:auto;
}
.mid .oben{
	background-color:#0ff;
	width:300px;
}
.mid .mitte{
	background-color:#f0f;
	width:300px;
}
.mid .unten{
	background-color:#ff0;
	width:300px;
}
.right {
	background-color:#00f;
	height:100%;
	width:100px;
	float:right;
}
</style></head>
<body>
<div id="root">
	<div class="left">
		links
	</div>
	<div class="mid">
		<div class="oben">
		unwichtig unwichtig
		</div>
		<div class="mitte">
		inhalt.inhalt
		</div>
		<div class="unten">
		unwichtig unwichtig
		</div>
	</div>
	<div class="right">
		rechts
	</div>
</div>
</body>
</html>

IE8 macht was ich erhoffte ...
ABER
FireFox macht da sonst was aber nicht das was man denkt ...
kA warum height=0+overflow=visible -> height auto oder?!
 
Moin,

standardkonforme Browser behandeln deine height:0-Regel für #root als absolute Höhe, womit sie die Höhe dieses Elements auch nicht seinem Inhalt anpassen. Und wofür soll sie hier überhaupt gut sein?

Weil du für das HTML-Dokument keinen Doctype deklariert hast, schalten alle Browser in den "Quirksmode", und in diesem proprietären Darstellungsmodus verhält sich IE8 wie IE6, der die height-Eigenschaft grundsätzlich als "Mindesthöhe" (miß)interpretiert.

Würdest du die Seite mit einem entsprechenden Doctype versehen, mit dem das Dokument den Browsern im standardkonformen Modus übergeben wird, verhält sich IE8 genauso standardkonform, wie z.B. Firefox.

mfg Maik
 
Ebenso würde ich diese Regel korrigieren:

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

die im Orginal korrekterweise so lautet, um in den Browsern ihre diskrepanten Initialwerte dieser beiden Eigenschaften auf null zurücksetzen:

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

Ansonsten läufst du Gefahr, dass die Browser bei allen im HTML-Dokument enthaltenden Block-Elementen einen automatischen Außen- und Innenabstand zur linken und rechten Seite vorsehen, wo er überhaupt nicht erwünscht ist, wie z.B. bei einem CSS-Listenmenü, dessen Listeneinträge <li> dann nach rechts eingerückt werden, obwohl sie linksbündig ausgerichtet sein sollen.

mfg Maik
 
Maik hat gesagt.:
Ebenso würde ich diese Regel korrigieren:

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

die im Orginal korrekterweise so lautet, um in den Browsern ihre diskrepanten Initialwerte dieser beiden Eigenschaften auf null zurücksetzen:

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

Ansonsten läufst du Gefahr, dass die Browser bei allen im HTML-Dokument enthaltenden Block-Elementen einen automatischen Außen- und Innenabstand zur linken und rechten Seite vorsehen, wo er überhaupt nicht erwünscht ist, wie z.B. bei einem CSS-Listenmenü, dessen Listeneinträge <li> dann nach rechts eingerückt werden, obwohl sie linksbündig ausgerichtet sein sollen.

mfg Maik
Zum Vergrößern anklicken....

xD hatte ich nicht gelesen gehabt^ :D
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head> <style type="text/css">
*{
margin:0px;
padding:0px;

}


.left {
	float:left;
	background-color:#f00;
	width:100%;
}
.mid {
	width:50%;
	float:left;
	
}
.mid .oben{
	background-color:#0ff;
	
}
.mid .mitte{
	background-color:#f0f;
	
}
.mid .unten{
	background-color:#ff0;
	
}
.right {
	background-color:#00f;
	float:right;
	width:66%;
}
</style></head>
<body>
<div class="left">
	<div class="right">
		<div class="mid">
			<div class="oben">
			unwichtig unwichtig
			</div>
			<div class="mitte">
			inhalt.inhalt<br><br><br><br><br><br><br><br><br><br><br><br><br>
			</div>
			<div class="unten">
			unwichtig unwichtig
			</div>
		</div>
		rechts
	</div>
	links
</div>
</body>
</html>

Glaub jetzt hab ich mein kaffee mir verdient ;)
in diesem Sinne Guten Morgen
 
div mittig bei float

Hallo,

habe ein Problem und schon etliches versucht.
Habe ein Layout aus 3 divs mit float. Leider kann ich jetzt das mittlere div (m_root) nicht mittig ausrichten.

HTML: 
<body bgcolor="#FFF">
<div id="root">
	<div id="m_links"></div>
	<div id="m_root">
               <div id="m_top" ></div> 
	       <div id="m_mitte" ></div>
        </div> 
	<div id="m_rechts"></div>
 </div>
</body>


und hier noch das css dazu

HTML: 
html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}
#root {
width: 80%;
min-width:1026px;
margin:0 auto; /* alles mittig*/
height:100%;
}
#m_links {
float: left;
width:10%;
min-width: 145px;
height:100%;
background-image:url(../img/block_left_spacer.gif);
}
#m_root{
width:726px;
background-color:#FFF;
float:left;
margin:0 auto; sollte doch alles mittig machen oder
}
#m_top{
height:190px;
background-image:url(../img/freistern_logo.gif); /*header bild*/
background-repeat:no-repeat;
}
#m_mitte{
background-color:#FFF;
}

#m_rechts {
float: right;
width:10%;
min-width: 145px;
height:100%;
background-color:#6F0;
}



#m_root{
width:726px;
background-color:#FFF;
float:left;
margin:0 auto; sollte doch alles mittig machen oder? schätz es liegt an dem float
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück