✔ Float in Container

Status
Nicht offen für weitere Antworten.
M

Malaxo

Erfahrenes Mitglied
Titel evt. nicht aussagekräftig.

Ich habe einen Container in der alle meine Div's drin sind

HTML: 
<div id="container">
	<div id="banner"></div>
	<div id="untermenu"></div>
	<div id="titelmenu"></div>
	<div id="titelcontent"></div>
	<div id="menu"></div>
	<div id="content"></div>
</div>

Folgender Doctype

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

In meinem CSS gestallte ich die Div's, nun hab ich die untersten 4 Div als Float damit die auch nebeneinander sind. Hab meinem Container einen Border gegeben, um zu sehen wie es aussehen würde, da hab ich bemerkt, dass die 4 Float Div's nicht eingebettet sind im FireFox im Internet Explorer gehts aber.

HTML: 
body {
	font-size: 14px;
	font-family: "Verdana", "Helvetica", sans-serif;
	/*background-image:url(bg.jpg);*/
}

div#container {
	margin: 0 auto;
	position: relative;
	width: 950px;
	border: 1px solid;
}

div#banner {
	height: 138px;
    width: 942px;
    border: 0px;
    background-image:url(03.gif);	
}

div#untermenu {
	height: 35px;
    width: 942px;
    border: 0px;
    background-image:url(05.gif);	
}

div#titelmenu {
	height: 35px;
    width: 182px;
    border: 0px;
    background-image:url(06.gif);
	float: left;	
}

div#titelcontent {
	height: 35px;
    width: 760px;
    border: 0px;
    background-image:url(07.gif);
	padding-right: 8px;
	float: right;	
}

div#menu {
	height: 369px;
    width: 182px;
    border: 0px;
    background-image:url(08.gif);
	float: left;	
}

div#content {
	height: 369px;
    width: 760px;
    border: 0px;
    background-image:url(09.gif);
	padding-right: 8px;
	float: right;	
}

Wie müsste man das verändern?

Grafik angehängt um es zu sehen. (Das ganze ist auch zentriert)
 

Anhänge

  • 24962attachment.jpg
    24962attachment.jpg
    33 KB · Aufrufe: 11
Floats werden nun mal aus den normalen Fluss entrissen, daher werde sie auch so dargestellt. Oder was genau ist dein Anliegen?

Ach ja: Welche Vorteile versprichst du dir von XHTML 1.1 im Gegensatz zu normalem HTML?
 
hm... schau dir meine Grafik an. Der Border sollte die 4 Float div's auch noch mit einbeziehn.
Ist es möglich überhaupt oder müsste man mit einer anderen Art die Float's umgehen?

Zum Doctype: keine, ich habs eigentlich nicht so mit denen, verstehe die nicht so ganz, daher nehm ich immer den. Bessere möglichkeit?
 
Wie bereits erwähnt, werden Floats aus den normalen Fluss entrissen. Daher ist das Verhalten und die Darstellung völlig legitim.

Malaxo hat gesagt.:
Zum Doctype: keine, ich habs eigentlich nicht so mit denen, verstehe die nicht so ganz, daher nehm ich immer den. Bessere möglichkeit?
Zum Vergrößern anklicken....
Da du die Vorteile von XHTML – etwa MathML – sowieso nicht nutzen wirst und der Internet Explorer zudem auch noch kein XHTML interpretiert – nicht einmal die kommende siebte Version –, kannst du getrost bei HTML bleiben. Dieses Denken, immer die neueste Technologie nutzen zu müssen, ist völliger Humbug, zumal sich die meisten mit der Materie gar nicht richtig auseinandersetzen.
 
Malaxo hat gesagt.:
[...] Hab meinem Container einen Border gegeben, um zu sehen wie es aussehen würde, da hab ich bemerkt, dass die 4 Float Div's nicht eingebettet sind im FireFox im Internet Explorer gehts aber. [...]
Zum Vergrößern anklicken....

Erweitere mal das Stylesheet mit folgender Regel:

Code: 
div.clear {
clear: both;
}
und notiere das DIV .clear nach den floatenden DIVs:

HTML: 
<div id="container">
	<div id="banner"></div>
	<div id="untermenu"></div>
	<div id="titelmenu"></div>
	<div id="titelcontent"></div>
	<div id="menu"></div>
	<div id="content"></div>

	<div class="clear"></div>

</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück