When dealing with these types of layouts, my advice is don’t even try using the floats to position that stuff… instead, I advise using a negative margin to “ride up” the later stuff after the heading. Of course, you’ve gone JUST a little div and tag wrapping crazy here – naturally being HTML 5 this is little if any surprise.
Even with HTML 5 on the plate, your code doesn’t make any sense – you open an aside and then close a DIV? What? You’ve got a presentational affectation of text with no text and no alt text (meaning no calls), style inlined in the HTML… It’s a giant mess of code for nothing. Exactly what I mean when talking about “making HTML 3.2 and slapping a 4 tranny or 5 lip service on it” – AND “extra tags for nothing” in HTML 5… Setting coding practices BACK a decade.
Much less the menu that follows using CONTENT CLOAKING with the nonsensical H1… and comment placements likely to trip rendering errors in IE and some versions of FF…
Oh and little tip, if your TITLE attribute is IDENTICAL to the content of the tag, and you aren’t assigning accesskeys, there is NO REASON to use TITLE in the first place! Though this:
page_item page-item-47
speaks volumes – turdpress; saddling you with rubbish HTML since 2003.
Where you have:
<header id="branding" role="banner">
<div id="headertop">
<div id="headleft">
<img src="wp-content/themes/toolbox/images/tollfree.png" style="margin-left: 24%;" />
</div>
<div id="headmiddle">
<a href="http://www.buddygregg.com/"><img src="wp-content/themes/toolbox/images/headerlogo.png" alt="Buddy Gregg Motor Homes LLC" /></a>
</div>
<div id="headright">
<!-- LiveZilla Chat Button Link Code (ALWAYS PLACE IN BODY ELEMENT) --><a href="javascript:void(window.open('http://hippo.arvixe.com/~bgmh1986/livezilla/chat.php','','width=590,height=610,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="http://hippo.arvixe.com/~bgmh1986/livezilla/image.php?id=01&type=inlay" width="120" height="30" border="0" alt="LiveZilla Live Help"></a><!-- http://www.LiveZilla.net Chat Button Link Code -->
<aside id="search" class="widget widget_search">
</div>
</div>
<nav id="access" role="navigation">
<h1 class="section-heading">Main menu</h1>
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu"><ul><li class="current_page_item"><a href="http://hippo.arvixe.com/~bgmh1986/" title="Home">Home</a></li><li class="page_item page-item-47"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=47" title="About">About</a></li><li class="page_item page-item-171"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=171" title="Consignment">Consignment</a></li><li class="page_item page-item-140"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=140" title="Contact Us">Contact Us</a></li><li class="page_item page-item-82"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=82" title="Events">Events</a></li><li class="page_item page-item-84"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=84" title="Financing">Financing</a></li><li class="page_item page-item-24"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=24" title="Inventory">Inventory</a></li><li class="page_item page-item-80"><a href="http://www.buddygreggparts.com/" target="_blank" title="Parts Store">Parts Store</a></li><li class="page_item page-item-22"><a href="http://hippo.arvixe.com/~bgmh1986/?page_id=22" title="Service">Service</a></li></ul></div>
<aside id="search" class="widget widget_search">
<form role="search" method="get" id="searchform" action="http://hippo.arvixe.com/~bgmh1986/">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" onfocus="this.value=''" value="Search our site!" name="s" id="s" size="10" />
<input type="submit" id="searchsubmit" value="Go!" />
</div>
</form>
</aside>
</nav><!-- #access -->
</header><!-- #branding -->
I’d probably just have:
<h1>
Buddy Gregg <span>Motor Homes</span>
</h1>
<a
href="javascript:void(window.open('/~bgmh1986/livezilla/chat.php','','width=590,height=610,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"
class="LiveZillaChatTop"
>
<img
src="/~bgmh1986/livezilla/image.php?id=01&type=inlay"
width="120" height="30"
alt="LiveZilla Live Help"
/>
</a>
<div class="callNow">
Call Now!<br />
1-800-420-0031
<!-- .callNow --></div>
<ul class="skipto">
<li>
<a href="#content"
title="Skip to Content"
accesskey="1"
>Skip to content</a>
</li>
<!-- I'd have a LOT more in here, probably with accesskeys! -->
</ul>
<ul id="mainMenu">
<li><a href="/~bgmh1986/" class="current">Home</a></li>
<li><a href="/~bgmh1986/?page_id=47">About</a></li>
<li><a href="/~bgmh1986/?page_id=171">Consignment</a></li>
<li><a href="/~bgmh1986/?page_id=140">Contact Us</a></li>
<li><a href="/~bgmh1986/?page_id=82">Events</a></li>
<li><a href="/~bgmh1986/?page_id=84">Financing</a></li>
<li><a href="/~bgmh1986/?page_id=24">Inventory</a></li>
<li><a href="http://www.buddygreggparts.com/">Parts Store</a></li>
<li><a href="/~bgmh1986/?page_id=22">Service</a></li>
</ul>
<form method="get" id="topSearch" action="/~bgmh1986/">
<fieldset>
<label for="s">Search for:</label>
<input
type="text"
onfocus="this.value=''"
value="Search our site!"
name="s" id="s"
size="10"
/>
<input type="submit" class="submit" value="Go!" />
</fieldset>
</form>
Throwing away ALL the pointless HTML 5 bloat, all the extra DIV for NOTHING, cleaning out all the classes and attributes that weren’t doing anything useful, etc, etc, etc… Even if I were to put the HTML 5 back in, the search form is NOT an aside, the menu title is content cloaking and should NOT be a H1 (shouldn’t even be in the markup IMHO), none of those classes the nimrods who wrote wordpress throw on there for no good reason are neccessary, etc, etc…
Basically taking your original 2.8k for that section and turning it into 1.6k. A little less than two-thirds… Apply this thinking across the entire page axing all the javascript for nothing and endless DIV for nothing, and the whole thing could probably be cut down to 8 to 10k instead of the 28k you have now.
Even just simple stuff – take this for example:
<div id="viewer" class="js-disabled">
<a class="wrapper" href="http://buddygregg.com.gall.arvixe.com/?page_id=24?http://dealertrax.com/bgmh/webpix_list.asp"><img class="logo" id="apple" src="wp-content/themes/toolbox/images/logos/thor.png" alt="Thor" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/monaco.png" alt="Monaco" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/dutchmen.png" alt="Dutchmen" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/forestriver.png" alt="Forest River" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/gulfstream.png" alt="Gulfstream" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/heartland.png" alt="Heartland" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/itasca.png" alt="Itasca" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/keystone.png" alt="Keystone" /></a>
<a class="wrapper" href="#"><img class="logo" src="wp-content/themes/toolbox/images/logos/newmar.png" alt="Newmar" /></a>
</div>
If they are ALL getting the same class inside a container with a perfectly good ID on it, NONE of them need classes! CSS 101.
I have a saying, CSS is only as good as the markup it’s applied to – and your markup… well, is likely causing most of your headaches.
But I say that automatically with that fat bloated “return to 1997” HTML 5 nonsense on the table, and when Turdpress is on the table? Together?!? Mein gott.
though I do suspect that keeping your current markup, the opening the aside then closing a DIV is your big culprit – looks like those should be reversed.