[SOLVED] Firefox DIV problem

[abch624]

Hi There,

 

I have attached a screenshot of the problem. The code is

		<div style="float:left;">
		<div class="top"></div>
		<div class="middel">
			<div class="content">
				<div class="blogSmall">
					<h1>your blogs</h1>
				</div>
				<div class="blogSnap">
					<div style="float:left; width:97.5%;">
						<div class="blogTop">
							<div>
								<img src="./images/interface/blogs/blog.png" height=100 style="padding-right:10px; padding-bottom:10px;" align="left">
								Again folks it is time for another instalment of Chris’s travel adventures. 
								Or as some may like to call it ‘Chris’s sedate bludge-fest’. But regardless of 
								what others may think I tend to put myself into the same category as Captain Cook, 
								boldy heading into uncertainty, ever so fraught with peril… seriously take this 
								morning for…
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom"></div>
	</div>

and the css is

.content {
padding: 0 30px 0 30px;
}

.top {
background: #fff url("/TableFind/images/interface/topblue.jpg");
height: 15px;
width:900px;
}

.bottom {
background: #fff url("/TableFind/images/interface/bottomblue.jpg");
height: 15px;
width:900px;
}

.middel {
background: url("/TableFind/images/interface/middleblue.jpg");
background-repeat: repeat-y;
width:900px;
}
.blogSnap {
width:98%; 
padding-top:5px;
margin-left:16px;
}

.blogSmall {
width:94%;
padding-left:15px; 
margin-left:16px;
}

.blogTop {
width:50%;
padding-left:15px; 
margin-left:16px;
}

 

DO you have any idea why the div does not stretch out in Firefox and Chrome???

 

Regards,

 

Zahid

 

 

[attachment deleted by admin]

[haku]

add:

 

overflow:auto;

 

to the CSS for the containing div.