3 DIVs nebeneinander, der mittlere hat eine feste Breite

[FraBle]

Hallo zusammen,

ich hab die folgende Problemstellung:

Ich habe ein Webdesign und möchte es in HTML mithilfe von DIVs und CSS umsetzen.

Das Design soll zentriert werden, jedoch sollen sich rechts und links 2 DIVs befinden, in denen sich jeweils ein anderes Hintergrundbild horizontal wiederholt.

Das mittlere DIV hat eine feste Breite, die beiden DIVs drumherum sollen den Rest des jeweiligen Randes ausfüllen.

Wie realisiere ich so etwas?

Grüße,

FraBle

[henman]

hallo,

Das mittlere DIV hat eine feste Breite, die beiden DIVs drumherum sollen den Rest des jeweiligen Randes ausfüllen.

wie man Blockelemente zentriert, kannst du nachlesen. Mit position, left, right, top, z-index und width:50% kannst du das dann so hinbasteln, wie du es willst. Letzteres allerdings nur auf die äußeren anwenden.

grüße,
henman

[FraBle]

Hi,

Das mittlere DIV hat eine feste Breite, die beiden DIVs drumherum sollen den Rest des jeweiligen Randes ausfüllen.

wie man Blockelemente zentriert, kannst du nachlesen. Mit position, left, right, top, z-index und width:50% kannst du das dann so hinbasteln, wie du es willst. Letzteres allerdings nur auf die äußeren anwenden.

Vielen Dank für die schnellen Antworten. Dafür liebe ich dieses Forum =)

Ich bin jetzt soweit, dass ich 2 DIVs habe, die zu jeweils 50 % die Website ausfüllen. Darin habe ich jeweils das passende Hintergrundbild und es wiederholt sich in der Horizontalen.

Jetzt ist nur noch mein Problem, dass ich es nicht hinkriege mein zentrales DIV mit der festen Breite zu zentrieren und gleichzeitig in den Vordergrund zu stellen.

Leider beißt sich

  
margin-left: auto;  
margin-right: auto;  

mit

  
position: absolute;  

Und nur bei position:absolute kann ich per z-index das DIV in den Vordergrund holen.

Gibt's da eine passende Lösung?

Grüße,

FraBle

[FraBle]

Jetzt ist nur noch mein Problem, dass ich es nicht hinkriege mein zentrales DIV mit der festen Breite zu zentrieren und gleichzeitig in den Vordergrund zu stellen.

Leider beißt sich

margin-left: auto;
margin-right: auto;

>   
> mit  
> ~~~css
  

> position: absolute;  
> 

Und nur bei position:absolute kann ich per z-index das DIV in den Vordergrund holen.

Ok, ich glaube, ich hab's jetzt selber gelöst =)

Ich habe ein DIV benutzt um die Überlappung zu erzeugen und es in den Vordergrund zu holen mit z-index.
Und in diesem DIV ist dann ein weiteres DIV, welches ich zentriert habe.

Jetzt sieht es klasse aus und funktioniert super im FF, IE und Chrome.

Vielen Dank für die superschnelle Hilfe. Das Forum ist klasse =)

[henman]

hallo,

Und nur bei position:absolute kann ich per z-index das DIV in den Vordergrund holen.

falsch, position:relative kann auch was mit z-index anfangen

grüße,
henman

[Sebastian Salzgeber]

Das mittlere DIV hat eine feste Breite, die beiden DIVs drumherum sollen den Rest des jeweiligen Randes ausfüllen.

Was du suchst nennt sich bei google "3 column fixed center fluid sides". Wenn du das so bei google angibst, wette ich, dass auf auf der ersten Seite deine Lösung finden wirst.

Grüße
Sebastian S.