✔ Rechter Bereich wird nach unten gedrückt

[WIK-Lars]

Hallo Zusammen,

ich hatte eine Website erstellt, an der alles soweit gut zusammenpasste. Nun sollten ein paar kleine Änderungen vorgenommen werden, und ich bekomme Probleme mit dem Layout.

Die Website ist grundsätzlich in die Bereiche #header, #content, #right und #footer eingeteilt, wobei quasi zwischen header und content noch ein Menü ( <div class="menu"> ) eingbaut ist. Die Bereich #content und #right sind die Hauptinhaltsbereiche der Seite und stehen nebeneinander.

Nun sollen die Inhalte im #content-Bereich links und rechts um 20px eingerückt werden. Setze ich jedoch padding-left in #content auf 20px wird der rechte Bereich #right nach unten gedrückt. Das Ganze ist hier zu begutachten. ( Der rechte Bereich ist von einem blauen Rahmen umgeben, der sich aus Bildern zusammensetzt ).

Wie kann ich es so hinbekommen, dass dies nicht passiert? Mit margin hatte ich es auch schon probiert, aber das hat auch nicht so recht funktioniert (zumal ich da ja auch schon den IE6-Bug mit umgehe).

 

[Maik]

Hi,

hier kommt das CSS-Boxmodell zum Tragen, das besagt, dass sich die Breite eines Elements aus der width- und in deinem Fall der padding-Eigenschaft zusammensetzt. Somit wird die Box #content um den hinzugewonnenen Innenabstand breiter, und folglich das nachfolgende / benachbarte Element nach unten gedrückt, da der horizontale Platz im Anzeigebereich nicht mehr ausreicht.

Entweder berücksichtigst du den Innenabstand bei der Breitenangabe, was aber bei einer relativen Breitenangabe mit Prozent etwas schwierig werden dürfte (Stichwort: "Äpfel und Birnen"), oder aber du übergibst den gewünschten Innenabstand an ein Kindelement des DIVs #content.

 

[WIK-Lars]

Also so würde es im Firefox schon ganz ok aussehen.
Ich habe jetzt von der Gesamtbreite (99.99%) dem #content-Bereich eine Breite von 63% gegeben und außerdem für padding-right 25px eingetragen. Für den rechten Bereich #right habe ich eine Breite von 33% eingetragen.

(Ursprünglich wollte ich wie oben vorgeschlagen, noch zwischen #content und #right einen weißen div-Bereich einbauen. Dann hätte ich aber noch immer das Problem gehabt, dass der Scrollbalken des #content-Bereichs dicht am Text gelegen hätte.)

Allerdings sollten die Scrollbalken unten und rechts noch verschwinden.

 

[WIK-Lars]

Hm, mag sich vielleicht jemand den Link aus meinem 2.Posting angucken und das zwischen Firefox und IE 6 vergleichen?

Ich verstehe nicht wieso das so unterschiedlich dargestellt wird...

 

[Maik]

Hi,

ich empfehle dir die zweite vorgeschlagene Methode, also den Innenabstand an ein Nachfahrenelement zu übergeben, denn dein "Lösungsweg" ist einfach zu ungenau, und führt dazu, dass beim Verkleinern des Browserfensters das rechte Element umgebrochen wird.

 

[WIK-Lars]

Ok, hab' ich gemacht! (Siehe Link oben)

Nun fehlt mir nur noch ein Abstand zwischen der Scrollbar vom Content-Bereich und dem Text im Content

 

[Maik]

Dann gib einfach, wie von mir in diesem Thread schon zweimal umschrieben, dem DIV im #content-DIV den gewünschten rechten Innenabstand.

 

[WIK-Lars]

Jojo, hab' ich doch längst schon erledigt .

Jetzt fehlt mir eigentlich nur noch diese Sache mit der Seitenbreite und der Seitenhöhe.

Ich habe zum Unterbinden der Scrollbars im body-Bereich overflow:hidden eingetragen.
Die Seitenbreite beträgt 100% insgesamt, der Unterbereich #content erhält davon 64%, #right 33% und ein nun eingefügter Zwischenbereicht <div> beansprucht die restlichen 3%.
Dennoch wird die Seite nach rechts aus dem Bildschirmbereich rausgedrückt. ( hier mit Firefox öffnen ).

 

[Maik]

Setz mal die Polsterungseigenschaften des Viewports und Dokumentkörpers auf null:

html, body {
                width: 100%;
                height: 100%;
                font-family: Sans-Serif;
                overflow: hidden;
                margin:0;
                padding:0;
}

oder gleich mit dem Universalselektor * für alle im Dokument enthaltenden Elemente:

* {
margin:0;
padding:0;
}

was die Wiederholung der beiden Eigenschaftsangaben für jedes einzelne Element erübrigt.

 

[WIK-Lars]

Ok, ist schon besser, sieht aber noch nicht so wirklich gut aus.