Boxen per <div>-Tag umschließen ?

[lange]

Hi,

ich versuche, zwei Boxen (menu und info) die nebeneinander liegen sollen, mit einer anderen (main) zu umschließen. Sobald ich aber float einsetze, funtz das Umschließen nicht mehr. Lasse ich float weg, liegen die Boxen nicht nebgeneinander. Was mache ich falsch?
Danke udn Grüße, j.

Hier die html-Seite

<div id="site">Meine Seite

<div id="main"><br>Menütitel</br> 

	<div id="menu">
		<br>Menüpunkt 1</br>
		<br>Menüpunkt 2</br>
	</div>

	<div id="info">
	Infos, Fotos, rechts...
	</div>

</div>

<div id="content">#content</div>
</div>

Hier die css-Einträge

#site { margin:10px auto; width:700px;
	text-align: center;
	border: thin dotted #000066;
}

#main { margin: 1px;
	padding: 1px;
	border: 1px solid #000000;
}

#menu { margin:1px 1px 1px 0px;
	padding: 1px;
	width: 225px;
	text-align: left;
	border: 1px solid #000066;
	float: left;
}

#info { margin:1px 0px 1px 0px;
	padding: 1px;
	width: 450px;
	text-align: left;
	border: 1px solid #000066;
	float: right;
}
#content { margin:2px;
	text-align: left;
	border: 1px dotted #44dd00;
	clear:both;
}

[His.Master's.Voice]

#menu und #info haben zusammen 675px an Breite. Dazu kommen noch rechts und links die margings & Paddings mit jeweils einem Pixel.
#site hat 700px an width mit margin 10px. Hast du nur das Problem, beim IE, der
hat ja evtl. den Box-Modelfehler.

Hast du schon mal versucht bei #info --> float:left zunehmen anstatt right?

[lange]

Hast du schon mal versucht bei #info --> float:left zunehmen anstatt right?

ja, das interessiert den ie aber nicht wirklich. ansonsten ist die width mit 700px ok.

Hast du nur das Problem, beim IE, der
hat ja evtl. den Box-Modelfehler

im moment habe ich es nur beim IE, konnte es mit mozff o.ä. noch nicht testen. was ist der box-moelfehler? werd danach mal suchen.

[AnnaStesia]

<div id="site">Meine Seite <div id="main"><br>Menütitel</br> <div id="menu"> <br>Menüpunkt 1</br> <br>Menüpunkt 2</br> </div> <div id="info">  Infos, Fotos, rechts... </div> <div style="clear: both; height: 1px; line-height: 1px; overflow: hidden;">&nbsp;</div></div> <div id="content">#content</div> </div>

Erklärung gibt es bei hero-masters Lieblings-Link oder hier in der TP-Suche zu float & clear, oder "wer float sagt, muss auch clear sagen" oder Ähnliches.

[lange]

danke erst einmal für die tipps. ja, float und clear , so richtig schlau werde ich daraus nicht. ich habe es jetzt über eine dummy-box gelöst:

...
<div id="info">
	Infos, Fotos, rechts
	</div>
<div id="dummy"></div>

</div>

#dummy { margin:0px;
	clear:both;
}
#content { margin:2px;
	text-align: left;
	border: 1px dotted #44dd00;
}

Wie so ein Platzhalter sag ich mal. im ie funtz es schon einmal...

[hero-master]

Zitat von AnnaStesia

Erklärung gibt es bei hero-masters Lieblings-Link

Jetzt wo du es sagst... Der könnte ja eigentlich auch in Boris' Signatur, dann brauchen wir nur noch auf Boris verlinken

@Thread:
Es geht auch ohne "Dummy" mit 2 unterschiedlichen Lösungen:
1. Gib dem umschließenden Div ein overflow:auto; mit
oder
2. Du baust ein :after ein. Das verteht zwar der IE nicht, aber der dürfte das normalerweise auch nicht falsch anzeigen, oder?

#main:after {
content:".";
visibilty:hidden;
display:block;
height:0;
width:0;
clear:left;
}

[lange]

hallo nico,
danke erst einmal, aber irgendwie klappt es damit nicht.

1. Gib dem umschließenden Div ein overflow:auto;

das hatte ich schon versucht, aber ohne erfolg. hm... und beim :after sieht es ebenso aus... rahmen um den text der main-box, darunter #menu und #info - im ie! beim mozff sind beide varianten ok.

was spricht eigentlich gegen die dummy-variante?

Zitat von lange

was spricht eigentlich gegen die dummy-variante?

gar nichts
manche sagen zwar, dass leere tags in etwa soviel unglück bringen wie ein irisches grubenpony mundgeruch hat, aber auch diesen gesellen kann man´s recht machen, indem man einfach mit nem cremigen br sanft in den textflow zurückmoved

<br style="clear: left;" />

[lange]

gut. dann bin ich ja beruhigt :-)
eine kurze frage - ich möchte innerhalb einer box ein img zentrieren - hab auch die whgf gelesen - und anschließend meiner info-box folgende zeile hinzugefügt:

#info { width:400px;
	border: 1px dotted #000066;
	float: right;
}
#info img { margin: 0 auto; }

war wohl schwachsinn, denn erst als ich

	text-align:center;

im #info einfügte (und den #info img wieder löschte), ging's. ich frag mich nur, warum? ist ein img ein blockelement wie z.b . ein tab.zelle zu betrachten?

hier noch der html-code dazu:

	<div id="menu"> <br>Menüpunkt 1</br> 
	<br>Menüpunkt 2</br> </div> 
	<div id="info"> <img src="bild.jpg"></img></div>

[hero-master]

Hi

Zitat von lange

denn erst als ich
text-align:center; im #info einfügte (und den #info img wieder löschte), ging's. ich frag mich nur, warum? ist ein img ein blockelement wie z.b . ein tab.zelle zu betrachten?

Ein Bild ist ein Inlineelement und genau aus diesem Grund funktioniert das auch nicht mir margin:0 auto; sondern eben mit text-align
Du gibst dem Blockelement, in dem das Bild ist ein text-align:center. Somit wird der Inhalt, sprich Elemente wie Text oder Bilder zentriert dargestellt.
Mit margin:0 auto, dass du direkt dem zentrierten Element zuweist, zentrierst du Blockelemente

[lange]

ok. Danke :-)