Padding in einem Div mit float
Anton
- css
Guten Tag Forum,
ein Layout sieht so aus. Auf der linken Seite gibt es ein Menü.
Auf der rechten Seite kommt der Inhalt. Im Inhaltsdiv ist auf der rechten Seite ein div für weitere Navigation, das 25% vom dem 75%igen Div ausmacht. Jetzt ist sämtlicher Text im 75% div aber direkt an den DIV-Rand geklatscht. Wenn ich dem 75%igen DIV aber nur ein padding 1em; verpasse passt das alles nicht mehr von der Breite und das 75% div wandert ganz an den linken Bildschirmrand. Weiß jemand Abhilfe ?
<div style="float: left; width: 25%;">Menü,etc</div>
<div style="float:left; width: 75%;">
<div style="float:left; width: 25%;">
Hier die Unternavigation.
</div>
Hier Text im 75% div, der aber aber ein padding haben soll. Also
nicht an den Rand geklatscht.
</div>
Hallo Anton!
Auf der rechten Seite kommt der Inhalt. Im Inhaltsdiv ist auf der rechten Seite ein div für weitere Navigation, das 25% vom dem 75%igen Div ausmacht.
Nach der Beschreibung müßte die Unternavigation doch float:right haben, oder?
Ansonsten wüßte ich nicht, was man außer padding machen könnte (vieleicht ein kleineres padding?).
Für die Unternavigation ein margin-right würde zumindest dort ein wenig Abstand bringen.
MfG
Götz
Hallo Götz,
Nach der Beschreibung müßte die Unternavigation doch float:right haben, oder? Ja da habe ich mich vertippt. Sieht natürlich so aus:
<div style="float: left; width: 25%;">Menü,etc</div>
<div style="float:left; width: 75%;">
<div style="float:right; width: 25%;">
Hier die Unternavigation.
</div>
Hier Text im 75% div, der aber aber ein padding haben soll. Also
nicht an den Rand geklatscht.
</div>
Also das Padding kommt also noch zu den 75%hinzu. Kann man einem DIV container folgende Breite geben? 75%-1em? Oder unterstützt CSS soetwas nicht ?
Gehen die in diesem Tutorial davon aus, dass diese weiße Box 100% des Bildschirms ausmacht?
Hallo Anton!
Ja da habe ich mich vertippt.
Ah ok. Ich hab mich nur ein wenig gewundert.
Also das Padding kommt also noch zu den 75%hinzu. Kann man einem DIV container folgende Breite geben? 75%-1em? Oder unterstützt CSS soetwas nicht ?
Ob man es laut CSS-Standard theoretisch könnte weiß ich nicht, ich nehme es aber nicht an.
Aber selbst wenn, würde das bestimmt eh kein Browser können befürchte ich.
Wie wärs damit, daß Du einfach die Breite auf 74% setzt und 1% padding machst, oder wäre das zuviel?
MfG
Götz
Hallo,
Wie wärs damit, daß Du einfach die Breite auf 74% setzt und 1% padding machst, oder wäre das zuviel?
Ach ne, das geht ja garnicht. Habe ganz vergessen, dass die Navigation aus Designgründen kein padding haben darf. Die muss direkt an den Rand vom 75% div.
Also nur der Inhalt vom 75% div soll einen Abstand zum umgebenden Zeug haben. Nehme ich aber ein <p style="margin: 1em;">Hier der Inhalt vom 75% div</p> funktioniert es nicht.
Hi,
<div style="float: left; width: 25%;">Menü,etc</div>
<div style="float:left; width: 75%;">
<div style="float:right; width: 25%;">
zunächst mal halte ich eine Breite in % für die Navigation ungeeignet, denn die Breite sollte sich in den meisten Fällen an dem Inhalt der Navigation orientieren und nicht an der Fenstergröße. EM wäre dann passender.
Aber zu Deinem Problem: Du brauchst dem Inhaltscontainer keine Weite zu geben, wenn Du ihn nicht floaten läßt.
Die rechte Navigation könntest Du evtl. auch vor den Inhaltscontainer setzen, je nachdem, wie das Layout geplant ist.
freundliche Grüße
Ingo
Hallo,
ein Layout sieht so aus.
Nein. So sieht vielleicht _dein_ Layout aus, aber nicht alle *SCNR*
Wenn ich dem 75%igen DIV aber nur ein padding 1em; verpasse passt das alles nicht mehr von der Breite und das 75% div wandert ganz an den linken Bildschirmrand. Weiß jemand Abhilfe ?
Du brauchst dem Inhalts-div diese Breite nicht zuzuweisen. Ein Block-Element nimmt ohnehin die maximal verfügbare Breite ein.
Viele Grüße
Patrick
Moin
Wenn ich dem 75%igen DIV aber nur ein padding 1em; verpasse passt das alles nicht mehr von der Breite und das 75% div wandert ganz an den linken Bildschirmrand. Weiß jemand Abhilfe ?
Was spricht dagegen, einen Außenabstand (margin) für den Inhalt zu definieren?
Möglich wäre ebenfalls ein Innenabstand (padding) für den den Inhalt.
Thomas J.