mehrere divs passend horizontal ausrichten

[smarty19]

Hallo! :)

ich bin momentan dabei, etwas in css zu bauen. Dabei bin ich bei weitem kein CSS Profi, komme aber trotzdem ganz gut klar.

Leider habe ich jetzt ein Problem, welches ich nicht alleine lösen kann.

Es geht um die horizontale Ausrichtung von div- Containern. In der Mitte habe ich einen zentrierten Cotainer mit fester Breite. Links und rechts davon soll jeweils ein container genau bis zum mittleren Container reichen, allerdings nicht überlappen.

Hier mein Beispiel:

http://ev-kirche-neckarsteinach.de/jos2/index.php

Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

Vielen Dank für eure Hilfe!!

[Matthias Apsel]

Om nah hoo pez nyeetz, smarty19!

Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

Du suchst mehrspaltiges Layout.

Matthias

[Gunnar Bittersmann]

@@smarty19:

nuqneH

Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

#oben_links, #oben_mitte, #oben_rechts  
{  
	height: 42px;  
	position: absolute;  
	top: 0;  
}  
  
#oben_mitte  
{  
	background: #25335A;  
	left: -moz-calc(50% - 465px);  
	width: 970px;  
}  
  
#oben_links, #oben_rechts  
{  
	width: -moz-calc(50% - 465px);  
}  
  
#oben_links  
{  
	background: #B57700;  
	left: 0;  
}  
  
#oben_rechts  
{  
	background: #51618C;  
	right: 0;  
}

Hehe. ;-)

Beachte:

(1) Der Viewport vieler Nutzer ist schmaler als 970 Pixel. Nicht nur, dass die Nutzer dann horizontal scrollen müssen, von #oben_links und  #oben_rechts wäre dann gar nichts zu sehen. Auch sonst können die ziemlich schmal sein. Was soll denn für Inhalt rein? Oder dienen sie nur zu Darstellungszwecken (und sind damit überflüssig)?

(2) Benenne IDs und Klassen nicht nach der gegenwärtig gewünschten Darstellung! Also nicht "oben_links", "oben_mitte", "oben_rechts".

Qapla'

[smarty19]

@@smarty19:

nuqneH

....

Beachte:

(1) Der Viewport vieler Nutzer ist schmaler als 970 Pixel. Nicht nur, dass die Nutzer dann horizontal scrollen müssen, von #oben_links und  #oben_rechts wäre dann gar nichts zu sehen. Auch sonst können die ziemlich schmal sein. Was soll denn für Inhalt rein? Oder dienen sie nur zu Darstellungszwecken (und sind damit überflüssig)?

(2) Benenne IDs und Klassen nicht nach der gegenwärtig gewünschten Darstellung! Also nicht "oben_links", "oben_mitte", "oben_rechts".

Qapla'

Wunderbard. Funktioniert hervorragend, vielen vielen Dank für deine Hilfe und auch für deine Tipps am Schluss, werde die Breite wohl etwas reduzieren!

[Gunnar Bittersmann]

@@smarty19:

nuqneH

Funktioniert hervorragend

Nein. Du weißt, was '-moz-' bedeutet?

werde die Breite wohl etwas reduzieren!

Mit „etwas“ ist es nicht getan. Besser ist es, gar keine feste Breite anzugeben, sondern max-width.

Qapla'

[smarty19]

@@smarty19:

nuqneH

Funktioniert hervorragend

Nein. Du weißt, was '-moz-' bedeutet?

werde die Breite wohl etwas reduzieren!

Mit „etwas“ ist es nicht getan. Besser ist es, gar keine feste Breite anzugeben, sondern max-width.

Qapla'

Hi,

hatte erst jetzt wieder Zeit mich damit zu beschäftigen. "-moz" ist also Mozilla- spezifisch, also kann ich es damit (alleine zumindest) nicht machen.

Versuche mich mal weiter mit Suchmaschinen schlau zu machen.

[smarty19]

Hi,

Problem ist mittlerweile gelöst. Mozilla- spezifische Lösungswege helfen ja alleine leider nicht gerade viel.

Meine Grafik zeigt meine Lösung, die auch gut funktioniert:

Vielleicht hilft es jemand anderem...