3divs nebeneinander, das in der Mitte mit fester Größe

[Madden]

Hallo Liebe Community,

ich komme leider nicht weiter und brauche unbedingt einen helfenden Ratschlag. Ich möchte im Moment eine neue Seite basteln und stehe vor einem Problem.

Ich habe dem Beitrag mal ein Bild mit dem Aufbau der Seite angehängt, ich hoffe zusammen mit dem Quellcode wird das Problem schneller deutlicher.

Code: Alles auswählen

<div class="hg-oben-aussen"> // absolut positioniert, 100% breit
          <div class="hg-oben-innen">  // maximal 1720px breit, in der mitte von hg-oben-aussen
           <div class="hg-links">&nbsp;</div>  // sollte genau 283px breit sein, wenn die Auflösung es zulässt, sonst kleiner
            <div class="hg-mitte">&nbsp;</div>  // sollte immer genau 1024px breit sein
            <div class="hg-rechts">&nbsp;</div> // wie hg-links, nur mit anderem Hintergrundbild
          </div>
        </div>


Code: Alles auswählen

.hg-oben-aussen {
   position:absolute;
   z-index:-1;
   height:283px;
   width:100%;
}
.hg-oben-innen {
   margin:0 auto;
   min-width:1024px;
   max-width:1720px;
   height:283px;
}
.hg-oben-innen .hg-links {
   height:283px;
   width:3em;
   background-image:url("../images/lines_fade.png");
   background-repeat:no-repeat;
   float:left;
}
.hg-oben-innen .hg-mitte {
   background-image:url("../images/lines.png");
   background-repeat:repeat-x;
   width:1024px; height:283px;
   margin:0 auto;
   float:left;
   
}

.hg-oben-innen .hg-rechts {
   height:283px;
   width:348px;
   background-image:url("../images/lines_fade_right.png");
   background-repeat:no-repeat;
}


Frage: Wie schaffe ich es, dass die beiden Container hg-links und hg-rechts kleiner werden, wenn die Auflösung kleiner wird, hg-mitte aber immer 1024px breit bleibt?

Ich hoffe ich habe alle notwendigen Infos gepostet, ansonsten fragt ruhig nochmal nach.


Vielen vielen Dank,
Alex

[Plinvieh]

Wie wäre es wenn du die für diese beiden Elemente statt "px" "%" benutzt? da musst du vllt. erstmal ein bisschen rumprobieren wie es gut aussieht aber sonst...

[Madden]

Danke Plinvieh für die schnelle Antwort,

habe ich auch schon dran gedacht, aber die beiden Elemente müssen ja bünndig an dem mittleren Element anliegen, weiß noch nicht ob ich das so hinbekomme. Aber ich probiere es erstmal, danke dir.

[Madden]

Klappt so leider auch nicht.

Das Problem ist ja, dass der Container in der Mitte genau in der Mitte sein soll und die anderen beiden kleiner werden (bis sie letztendlich verschwinden), wenn das Browserfenster verkleinert wird bzw. die Auflösung niedriger ist.

Ich gebe fürs erste an diesem Problem auf und werde es später mittels Javascript lösen.
Falls doch noch jemand eine elegantere Lösung hat würde ich mich wirklich sehr freuen.

Gruß
Alex

[Madden]

(Das Problem mit den Prozentangaben war übrigens, dass bei einer Fensterbreite von 1024 Pixeln die Container links und rechts immer noch ein paar Pixel groß waren und das Mittelstück daher in die Zweite Reihe gerutscht ist.)

[djheke]

Meinst du es so
http://www.gipspferd.de/css/anleitung/a1/a1.php

[Madden]

Unglaublich geil, vielen vielen vielen Dank!