Endlich mal ein Browser-Prob... (DIVs und Floating in allen nicht-IEs)

Status
Nicht offen für weitere Antworten.
D

dshock

Mitglied
Hollerö zusammen!

So langsam verzweifel ich wahrlich.... ich möchte gerne folgendes Konstrukt erstellen:

prob.png


->hier<- zur Beispiel Seite.

Erklärung:

Der Head soll eine variable breite haben, die Navi hat eine feste, Content soll wieder variabel sein, genauso wie Foot.

Folgendes habe ich:

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">
<title>DIV Prob</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
  <div id="head">
    <h3>HEAD</h3>
    soll immer 100% breit sein
  </div>
  <div id="nav">
    <h3>NAV</h3>
    soll immer 150px breit und immer 100% hoch sein
  </div>
  <div id="content">
    <h3>CONTENT</h3>
    soll immer 100% breit sein (minus den 150px der Navi)
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce placerat quam et nisl. Nunc sed metus. Sed aliquet, pede ac ullamcorper facilisis, nisl pede luctus purus, non egestas quam ante quis justo. Nullam facilisis placerat massa. Aliquam erat volutpat. Sed metus. Praesent metus. Vestibulum dictum eleifend sem. Morbi quis diam sit amet nisl accumsan tincidunt. Suspendisse ultricies diam ac wisi. Quisque ante. Fusce nulla. Pellentesque lobortis, mauris ut adipiscing mattis, nulla enim feugiat velit, quis dictum elit wisi vitae lorem. </p>
  </div>
  <div id="foot">
    <h3>FOOT</h3>
    soll immer 100% breit sein
  </div>
</body>
</html>

PHP: 
/* ALLGEMEINE EINSTELLUNGEN */

html, body{
	background:#FFF;
	font-size:11px;
	font-family:verdana, Arial, sans-serif;
	color:#000;
	height:100%;
	width:80%;
	margin:auto;
	}



/* Zellen (DIVs) */


#head{
	width:100%;
	background:#9C0;
	}

#nav{
	float:left;
	width:150px;
	background:#FC0;
	}

#content{
	float:right;
	background:#C00;
	}

#foot{
	width:100%;
	clear:both;
	background:#00C;
	}

und ->hier<- zur Beispiel Seite.


Mein Problem ist, dass alle nicht-IEs den content-DIV unter der Navi, und nicht neben der Navi anzeigen.... nur wieso?!


Für Eure Hilfe schon einmal vielen herzlichen Dank :)
 
nimm mal einen der floats weg.. also, entweder bei content oder bei nav. Bei mir hat sich sowas auch schonmal gebissen :)
 
Hallo und ersteinmal danke für die schnelle Antwort!

Leider komme ich auch so nicht auf gewünschtes Ergebnis: ->click<-

Hm... wie bekomm ich denn den navi-DIV so, dass er bis zum foot reicht? "height:100%" bringt leider nicht den gewünschten Erfolg ?!

?

Nochmals danke :)
 
JETZT erinnere ich mich... ok, hätte ich früher dran denken können, ich hatte die Probleme in Exakt der gleichen Reihenfolge bei inem ähnlichen Layout ;).
Okk, was ich damals getan habe:
Navi: Lassen wie sie ist, OHNE float.
Content: top und left angeben, also, links der abstand entsprechend der breite der Navi, oben der abstand entsprechend der header-höhe.
Allerdings hatte mein layout keinen footer... musst mal sehen wie du daran drehen kannst, im Zweifelfall mal weitere <div>'s aussen rum bauen...
 
Wie wär's mit Folgendem:
Code: 
html,
body {
	margin:			0 2%;
	color:			#000;
	font:			small verdana, Arial, sans-serif;
	background:		#fff;
}
#head {
	background:		#9C0;
}
#nav {
	float:			left;
	width:			150px;
	background:		#fc0;
}
#content {
	margin:			0 0 0 150px;
	background:		#c00;
}
#foot {
	background:		#00c;
}
h3 {
	margin:			0;
	padding:		0;
}
 
ok noch ein anderer Vorschlag:

Du setzt die Navi und den Content in einen anderen Div mit width:100%; (margin:0px;) dort setzt Du die gleiche Hintergrundfarbe wie die Navi ... wenn der Content dann länger wird, wird der Rahmen-Div auch erweitert ... durch den selben Hintergrund wie die Navi fällt dann gar nicht mehr auf, dass der Div zu Ende ist und wird bis ins Unendliche weitergeführt :o)

Ansonsten käme wohl nur die JS-Lösung in Frage ... :(

MfG
Ultraflip
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück