✔ Div Box überlappt parent div...

[Darian]

Hallo Leute,

ich wundere mich gerade wieso die innere Box da nicht automatisch mitgeht.
Dachte immer dass er das eigentlich schon tun müßte.

HTML-Code:

<div id="hotel_info">
	<div id="minibannertop">
		<img src="{$smarty.const.DOCUMENT_ROOT}images/minibanner.jpg" width="306" height="50" alt="KompassTop">
		<div id="hotel_name">
			TestText
		</div>
	</div>
	<div id="main_content">
		<div id="left">
			<div id="kompass_comment">
				Die zwei Zimmer 303 und 304 im 3. Stock führen auf einen wunderbaren Balkon mit bequemen Sofas und Seesicht in drei Himmelsrichtungen.  
			</div>
			left left left left left left left left left left left left left 
                        left left left left left left left left left left left left left left left left 
                       left left left left left left left left left left left left left left left left 
		</div>
		<div id="right">
			right right right right right right right right right right right right right right
                        right right right right right right right right right right right right right right
                        right right right right 
		</div>
	</div>
</div>

CSS-Code:

#hotel_info {
width:610px;
margin:5px auto;
}

#minibannertop {
background: url(../images/minibannerbg.jpg) repeat-x;
height:50px;
}

#minibannertop img {
float:left;
}

#hotel_name {
float:right;
line-height:50px;
font-size:100%;
color:#000080;
font-family:Tahoma;
}

#main_content {
background-color:#FFFFCC;
border-style:solid;
border-width:1px;
padding:10px;#
height:auto;
}

#main_content #left {
width:305px;
float:left;
}

#main_content #right {

}

/*#kompass_comment {
border-color:#FBB91E;
border-style:solid;*/
}

Und wie immer ein nettes Bild.

Habe schon herum probiert, und bis jetzt hat noch nichts gefholfen. Was mache ich da schon wieder falsch?

lg und danke für eventuelle Antworten
Darian

 

[Maik]

Hi,

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

ist sozusagen druckfrisch

Wenn du dann noch die beiden Syntax-Fehler im Stylesheet korrigierst, steht dem Glück nichts mehr im Weg:

#main_content {
background-color:#FFFFCC;
border-style:solid;
border-width:1px;
padding:10px;#
height:auto;
}

/*#kompass_comment {
border-color:#FBB91E;
border-style:solid;*/
}*/ /* gehört hierher */

 

[Darian]

Hallo Leute,

ja das geht jetzt natürlich auch, obwohl mir nicht ganz klar ist wieso man das so machen muß. Ist das ein Fehler in CSS, und wann wird das wohl behoben werden?

Ich muß nachher einen Punkt machen, der nicht angezeigt wird, und das Element auch keine Höhe hat, und dann praktisch nicht da ist.

lg aus Guatemala, und danke für die Infos
Darian

 

[Maik]

How To Clear Floats Without Structural Markup beantwortet deine Fragen, dass es sich hierbei nicht um einen Fehler in CSS handelt, sondern vielmehr ein Anwenderfehler ist, denn eine Floatumgebung muss auch "gecleart" werden, um wieder den normalen Textfluss im Dokument herzustellen, und was es mit dem anschliessenden Punkt auf sich hat, den niemand in der Seite zu Gesicht bekommt.