nicht angemeldet
Hallo,
ich hab folgende Frage:
ich habe ein div-Element mit fester Breite zentriert mittels margin-left / margin-right=auto. Nun sollen die Flächen rechts und links davon mit einer Hintergrundgrafik versehen werden, die ich leider nicht ins body-Tag nehmen kann, da sie eine Ausrichtung haben (einen Schatten am Rand des div-Elements).
Mein Versuch bisher: ich habe zwei weitere div-Elemente mit festen Breiten innerhalb des zentrierten div's definiert und absolut positioniert.
Mein Problem: da die Gesamt-Breite der drei div-Elemente nun größer ist als die Bildschirmgröße, bekomme ich einen horizontalen Scrollbalken im Browser. Die Größe des linken div's ist nicht tragisch, da es einfach im unsichtbaren Bereich des Bildschirms verschwindet, aber für das rechte div-Element habe ich keine Lösung.
Wahrscheinlich muss man da einen grundsätzlich anderen Ansatz wählen als absolut positionierte div's.
Hat jemand eine elegante Lösung?
Vielen Dank im Voraus!
Grüße
Suidu
Hier der relevante Ausschnitt aus dem Quelltext:
<style>
#center {
position: relative;
margin-left:auto;
margin-right:auto;
width: 825px;
height:100%;
min-height:700px;
}
#left_margin {
position: absolute;
left:-650px;
width:650px;
height:100%;
background-image: url(../images/background_schadow_1px-left.gif);
}
#right_margin {
position:absolute;
left:825px;
width: 100px;
height:100%;
background-image: url(../images/background_schadow_1px-right.gif);
}
</style>
<div id="center">
<div id="left_margin">
</div>
<div id="right_margin">
</div>
<p>Hier kommt der weitere Inhalt des mittleren div's </p>
</div>