Some valid markup might help. You’ve got DIV between UL and LI (only think that can go after a UL is a LI), missing attributes, unclosed tags, etc, etc… 33 validation errors on something that’s only 6.5k of markup means (sorry to say) you don’t have HTML, you’ve got gibberish.
Seriously this:
<ul>
<div class="post-9 post type-post hentry category-events" id="post-9">
Which you do a couple times on the page? Completely invalid markup. DIV’s cannot be direct children of UL.
You are trying to apply that background-image to #wrapper, right? Set overflow:hidden; and a haslayout trigger so it wraps child elements, end of problem.
Though really, I think about two thirds of your tags need to go on the cutting room floor. WAY too much markup for such a simple layout… Though I’m assuming that’s Wordpress under the hood given the endless horde of pointless id’s and classes on the LI in the menu?
I’d also try to clean up the heading orders since it’s improper to skip over levels; those h3 in the sidebar should be H2 – though at that point given this is fixed width I’d probably try moving those AFTER the content area. It’s also VERY improper to have more than one H1 tag… You have three. It also appears that the same ID’s are used more than once, which is also invalid markup. You can’t do id=“readMore” or id=“cat-list” twice on a page, those have to be classes. ID’s are unique, can only be assigned once in your HTML – classes can be reused over and over.
NOT that I would suggest doing a fixed width layout over a fixed dimension image – which is why I’d throw the entire layout away as a non-viable accessibility /FAIL/.
Oh, and the comment placement is very likely to trip rendering bugs in IE (yes, I said COMMENTS can trip IE rendering bugs). The comment should be put before the closing tag so it doesn’t accidentally end up between floats, and while at it lose the “end of” text as pointless – we know what </div> means…
Also… (just working my way through it) there’s no reason to put title attributes on a link that’s the same as the text inside the link - though that could just be Wordpress ruining you since their coders are so inept at creating markup you might as well have a seven year old coding your site for you.
If I was writing that same HTML for that appearance, it would probably go something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
name="robots"
content="noindex,nofollow"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Townships « Top of Lake Superior
</title>
</head><body>
<div id="pageWrapper">
<div id="firstSideBar">
<h1>
Top of Lake Superior
<span></span>
</h1>
<ul id="mainMenu">
<li><a href="http://modocom.ca/tls">Home</a></li>
<li class="current"><a href="http://modocom.ca/tls/?cat=7">Townships</a></li>
<li><a href="http://modocom.ca/tls/?cat=1">Events</a></li>
<li><a href="http://modocom.ca/tls/?cat=5">Attractions</a></li>
<li><a href="http://modocom.ca/tls/?cat=6">Accomodations</a></li>
<li><a href="http://modocom.ca/tls/?page_id=2">Directory</a></li>
</ul>
<!-- #firstSideBar --></div>
<div id="content">
<div class="article">
<img
src="http://modocom.ca/tls/wp-content/themes/topoflakesuperior/images/township-image.png"
alt="two people by shoreline"
class="leadingPlate"
/>
<div class="innerWrapper">
<h2>
<a href="http://modocom.ca/tls/?p=45" rel="bookmark">Dorion</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ornare orci. Fusce lacinia pellentesque neque, ut malesuada ligula consectetur commodo. Vestibulum eleifend porttitor molestie. Nulla dapibus justo interdum leo placerat venenatis. Integer non nunc sed urna scelerisque vestibulum non id odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus varius nisi, vitae [...]
</p>
<a class="readMore" href="" />Visit Site</a>
<!-- .innerWrapper --></div>
<!-- .article --></div>
<div class="article">
<img
src="http://modocom.ca/tls/wp-content/themes/topoflakesuperior/images/township-image.png"
alt="two people by shoreline"
class="leadingPlate"
/>
<div class="innerWrapper">
<h2>
<a href="http://modocom.ca/tls/?p=45" rel="bookmark">Dorion</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ornare orci. Fusce lacinia pellentesque neque, ut malesuada ligula consectetur commodo. Vestibulum eleifend porttitor molestie. Nulla dapibus justo interdum leo placerat venenatis. Integer non nunc sed urna scelerisque vestibulum non id odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus varius nisi, vitae [...]
</p>
<a class="readMore" href="" />Visit Site</a>
<!-- .innerWrapper --></div>
<!-- .article --></div>
<!-- #content --></div>
<div id="secondSideBar">
<div id="search">
<h2>Search</h2>
<!-- #search --></div>
<div id="events">
<h2>Events</h2>
<ul>
<li><a href="http://modocom.ca/tls/?p=9" rel="bookmark">Clelia II docks in Red Rock Marina</a></li>
<li><a href="http://modocom.ca/tls/?p=1" rel="bookmark">Pancake Breakfast</a></li>
</ul>
<!-- #events --></div>
<!-- #secondSideBar --></div>
<div id="footer">
2010 Top of Lake Superior
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Which throws out about half the markup. Of course that would take an all new CSS to even function.
