Most website owners, for obvious reasons, want their websites to be highly trafficked. When I build a site for a client, I always make an effort to keep search engine optimization (SEO) in mind so I can help them grow their traffic/clientele/customer base. There are thousands of companies out there claiming they know the secret to landing you at the top of Google search results, but when it comes down to it, there is no one answer… there are a lot. One such item to try for your site is keeping the relevant content of your pages at the top of your HTML code. Sometimes this can be difficult for people working on websites that have a multiple column layout with something like navigation or ads on the left and the main relevant content on the right. Now some might say there are simple solutions to this problem involving using float left and right CSS properties for your respective divs that contain each column, but there are some layouts that require a more sophisticated solution, that is much less prone to break regardless of the actual content.
When implementing this for my fulltime employer, College Prowler, I stumbled upon a genius post by Matthew James Taylor who has a series on multi-column liquid layouts that are all cross-browser compatible and SEO friendly in the sense that I speak of above. I adapted it a little bit to account for some specific 10px margins and a specific navigation width of 300px, which you can also adjust. The requirements are quite simple to implement, and here’s how to do it:
The HTML:
<div class="mainWrap">
<div class="mainSubWrap">
<div class="mainContentWrap">
<div class="mainContentSubWrap"><!--All your main content goes in here--></div>
</div>
<div class="navContentWrap"><!--Nav content goes in here--></div>
</div>
</div>
The CSS:
.mainWrap {
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
margin: 10px 0px;
}
div.mainSubWrap {
float: left;
width: 200%;
position: relative;
left: 290px;
}
div.mainContentWrap {
float: right;
width: 50%;
position: relative;
right: 290px;
}
div.mainContentSubWrap {
margin: 0px 10px 0px 310px;
position: relative;
right: 100%;
}
div.navContentWrap {
float: left;
width: 290px;
position: relative;
right: 290px;
}
Basically you end up using relative positioning to move the navigation box over to the left of the main content box, and visa versa, yielding the main content appearing on the right side of your screen, but appearing first in your code. The benefit to this over a simple float is the ability to assign background colors that you want to fill to the bottom of the screen regardless of whether or not the background colored div is the largest in height. It is also pretty much a sure bet that it won’t break across browsers.
Definitely give it a shot, and if you have any questions, don’t hesitate to ask!
Almost all websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site,