Forum Moderators: not2easy
Doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Just been reading that using xhtml is a bad idea - the only reason I use it is because that was how the book I used to teach myself (Headfirst HTML & CSS) taught it! I'm happy to strip out any xhtml and change the doctype if that's causing a problem.
I read an earlier thread from someone with what sounded like a similar problem, and theirs was fixed by changing margins etc in the tables - but I'm not using tables.
Both code and html are W3C standards-compliant, so I don't know where to start looking for the problem.
I've stripped out the content, and the shell of the structure is below. The 'Main' div is the left column, with horizontal nav bar. The 'Sidebar' div is the right column and is just a series of images.
<body>
<div id='wrap'>
<div id="main">
<p>
</p>
<div id="nav">
<ul>
<li </li>
<li </li>
<li </li>
<li </li>
</ul>
</div><!--end div nav-->
<p class="justified">
</p>
<p class="justified">
</p>
<p class="italic">
</p>
<p class="footer">
</p>
</div><!-- end div main -->
<div id="sidebar">
<p>
<img />
<br /><br />
<img />
<img />
</p>
</div><!-- end div sidebar -->
</div> <!-- end div wrap -->
</body>
Here's the CSS relating to the sizing/structure of the page:
#wrap {
width:745px;
padding-top:5px;
padding-bottom:5px;
margin-left:auto;
margin-right:auto;
}
#sidebar {
float:right;
width:260px;
padding:5px;
margin-top:20px;
list-style:none;
border: none;
}
#main {
float:left;
width:430px;
padding:20px;
margin-top:5px;
margin-right:5px;
}
Any helpful hints would be most gratefully received!
Regards,
Tanya
Developed to look great in legacy IE versions: that is a real problem. Most of us do it the other way around as it's easier.
But no despair yet, this is simple enough I think: in a standards compliant browser (read: all but the legacy IE versions such as IE6 and IE7) an element (such as your wrap) will not get stretched cause it has children that are floater (such as your main and sidebar). Only content that is not floated will make it stretch. So the easiest solution is to add something inside the wrap that is not floated and stays below the floats. In the html a simple
<br class="clear" />and some CSS:
.clear {
clear:both;
}
Kindest regards,
Tanya
