Hallo,
ich mache gerade eine Webseite wo ich bei einem Problem bin, was ich leider nicht lösen kann:
http://www.mwt-eventdesign.de/
Dort sind im Content Bereich zwei "Boxen" zu sehen. Das Angebot links und der Content rechts.
Der Code sieht dafür wie folgt aus:
<div id="content">
<div id="content_rand_oben"> </div>
<div id="content_rand_mitte">
<div id="contentbox_links">###ANGEBOTE###</div>
<div id="contentbox_rechts">###CONTENT###</div>
</div>
<div id="content_rand_unten"> </div>
</div>
Die CSS Anweisungen sind diese hier:
#contentbox_rechts {
margin-left:0px;
margin-top:0px;
padding-left:0px;
background-color: #b6c69f;
border:0px solid yellow;
}
#contentbox_links {
float: left;
width:210px;
margin-left:0px;
margin-top:0px;
padding:0px;
background-color: #b6c69f;
border:0px solid red;
}
Das Problem ist, das man ja sehen kann das links die Box mit dem Angebot unten über den Rand drüber hinausläuft. Das heißt der Content Bereich wächst nicht mit. Wenn ich float:left weglasse, dann steht zwar alles untereinander, aber die Content Box wächst komplett mit und alles bleibt in der Box.
Kann mir vielleicht jemand sagen wie man das lösen kann ?
Viele Grüße,
Visionsurfer
es gibt ein Sprichwort: wer float sagt, muss auch clear sagen.
Du musst danach unbedingt clearen. Ein float nimmt das Element aus dem Kontext heraus.
Hier ein guter Artikel dazu: http://dislabs.de/index.php?ac=labor&sub=1&id=2
Hallo,
vielen Dank für die schnelle Antwort.
O.K. sowas in der Richtung dachte ich mir schon, bzw. hat meine Suche schon ergeben. Allerdings verstehe, bzw. weiß ich nicht ganz wie ich das in meinem Fall anwenden muss.
Hast du vielleicht einen Tipp ?
Grüße,
Visionsurfer
Nachtrag:
Also ich habe mir den Beitrag der im Link steht am angeschaut. Soweit ja schön und gut, aber irgendwie hilft das nicht weiter.
Das ich mit Float die Boxen nebeneinander bekomme ich klar. Ist auf meiner Seite ja auch so.
Mein Problem ist das die Box mit dem "Angebot" nicht im Content Bereich bleibt. Das ist die Box die also hinter dem Content und der Angebotsbox liegt. Wenn man sich die grüne Box anschaut, dort wo der Text drin steht, sieht man unten einen kleinen Rand. Das ist also die umschließende Box. Letztendlich muss alles in der Box "content_rand_mitt" sein. Diese Box steht auf height:auto und passt sich dem Inhalt an. Wenn ich das floating ausgeschaltet habe, klappt das auch wunder. Halt alles untereinander, was leider falsch ist.
Versteht ihr was ich meine ?
Grüße,
Visionsurfer
Anscheinend hast Du nicht genau gekesen, was ich geschrieben hab - in dem Artikel ist das auch erklärt.
Du musst nach den beiden divs clearen !
In Deinem Fall reicht es, dem div #content_rand_unten ein clear:both; mitzugeben.
Hallo,
vielen Dank. Das sieht nun schon viel besser aus. Ich habe nach den beiden divs gecleart und nun passt es fast.
Leider gibt es nun das Problem das die Hintergrundgrafik vom rand_mitte nicht mehr weiterläuft.
Siehe www.mwt-eventdesign.de
Hast du eventuell noch einen Tipp ?
Viele Grüße,
Visionsurfer
leg ein div für den hintergrund an
und pack die box einfach hinter
die anderen
LG
Honk