Forum Moderators: not2easy
I'm trying to create a layout in CSS where:
- every odd-numbered content item has an image on the left and text on the right.
- every even-numbered content item has an image on the right and text on the left.
The grey border around the content areas creates a kind of "zig zag" effect down the page.
The following code works great in IE6. It's not quite right in Opera 7, but it's a total mess in Mozilla / Netscape 7.
I'd really appreciate some advice on where I am going wrong. I've tried lots of changes to the code, but nothing seems to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
* {font-family:arial; font-size:12px; }
#core{position: absolute; left: 17px; top: 10px; background:#ccc; height:auto; width:390px}
#core h2{padding-top:15px; padding-bottom:2px; color:#000;}
.vnleft{position: relative; left: 0px; background:#fff; height:auto; width:360px; padding-right:15px; margin-left:15px;}
.vntitleleft{background:#ccc;width:360px;float: left; padding-left:15px; font-weight:bold;}
.vnimageleft{float: left; position: relative; margin-right:10px;display:block;}
.vnright{position: relative; left: 0px; background:#fff; height:auto; width:360px; padding-left:15px; margin-right:15px;}
.vntitleright{background:#ccc;width:360px;float: right;text-align:right; padding-right:15px; font-weight:bold;}
.vnimageright{float: right; position: relative; margin-left:10px;display:block;}
</style>
</head>
<body>
<div id="core">
<h2 class="vntitleleft"><img src="dot.gif" height="15" width="15" style="vertical-align:middle;" alt="dot"/> Left Title</h2>
<div class="vnleft">
<img src="image1.jpg" width="100" height="100" class="vnimageleft" alt="image1"/>
<span style="background:#fff;">
<br />
Text to the right of image 1
</span>
</div>
<h2 class="vntitleright">Right Title <img src="dot.gif" height="15" width="15" style="vertical-align:middle;" alt="dot"/></h2>
<div class="vnright">
<img src="image2.jpg" width="100" height="100" class="vnimageright" alt="image2"/>
<span style="background:#fff;">
<br />
Text to the left of image 2
</span>
</div>
</div>
</body>
</html>
Adding
clear: both;
Thanks very much - that did fix it.
