Sven: Problem: DIV mit variabler Breite

Hallo ihr,

ich habe ein 3-spaltiges CSS-Layout, also 3 DIV-Elemente nebeneinander, mit jeweils prozentualer Breitenangabe:

Left 20%, Center 60%, Right 20%

In das Center-DIV soll ein weiteres DIV-Element (.box), das die volle Breite des mittleren DIVs ausfüllen soll. Muss sich also alles der Breite des Browsers anpassen. Das BOX-Div soll dann ein Hintergrundbild zugewiesen bekommen und sich der Breite anpassen.

Wenn ich aber in das Center-DIV ein weiteres DIV mit 100% Breite einfüge, wird das rechte DIV verdrängt und rutscht nach unten. Wie bekomme ich in das Center-DIV ein weiteres DIV, dass die verfügbare Breite ganz ausnutzt, ohne dass es sich breiter macht als es soll? Und ohne statische Angaben (Pixel) nutzen zu müssen?

Vielleicht kann ja jemand helfen, wär nett! Als URL habe ich meine Beispielseite genommen, da hat man es mal praktisch vor Augen.

Lg
Sven

  1. Grüße,

    Wenn ich aber in das Center-DIV ein weiteres DIV mit 100% Breite einfüge, wird das rechte DIV verdrängt und rutscht nach unten. Wie bekomme ich in das Center-DIV ein weiteres DIV, dass die verfügbare Breite ganz ausnutzt, ohne dass es sich breiter macht als es soll? Und ohne statische Angaben (Pixel) nutzen zu müssen?

    IMHO gleiche breite wie der umfassende div oder IMHO margin auf 0 oder gar keine angabe - div macht isch so breit es geht (AFAIK)

    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
    Boccaccio
  2. Hi Sven,

    eine genaue Antwort würde vorwiegend davon abhängen, wie du die horizontale Anordnung der drei divs technisch realisiert hast.

    Das hier z.B.

    <div style="background-color:yellow; width:20%; float:left">&nbsp;</div>
    <div style="background-color:grey; width:60%; float:left;">
      <div style="background-color:red; width:100%;">&nbsp;</div>
    </div>
    <div style="background-color:blue; width:20%; float:left;">&nbsp;</div>

    sollte darstellen, was du erreichen möchtest (wenn ich dich richtig verstanden habe ;-)

    Gruß
    Antipitch