nicht angemeldet
Ich habe bereits den ganzen gestrigen Tag herumexperimentiert, aber auf eine Lösung habe ich bisher noch nicht. Ich möchte zwei nebeneinander stehende DIV-Container auf der Seite zentrieren. Ist nur ein DIV vorhanden, so klappt dies mit "margin: auto;" wunderbar. Nun möchte ich aber, dass ein zweiter (später auch dritter, vierter) DIV Container hinzukommt. das ganze soll eine Navigationsleiste werden it jeweils unterschiedlichem BG-Color usw. Sobald ich aber ein weiteren DIV einfüge, sind beide linksbündig. Hier zunächst der Code:
<html>
<head>
<style type="text/css">
#box1 { position:absolute; width:150px; height:50px; }
#box2 { position:absolute; top:0px; left:150px; width:150px; height:50px; }
</style>
</head>
<body style="text-align: center;">
<div style="margin: auto;">
<div id="box1" style="background:yellow;">Menü 1
<div id="box2" style="background:blue;">Menü 2</div>
</div>
</div>
</body>
</html>
Auf "float:left" habe ich dabei verzichtet, weil ich mich 1. damit nicht auskenne und 2. nur so einen automatischen Umbruch beim verkleinern des Fensters verhindern will, auch wenn dies gegen CSS spricht. Habe mich also für eine absolute Positionierung entschieden.
Wie kann ich nun die beiden Boxen zentrieren? Sie liegen doch schon innerhalb eines DIV's, das zentriert ist oder?
Eine Suche ergab hier keinen Erfolg, darum dieser Post! Ich bin völlig neu in der Materie CSS und habe bislang meine Designs mit Tabellen entwickelt. :)
Danke im vorraus für Eure Hilfe!
Gunnar Bittersmann