Mion - ich nochmal,
nun ich habe ein größeres Problem in Bezg auf die Thematik mit verschachtelten Div Layer.
So siehts zur Zeit aus: http://www.schwofen.de/htmltest/schwofen_template.html
Im unteren Bereich ist nochmals ein zentraler Div Container, der in die zwei Bereiche Main und Tips unterteilt ist.
Um das Komplette Kontruckt liegt dann der Eigentliche Container.
Ich definiere diese wir folgt:
Maincontent Container (zwischen den gelben Linien) - linksbündig
#contentcontainer {
background-color:#FFF;
width:1000px;
height:auto;
margin-top:10px;
margin-left:0px;
margin-right:0px;
margin-bottom:10px;
}
In diesem Container dann die beiden DIVs für die Main Content und die News
#maincontent {
width:685px;
margin-left:10px;
margin-right:10px;
}
und hier die News / Tips im rechten Bereich
#newscontent {
width:250px;
height:auto;
float:right;
margin-left:10px;
margin-right:10px;
}
Der Seitencontainer, der das ganze Umschliesst definiere ich wie folgt:
#container {
background-color: yellow;
margin: 0 auto;
border: 3px solid #741518;
text-align: left;
}
/* für IE */
#container{
width: 1000px;
voice-familiy: "\"}\"";
voice-family: inherit;
width: 1000px;
}
/* für Opera */
html>body #container{
width: 1000px;
}
Wie man aber sieht, bricht der News Bereichs aus, anstatt der entsprechende DIV Container dynamisch vergrößert wird.
Habe ich ein Denkfehler ????
Komm einfach nicht weiter.
Gruß
Wombel
ich würde das float mit einem clear schließen. Entweder mit einem < hr/>
@charset "utf-8";
/* CSS Document */
hr {
clear:both;
visibility:hidden;
}
oder: mit einem <div class="klaerchen"></div>folgendem css
@charset "utf-8";
/* CSS Document */
.klaerchen {
clear: both;
line-height: 0px;
font-size: 1px;
height: 0px;
}
Schließen tuts du mit dem "clar" den content-container in dem die divs (Boxen) für content und news eingebettet sind. Also kommt das <hr /> oder die Box (div class="klaerchen") vor dem schließenden </div> des containers in dem die beiden boxen liegen.
Ich habe es bei deiner Seite nicht getestet sondern einfach mal so reingestellt.
LG & ciao...
Nabend,
hat leider nicht gefunzzt. Hier mal der passende HTML Teil.
<div id="contentcontainer">
<div id="newscontent">
<h1>Überschrift typ 1 -2</h1>
<h2>Überschrift typ 2-2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer .......</p>
</div>
<div id="maincontent">
<h1>Mainüberschift H1</h1>
<h2>Mainüberscrift h2 </h2>
<p>Contrary to ........</p>
</div>
<hr />
</div>
Die entsprechende Klasse habe ich dann mal übernommen.
#contentcontainer hr {
clear:both;
visibility:hidden;
}
Was mach ich denn falsch????
gruß
Wombel
N'abend,
wer richtig cleart, der hat auch keine Probleme mehr.
Danke Euer Hilfe bin ich dann auch drauf gekommen.
<div id="contentcontainer">
<div id="newscontent">
<h1>Überschrift typ 1 -2</h1>
<h2>Überschrift typ 2-2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer .......</p>
</div>
<div id="maincontent">
<h1>Mainüberschift H1</h1>
<h2>Mainüberscrift h2 </h2>
<p>Contrary to ........</p>
</div>
<!-- Hier muss der Clear hin, dann funzzt's -->
<div style="clear:both;"></div>
</div>
schön wenn es funktioniert, offensichtich war mein tip doch zu ungenau, aber ich habe das mal nur so reingestellt ohne mir genau das html anzusehen... & gedacht wer sich bei css auskennt, kriegt das schon hin.... *sorry*
LG & ciao....