Papillon: float verhindert darunterliegendes backgroundimage

Beitrag lesen

SELF-Forum

float verhindert darunterliegendes backgroundimage

Papillon
– Informationen zu den Bewertungsregeln

Moin Moin!

Sitze gerade an einem Layout und möchte zwei Divs nebeneinander positionieren. Das läuft auch alles schon ganz gut. Das einzige, was mich wurmt, ist, dass das hinter den beiden Divs liegende Hintergrundbild scheinbar flöten geht, sobald man die beiden Divs floatet. Zur Veranschaulichung mal ein paar Code-Schnipsel:

  
<body>  
<div id="container">  
    <div id="header">  
     <ul>  
        <li><a href="#" title="Home">Home</a></li>  
        </ul>  
    </div>  
    <div id="content">  
     <div id="sidebar">  
        Sidebar.  
        </div>  
     <div id="text">  
        Lorem ipsum...  
        </div>  
    </div>  
    <div id="footer">  
    &nbsp;  
    </div>  
</div>  
</body>

Mit dazugehörigem CSS-Code:

  
div#content {  
margin: 0px;  
padding: 8px 4px;  
font-size: 70%;  
color: #400000;  
background: url('images/contentbackground.png') repeat-y;  
width: 692px; }  
  
div#text {  
margin: 0px;  
padding: 0px;  
border: 1px solid red;  
width: 73%;  
float: left; }  
  
div#sidebar {  
margin: 0px;  
padding: 0px;  
border: 1px solid grey;  
width: 180px;  
float: right; }  
  
div#footer {  
clear: both;  
margin: 0px;  
padding: 0px;  
background: url('images/footerbackground.png') no-repeat;  
width: 100%;  
height: 30px; }

Ich benutze also den div#content als Container für die div#text und div#sidebar. Dem div#content habe ich ein vertikales Hintergrundbild zugewiesen. Floatet man nun div#text nach links und div#sidebar nach rechts, verschwindet das Hintergrundbild. Der div#footer übernimmt natürlich die clear-Funktion. Hat jemand von euch eine Ahnung, was man dort machen könnte?
Hier mal ein Bild von der ganzen Schose:
Alternativtext fürs Bild.

Beitrag melden
–
Informationen zu den Bewertungsregeln