✔ Div Container vertikal verlängern

[sonnySTAR]

Hey Community,

nach sehr sehr langer Inaktivität versuche ich mich derzeit daran eine Homepage zu gestalten - mit Hilfe von CSS. Die von Photoshop erstellte Table-HTML gefällt mir nicht

Aber irgendwie peil ich es einfach nicht mehr. Ich habe ein Layout gestaltet, obs vom Code her sauber ist bezweifle ich, aber zumindest hat es bis zum jetzigen Punkt funktioniert.

Nun habe ich Testweise eine 2te NewsBox in den Content geschrieben und bemerke, dass sich der Hintergrund bzw der Div Container nicht nach unten verlängert. Die Newsbox überlappt nun sogar den Footer.

Damit ihr seht was ich meine:

http://tim-porzelius.de/testcss/

Bitte schimpft nicht über den unsauberen Code Ich muss mich erst wieder zurecht finden.

Habe leider auch durch Google so spontan nichts gefunden. Vielleicht könnt ihr mir einen Rat geben? ;-)

Danke vielmals für eure Geduld und eure investierte Zeit.

MFG

Tim

 

[para_noid]

Hi,

du hast dem div#contentbg eine feste Höhe gegeben UND innerhalb des Containers einige floats, die nicht beendet wurden.
Du müsstest also die height aus #contentbg rausnehmen, damit es sich in der Höhe dem Inhalt anpasst, und zum Beispiel nach dem div#contentspace ein

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

setzen (oder gleich eine Klasse wie clear zuweisen, da sind noch einige andere Stellen, an denen das clearing fehlt.)

Noch ein Hinweis: div-Container sind standardmäßig auf display: block; die Angabe brauchst du also grundsätzlich nicht.

Noch einer: zwecks Code & Sauberkeit, nutze am Besten einen Validierungsservice.

Und zum Dritten: auf der Hauptseite hast du ein "-->" zuviel drin, das wird oben auf der Seite angezeigt. Ich weiß, das war nicht die Frage, aber ich werd nicht schlafen können wenn ich das nicht erwähne.
BTW: schnieke Fotos da auf der Page.

 

[sonnySTAR]

Hi,

vielen Dank für Deine Mühe. Habe mich soeben an den "validen" Code gekümmert, nun schreit kein Alarm mehr.

Zudem hat das mti dem Hintergrund geklappt. Leider verschiebt es nun aber meine rechten Boxen (die contentsmallbox und contentbigbox) unter den Contentbereich. Habe nun einiges ausprobiert aber nun scheiter ich schon wieder. :-( Hast Du spontan die Lösung auf der Hand?

Ich muss mir ganz dringend nochmals die Basics durchlesen!

Soso, da hat man gleich die Mainpage inspiziert :-D

 

[para_noid]

Soso, da hat man gleich die Mainpage inspiziert :-D

Bin irgendwie auf die HauptURL gestolpert :suspekt:

Du hast das aktuell so

<div id="contentspace"></div>
<div style="clear: left;"></div>
<div id="contentsmallbox"></div>
<div id="contentbigbox"></div>
<div style="clear: right;"></div>

d.h. nach dem #contentspace kehrst du wieder zum normalen Fluss zurück, was bedeutet, dass die weiteren Divs unter dem ersten platziert werden. Damit die beiden kleinen Boxen rechts neben dem Inhalt bleiben, nimmst du das erste Clear raus. Beim letzten Clear clearst du dann beide Seiten.

<div id="contentspace"></div>
<div id="contentsmallbox"></div>
<div id="contentbigbox"></div>
<div style="clear: both;"></div>

Hier nochmal der Link zur Webmaster-FAQ bevor noch einer Alarm schlägt.

Ich muss mir ganz dringend nochmals die Basics durchlesen!

Zum Thema float & clear: Theorie

 

[sonnySTAR]

Herzlichen Dank an Dich. Werde mir nun die float&clear Theorie näher anschauen, bevor ich in die Vollen gehe.

Danke nochmals und einen schönen Tag wünsche ich Dir.

LG

Tim