Hi Leute,
ich hab nen Problem mit einem Div welches nicht mit dem Inhalt wächst.
Folgendes Szenario:
Das Div "Content" hat als Hintergrund ein Bild weshalb ich hier eine feste größere setzen muss. In dem Content Div befinden sich zwei weitere Div Container "sub_navi" für die Seiten-Navigation und "content_elem" für den eigentlichen Inhalt.
Wenn der Inhalt jetzt länger ist als das Hintergrund Bild von "Content"
(Welches ich nicht mit repeat-y wachsen lassen kann da es ein Bild ist
und kein Muster etc.)
Soll das Div "content_wraper" mit wachsen, dort habe ich nämlich eine Grafik die sich wiederholen kann und an das Ende der "content"-Grafik passt.
Leider wächst das content_wraper Div nicht mit, habe schon alles versucht was mir einfiel. Also da die beiden divs Sub_Navi und Content_elem gefloatet sind habe ich nen clear:both gesetzt ... height auf auto stellen bringt auch kein erfolg.
Wenn ich dem content_wraper ne feste höhe gebe klappt auch alles super,
mit der Verschmelzung der 2 Grafiken ... aber es ist ja nie eine feste Content-Höhe auf der Seite, weswegen ich schon ein automatisch wachsendes Div benötige.
Um es noch mal kurz zu machen:
Das Content_Wraper Div soll mit dem Inhalt von "content_elem" wachsen.
Danke schon mal für eure Hilfe
HTML-Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/basic.css" rel="stylesheet" type="text/css">
<title>%Variable%</title>
</head>
<body>
<div id="main">
<div id="head"></div><!--Ende Head-->
<div id="navi">
<ul>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
</ul>
</div><!--Ende Navi-->
<div id="content_wraper">
<div id="content">
<div id="sub_navi">
<div id="sub_title">Produktgalerie</div>
<ul>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
<li><a href="#">XYZ</a></li>
</ul>
</div><!--Ende Sub_Navi-->
<div id="content_elem" style="font-size:11px">
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed<br>
diam no eirmod tempor invidunt ut labore et dolore magna <br>
aliquyam erat, sed dia voluptua. At vero eos et accusam et justo<br>
duo dolores et ea rebum. Stet kasd gubergren, no sea takimata<br>
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit<br>
amet, consetetur sadipscing elitr, sed diam nonumy <br>
eirmod tempor invidunt ut Lorem ipsum dolor sit amet, <br>
consectetuer sad tempor invidunt ut labore et dolore magna<br>
aliquyam erat, sed dia sanctus.<br>
</div><!-- Ende Content Elem-->
</div><!-- Ende Content-->
</div><!-- Ende Content Wrapper-->
<div id="footer">
<span>
Lorem ipsum dolor sit amet ...
</span>
</div><!-- Ende Footer-->
</div><!-- Ende Main-->
</body>
</html>CSS
*{
margin:0px;
padding:0px;
border: 0 none;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
text-decoration: inherit;
list-style-type: none;
}
body{
background-color: #8c0001;
font-family: 'Arial';
font-size: 12px;
color: #19171b;
}
/*==========
Div's
===========*/
#main{
width: 954px;
margin: 0 auto;
padding: 6px 0 0;
position: relative;
}
#head{
height: 127px;
background-image: url("../layout/head.jpg");
}
#navi{
height: 27px;
background-image: url("../layout/navi.jpg");
}
#navi ul{
padding-left:294px;
padding-top:3px;
font-weight: bold;
}
#navi li{
display: inline;
padding: 0 10px;
border-right: 1px solid #000000;
float: left;
}
#content{
clear: left;
width: 100%;
height: 526px;
background-image: url("../layout/bg.jpg");
}
#sub_navi{
float:left;
padding-top: 15px;
margin-left: 80px;
width: 185px;
}
#sub_navi ul{
padding-top: 3px;
list-style-position:outside;
}
#sub_navi li{
text-indent: 13px;
padding-top: 2px;
padding-bottom: 3px;
border-bottom: 3px solid #ffffff;
}
#sub_title{
color: #e6eeec;
padding-left: 13px;
padding-bottom: 4px;
font-family: 'Times New Roman';
font-size: 16px;
font-weight: bold;
border-bottom: 3px solid #ffffff;
}
#content_elem{
float:left;
padding-top: 40px;
padding-left: 40px;
}
#content_wraper{
background-image: url("../layout/bg_erw.jpg");
background-repeat:repeat-y;
clear:both;
/*height: 670px;*/
}
#footer{
height: 49px;
background-image: url("../layout/footer.jpg");
}
#footer span{
padding-left: 110px;
font-size: 11px;
position:relative;
top:10px;
color: #777777;
}Edit:
Habe das Problem nun lösen können mit einem CSS-Snippet.
Also Problem nicht mehr aktuell 
