nicht angemeldet
float verhindert darunterliegendes backgroundimage
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">
</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:
-
Hat jemand von euch eine Ahnung, was man dort machen könnte?
ein element, welches den textfluss wieder herstellt - idealerweise ein pseudo-element mittels :after erstellt - für dämliche browser ein hardcodiertes element
<div class="clear"></div>.clear { clear: both; line-height: 0; height: 0; font-size: 0; /* und ggf. noch ein paar weitere für alte browser */ }-
Lieber Snafu, lieber Suit,
Danke euch beiden! Problem in Null-Komma-Nix gelöst ;-)
Und noch etwas dazugelernt! Toll!
-
-
Hallo!
[...] Der div#footer übernimmt natürlich die clear-Funktion. Hat jemand von euch eine Ahnung, was man dort machen könnte?
Ja. Dass der #footer die Eigenschaft clear hat bringt dir deshalb nicht den gewünschten Effekt, weil er nicht dafür sorgt, dass dein #content nicht bezgl. der Höhe ausgedehnt wird.
Wenn du etwas floatetst, dann nimmst du es aus dem Elementfluss. Wenn du jetzt beide im #content enthaltenen Elemente Floatest, dann ist der #content sozusagen leer, ist also nicht besonders hoch (margin, padding). Dein #footer hat zwar die clearing Eigenschaft aber er befindet sich nicht im #content, somit wird nicht der von dir gewünschte Effekt erzielt, dass der #content gestreckt wird.--
LG,
Snafu