No replies
sennett
Offline
newbie
Last seen: 13 years 26 weeks ago
Joined: 2009-06-02
Posts: 1
Points: 0

Hey there,

I have a lquid layout, with three columns, center one is the liquid one. Left col is floated left with a margin to push it back again slightly. Right and middle cols are in a another div to group the content, which has a large margin-left so that the content doesn't wrap around the left col. Right col is next to the right border, and the middle (liquid) col has a large and margin-right to keep it from wrapping around the right hand floated div each side.

The problem is the border on div#content doesn't display in IE (works fine in Opera and Firefox). The border reappears if I make one of either the middle column or the right-hand column shorter by removing the content. Obviously I want the border there all the time! Where am I going wrong?

Here is a link to it:

http://anthony.cd-inc.co.uk/Park%20View/090529/index.php

Here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ParkView Centre - Home</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
	<div id="layout">
		<div id="head">
			<a href="index.php" id="logo">
				<img src="img/topLogo.jpg" alt="ParkView Centre" />
 
			</a>
			<div id="details">
				<div><span id="t">t: </span><span id="phoneNum">01925 762404</span></div>
				<span id="help">Call us today to find out how we could help.</span>
			</div>
		</div>
		<div id="centre">
 
			<div id="sideBar">
				<ul>
					<li><a href="home.php" class="selected">Home</a></li>
					<li><a href="aboutUs.php">About Us</a></li>
					<li><a href="services.php">Services</a></li>
					<li><a href="treatments.php">Treatments</a></li>
					<li><a href="commonConditions.php">Common Conditions</a></li>
 
					<li><a href="products.php">Products</a></li>
					<li><a href="healthAndFitnessClinics.php">Health &amp; Fitness Clinics</a></li>
				</ul>
			</div>
			<div id="content">
				<div class="imageAndBoxes">
					<img src="img/feet.jpg" alt="Feet" /> <!-- this image is 533 x 386 px -->
					<div class="box">
 
						<div class="topTrim"></div>
						<div class="content">
							<img src="img/eye.jpg" />
							<p><strong>Learn more about comment conditions</strong></p>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet tortor et libero pretium aliquet nec quis elit. Suspendisse sit amet odio in orci blandit placerat. </p>
						</div>
						<div class="clearfix"></div>
						<div class="bottomTrim"></div>
 
					</div>
					<div class="box">
						<div class="topTrim"></div>
						<div class="content">
							<img src="img/footPrints.jpg" />
							<p><strong>Learn more about comment conditions</strong></p>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet tortor et libero pretium aliquet nec quis elit. Suspendisse sit amet odio in orci blandit placerat. </p>
						</div>
 
						<div class="clearfix"></div>
						<div class="bottomTrim"></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="text">
					<h1>Physiotherapy</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet tortor et libero pretium aliquet nec quis elit.</p>
					<p>Suspendisse sit amet odio in orci blandit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
					<p>Nam mollis mattis vulputate. Curabitur sodales dapibus bibendum. Donec lobortis hendrerit sodales. </p>
					<p>In hac habitasse platea dictumst. Nam massa augue, euismod ut varius at, molestie ut est. Mauris in elit sem. </p>
					<p>Suspendisse ac libero in tellus eleifend porttitor id sed magna. Ut non orci leo. Mauris aliquam est in mauris venenatis et fermentum leo iaculis. Cras ut leo sapien. Nulla hendrerit, leo at egestas luctus, felis lorem volutpat ante, sed convallis leo est ac mi. Aenean eu augue ut tortor porttitor porta. Suspendisse in accumsan nulla.</p>
				</div>
 
 
				<div class="clearfix"></div>
			</div>
		</div>
 
		<div id="foot">
			Copyright Parkview Centre 2009
		</div>
	</div>
</body>
</html>

And here is the CSS:

/* dark blue: 214e94 */
/* turquoise: 51bbd0 */
/* light green: d3eae8 */
/* dark green: 266c7a*/
 
.clearfix {
	clear:both;
}
 
body {
	margin:0;
	padding:0;
	font-family:arial;
	height:100%;
	font-size:11.5px;
	color:#214e94;
	line-height:21px;
	text-align:justify;
	/* fill trim at bottom when page is too short*/
	background-color:#266C7A;
}
 
img {
	display:block;
	border:none;
}
 
a img {
	border:none;
}
 
h1 {
	font-size:2.5em;
}
 
a {
	border:none;
}
 
div#layout {
	background-color:#fff;
}
 
div#head {
	background-color:#51bbd0;
	border-top:solid 4px #d3eae8;
	overflow:visible;
	height:93px;
}
 
div#details {
	float:right;
	color:#fff;
	font-size:21px;
	margin-top:30px;
}
 
div#details div {
	text-align:right;
}
 
span#phoneNum {
	font-size:1.5em;
}
 
span#help {
	display:block;
	font-size:0.8em;
}
 
a#logo {
	display:block;
	background-color: #d3eae8;
	float:left;
	margin-left:40px;
}
 
div#centre {
	margin:40px 0;
}
 
div#sideBar {
	float:left;
	margin-left:40px;
	width:195px;
}
 
div#sideBar ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:right;
	float:right;
}
 
div#sideBar ul li {
}
 
div#sideBar ul li a {
	color: #214e94;
	text-decoration: none;
	padding: 5px 18px 5px 0;
	display:block;
}
 
div#sideBar ul li a.selected {
	background:#fff url(../img/menuSelected.jpg) center right no-repeat;
}
 
div#content {
	border-left:solid 3px #d3eae8;
	margin-left:235px;
 
}
 
div.text {
	padding: 0 40px;
	margin-right:533px;
}
 
div.imageAndBoxes {
	float:right;
	width: 533px;
	position:relative;
	top:-40px;
}
 
div.imageAndBoxes img {
 
}
 
div.box {
	background-color: #51bbd0;
	color: #fff;
	margin: 10px 0;
	width:98%;
	float:right;
}
 
div.box div.topTrim {
	background: #51bbd0 url(../img/topLeftCorner.jpg) left center no-repeat;
	height:22px;
}
 
div.box div.bottomTrim {
	background: #51bbd0 url(../img/bottomLeftCorner.jpg) left center no-repeat;
	height:22px;
}
 
div.box p, div.box img {
	margin: 0 22px;
}
 
div.box img {
	border: solid 3px #d3eae8;
	float:left;
}
 
div.box div.content {
	min-height:30px;
}
 
div#foot {
	clear:both;
	background-color:#266c7a;
	color:#fff;
	border-top:solid 4px #51bbd0;
	text-align:right;
	font-size:0.7em;
	padding:1em 2em;
	font-weight:bold;
}

Many thanks.