Hi,
I have this problem and it’s really puzzeling me. Maybe the solution is simple, but I tried a lot of different things and none of them work.
I have this page http://www.sporterspas.nl/bummer.htm with serveral div’s in one of the div’s the main content is being loaded (normally it is done with a cms, the example is a static html page so i could pull out all the none relevant stuff). Everything works okay… untill I put in an image, which is alligned left or right, it is being displayed beneath the div in which is nested, the height of div is not being adjusted to the content.
here is the code:
basic.css
body {
font-family: "Trebuchet MS", Arial;
font-size: 11px;
color: #000000;
background-image: url(images/achtergrondPatroon.gif);
padding-top: 40px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
a:link {
color: #990000;
text-decoration: underline;
}
.newsHeading {
font-size: 14px;
font-weight: bold;
color: #990000;
margin-top: 15px;
margin-bottom: 10px;
}
.newsIntro {
margin-bottom: 10px;
z-index: 50;
}
.newsBottomNavBar {
font-size: 10px;
font-weight: bold;
color: #999999;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
margin-bottom: 20px;
}
.newsItemBottomNavBar {
font-size: 10px;
font-weight: bold;
color: #999999;
clear: none;
}
a:visited {
color: #990000;
}
a:hover {
color: #990000;
text-decoration: none;
}
#pageHeading {
background-color: #FFFFFF;
border: 1px solid #86beff;
font-size: 16px;
font-weight: bold;
margin-left: 185px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-bottom: -30px;
width: 60%;
z-index: 20;
position: relative;
}
#mainContent {
background-color: #FFFFFF;
border: 1px solid #86beff;
margin-left: 175px;
position: relative;
z-index: 10;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
overflow: visible;
}
p {
margin: 0px;
}
.menuLinkLevelOne {
clear: both;
float: left;
}
.menuLinkLevelTwo {
clear: both;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
#menuContainer {
background-color: #FFFFFF;
border: 1px solid #86beff;
position: relative;
width: 160px;
padding: 15px;
clear: none;
z-index: 30;
float: left;
margin-top: 20px;
font-size: 14px;
font-weight: bold;
}
#logo {
float: left;
height: 140px;
width: 500px;
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
}
.newsNavBar a:link, .newsBottomNavBar a:link {
text-decoration: none;
}
.newsNavBar a:visited, .newsBottomNavBar a:visited {
text-decoration: none;
}
.newsNavBar a:hover, .newsBottomNavBar a:hover {
text-decoration: underline;
}
bummer.htm
<!-- generated by Brightbox CMS 2.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BrightBox.nl - Niet lullen maar poetsen</title>
<meta name="title" content="BrightBox.nl" />
<meta name="description" content="" />
<meta name="keywords" content="CMS" />
<link href="templates/basic/basic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo"><img src="templates/basic/images/logo.png" alt="Logo Basic" /></div>
<!-- Start menu container -->
<div id="menuContainer"> </div>
<!-- End menu container -->
<!-- Start page content - default template -->
<div id="pageHeading">Niet lullen maar poetsen</div><br />
<div id="mainContent"><div class="newsIntro"><img width="300" height="300" align="right" src="http://www.sporterspas.nl/content/library/dd935704e80b66ba47bbd201b8f2f7ef/Image/2462296_1.jpg" alt="nope" />De stichting Collectieve Rechtsvordering gaat minister De Geus (Sociale Zaken) voor de rechter slepen met de eis onmiddellijk te <a target="_blank" href="http://www.rtl.nl/%28/actueel/rtlnieuws/%29/components/actueel/rtlnieuws/2005/10_oktober/16/binnenland/1016_1930_wao_stichting_rechter.xml">stoppen</a> met het herkeuren van WAO’ers. De WAO-regels zijn sinds oktober vorig jaar verscherpt om niet-zieken aan het werk te krijgen. Sindsdien zijn 55.000 mensen herkeurd. er zijn nu al zo'n 25 duizend wao-oplichters/bankklevers gepakt. Lieden die nu weer vrolijk met de broodbak op de fiets aan het werk moeten. Volgens <a target="_blank" href="http://www.corv.nl/">de stichting</a>, die zegt op te treden namens iedereen die moet worden herkeurd, is De Geus onrechtmatig bezig. De herkeuring zou strijdig zijn met het Europees Verdrag van de Rechten van de Mens. Volgens de stichting is een uitkering namelijk een vorm van bezit. Maar natuurlijk. Maar waarom geldt dit bezit ook voor profiteurs die door een pijntje te simuleren destijds in de WAO zijn geparkeerd en de hele dag horizontaal blijven? Dat is namelijk geen bezit maar pure diefstal.</div>
<div class="newsItemBottomNavBar">Categorie: <a href="#">nieuws</a> | Datum: 15 juni 2005 | Tijd: 10:32</div>
</div>
<!-- End page content - default template -->
</body>
</html>
<!-- Page generated in 0.011761903762817 seconds -->
off course the content is dummy content :s:
I want the image to be displayed normally in the content and I want the div to be streched as long as needed. Any clues? Thanks in advance…