Forum Moderators: not2easy
Here's a simplified version of the HTML/CSS. I've added borders to the content and wrapper divs so you can more clearly see the problem. You'll miss some of the formatting because the images aren't there; the site's logo has a large calligraphic lower-case G, so although most of the logo is contained in the header area, the bottom half of the G is a separate graphic that forms the left-hand side of the H2. So that's why the H2 text doesn't start at flush left; it's supposed to be that way. If anyone would like to see the original site URL, you're welcome to write to me privately.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body { margin: 0; padding: 0; }
body {
background-color: #FE6843;
}
div#container {
/* wraps around all of content; has left background */
margin-left: 10%;
margin-right: 10%;
max-width: 853px;
/* width:expression(document.body.clientWidth > 853? "853px": "auto" ); */
/* ^^ works around IE 5/6 lack of max-width */
background-repeat: repeat-y;
padding-left: 10px;
background-color: white;
}
div#container2 {/* wraps around all of content; has right background */
padding-right: 10px;
background-repeat: repeat-y;
background-position: right top;
}
div#header {
height: 175px;
margin: 0;
padding: 0;
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
}
div#header img {
float: right;
}
div#wrapper {
float: left;
width: 100%;
margin-left: -237px;
border: 1px solid blue;
}
div#content {
margin-left: 237px;
padding: 0 15px 15px 15px;
border: 1px solid orange;
}
h2 {
background-image: url(../images/logo-bottom.jpg);
background-repeat: no-repeat;
padding: 15px 10px 0 152px;
margin: 0 0 0 -15px;
padding-left: 152px;
padding-right: 10px;
min-height: 65px;
}
h3 {
margin-bottom: -0.4em;
margin-top: 20px;
}
div#content p img {
float: right;
margin: 0 0 15px 15px;
}
div#navigation {
background: #CCC;
float: right;
width: 233px;
}
div#footer {
background: #C2DBA3;
clear: both;
height: 68px;
padding: 10px 40px 10px 40px;
}
</style>
</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
<img src="redtomatoes.jpg" width="233" height="175">
<h1><a href="index.htm">Grown the Way Nature Intended</a></h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Us</h2>
<p><img src="bottlefeedingabe.jpg" width="242" height="189"><b>Telephone:</b>
#*$!-#*$!X </p>
<p><b>Address:</b> l Main St. <br>
Anytown, MA #*$!XX </p>
</div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About Our Farm </li>
<li>Farm Philosophy</li>
<li>What's Growing?</li>
<li>Our Animals</li>
<li>Dried Herbs & Wreaths </li>
<li>Fleeces, Roving & Yarn</li>
<li>Information for Interns </li>
<li>Links</li>
<li>Contact Us </li>
</ul>
</div>
<div id="footer">
<p>Footer navigation goes here</p>
</div>
</div>
</div>
</body>
</html>
Thanks very much for any help you can offer!
-Anne
I've fixed the issue you raised here by taking out the negative margin on the wrapper and the corresponding positive margin on the content div and removing 100% width on the wrapper. It solves the problem you had and by simplyfying it a bit you're less likely to run into problems with ie6. you may have to set a width on content though if it's content doesn't stretch it far enough. were you using this technique so you could have an elastic layout?
I was using this layout so it would be elastic, yes. I got the basic layout from a great collection of CSS layouts by a gentleman in Italy, and it's worked pretty well for me with various sites. This one was a particularly sticky problem!
I *so* much appreciate your help. I ended up setting up a filter for IE6 and using some of your suggestions in that. It's not perfect at this point - the bottom of the G in the logo doesn't exactly line up if the browser window isn't maximized - but I can live with that for now.
Thank you again, and have a good weekend!
-Anne
