Hallo, ich habe folgendes Problem. Wenn ich in den Div für den Content etwas eingebe z.B. Text dann verlängert sich dieses Div, das ist ja auch richtig so, allerdings schiebt es sich dann über den footer. Hier zu sehen:
12-error.jpg — Bild Upload Wie mache ich es das der footer sich nach unten schiebt?
Hier mal das CSS:
HTML-Code:
body {
background-image: url(images/grungyBG.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
text-align: center;
}
.container { margin:0 auto;
padding:0px;
width:938px;
height:auto;
}
.header {
width:938px;
height:150px;
text-align: left;
}
.menu {width:938px;
height:37px;
background:url(images/menubar.png);
background-repeat:no-repeat;
background-position:center;
}
.logo { float:left;
width440px;
}
.banner { float:right;
width:550px;
text-align:left;
}
.slideshow {width:938px;
height:306px;
background:url(images/sliderbg.png);
background-repeat:no-repeat;
background-position:center;
}
.maincontainer {width:938px;
min-height:305px;
}
.content {min-height:305px;
float:left;
width:572px;
}
.sidebar {min-height:305px;
float:right;
width:363px;
}
.footer {width938px;
min-height:245px;
background:url(images/footer.png);
background-repeat:no-repeat;
background-position:right;
float:none;
}
.mainbox { width:565px;
float:left;
background:url(images/main.png);
}
.mainright { width:7px;
min-height:305px;
background:url(images/mainright.png);
background-repeat:repeat;
float:right;
}
.mainbottom { width:572px;
height:7px;
background:url(images/mainbottom.png);
background-repeat:no-repeat;
}
.sidebox { min-height:305px;
width:357px;
background:url(images/side.png);
background-repeat:repeat;
float:left;
}
.sideright { min-height:305px;
width:6px;
background:url(images/mainright-12.png);
background-repeat:repeat;
float:right;
}
.sidebottom { width:363px;
height:7px;
background:url(images/topbottom.png);
background-repeat:no-repeat;
}
.contentleft {
width:65%;
margin:7px;
text-align:left;
float:left;
}
.contentright { width:30%;
margin:7px;
float:right;
}
und Hier das HTML:
HTML-Code:
</head>
<body>
<div class="container">
<div class="header">
<div class="topcontainer"></div>
<div class="logo"><br />
<img src="images/topcont_03.png" width="258" height="104" alt="logo" />
</div>
<div class="banner"><br />
<img src="images/topcont_05.png" width="522" height="104" alt="banner" /></div>
</div>
<div class="menu"></div>
<div class="slideshow"></div>
<div class="space2"></div>
<div class="maincontainer">
<div class="content">
<div class="mainbox">
<div class="contentleft">
<p class="title1">Etiam porta tempor ornare</span></p>
<p>Ut et turpis nulla. Suspendisse id eleifend odio. Aliquam mattis iaculis dictum. Etiam vel quam nec lacus suscipit consectetur. Aliquam mattis, orci quis gravida mattis, est tortor tristique lorem, sed dictum lorem urna sit amet augue. Fusce euismod metus quis tortor vehicula eu laoreet mauris lobortis. Praesent consequat, turpis vel mattis aliquam, lorem sem hendrerit diam, tristique egestas nulla massa vel mauris. Vestibulum facilisis odio nec urna adipiscing faucibus eget sit amet mi. Sed purus purus, venenatis vel faucibus quis, lacinia in est. Proin fermentum adipiscing massa. Duis tristique metus et lectus tristique nec lacinia libero faucibus. Praesent metus dui, fringilla eu ullamcorper ut, vehicula ut leo. Nulla facilisi. Fusce non nunc sapien. Nam porttitor, nibh nec malesuada scelerisque, orci quam sollicitudin quam, at volutpat quam eros id diam. Maecenas augue libero, tempus vel volutpat eget, porttitor quis mauris. Integer vel pretium justo. Duis tincidunt pretium venenatis. Donec magna magna, auctor quis tristique eget, bibendum nec risus. Nullam ac felis risus. </p>
</div>
<div class="contentright"></div>
</div>
<div class="mainright"></div>
</div>
<div class="sidebar">
<div class="sidebox"></div>
<div class="sideright"></div>
</div>
</div>
<div>
<div class="space"></div>
</div>
<div class="footer"></div>
</div>
</body>
Danke euch schonmal für eure Hilfe!
28.09.2011, 17:08
Div überlappt Footer
Linear-Darstellung
