Feste und prozentuale Breite kombinieren?

[Dirk]

Hallo,

vielleicht steh ich nur grad derb aufn Schlauch oder habs noch nicht ganz begriffen, aber ich komme mit folgendem Problem nicht zu Recht:

Ich möchte ein CSS-Design erstellen, welches mittig ist und ein Breite von 80% hat. In diesen 80% sollen zwei Spalten angezeigt werden, eine mit einer festen Breite von 300px und eine, die den restlichen Platz einnimmt. Wie mache ich das denn?

Ich habe bisher:

<div style="width:80%">

<div style="width:300px;float:left;">
     </div>

<div style="width:100%;float:left;">
     </div>

</div>

Das klappt leider nicht, da die zweite Spalte aufgrund des 'width:100%' umbricht und die volle breite das äußeren 'div' einnimmt.

Jemand einen Rat?

Schöne Grüße und vielen Dank,
Dirk.

[Anschinsan]

Ausprobiert hab ichs nicht, aber mal auf Verdacht:

<div style="width:80%">

<div style="width:300px;float:left;">
     </div>

<div style="float:left; margin-left:310px;">
     </div>

</div>

Im zweiten div kannst du 100% nicht nehmen, weils da Schwierigkeiten mit den verschiedenen Browsern gibt. Mozilla und IE scheinen da gegensätzliche Interpretationen zu verwenden.

Anschinsan

[Gunnar Bittersmann]

Hello out there!

Ich möchte ein CSS-Design erstellen, welches mittig ist und ein Breite von 80% hat.

Du möchtest also links und rechts jeweils 10% Abstand.

html {  
  margin: 0;  
  padding: 0;  
}  
  
body {  
  margin: 0;  
  padding-left: 10%;  
  padding-right: 10%;  
}

Ich habe bisher:
<div style="width:80%">

Die Angabe kannst du dir nun sparen. Überhaupt solltest du dir Inline-Style-Angaben in style-Attributen saparen; das widerspricht dem Grundgedanken von CSS der Trennung von Dokumentstruktur und Präsentation. Und macht den Quelltext unübersichtlich. Also alles ins zentrale Stylesheet.

<div style="width:300px;float:left;">

Sollte dann gehen (mit dem eben gegeben Hinweis, an welche Stelle die Angabe hingehört).

Bist du sicher, dass du die Breite in Pixeln angebebn möchtest und nicht in em relativ zur Schriftgröße des Nutzers (die du nicht wissen kannst)?

<div style="width:100%;float:left;">

Die Breitenangabe brauchst du nicht.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Ich möchte ein CSS-Design erstellen, welches mittig ist und ein Breite von 80% hat.

Du möchtest also einfach nur links und rechts 10% Abstand:

html {  
  margin: 0;  
  padding: 0;  
}  
  
body {  
  margin: 0;  
  padding: 0 10%;  
}

Ich habe bisher:
<div style="width:80%">

Die Angabe kannst du nun sparen. Womöglich kannst du dieses div-Element sparen.

Du solltest dir auch Inline-Styel-Angaben in style-Attributen sparen, das widerspricht dem Grundgedanken von CSS der Trennung von Dokumentstruktur und Präsentation. Mache alle Angaben im zentralen Stylesheet, das macht auch den Quelltext übersichtlicher.

<div style="width:300px;float:left;">

Sollte dann so gehen (mit dem eben genannten Hinweis, an welcher Stelle die Angabe gemacht werden sollte).

Und bist du sicher, dass du die Breite in px angeben möchtest, nicht in em relativ zur Schriftgröße beim Nutzer (die du nicht wissen kannst)?

<div style="width:100%;float:left;">

Die Breitenangabe ist überflüssig.

See ya up the road,
Gunnar