On my website, I have a 2 column layout and I want the navigation section to appear below the main content for SEO purposes in HTML.
However, I encountered an issue - on certain pages, I need to hide the navigation section which results in the content not stretching to 100% width as desired..
Below is the basic code structure:
Page Type 1:
<div id="wrap">
<div id="content"></div>
<div id="navigation"></div>
</div>
Page Type 2:
<div id="wrap">
<div id="content"></div>
</div>
CSS Styling:
#wrap{
position:relative;
}
#content{
margin-right:200px;
}
#navigation{
width:200px;
position:absolute;
right:0px;
top:0px;
}
If you'd like to experiment with it:
http://jsfiddle.net/fWrAu/3/
I managed to resolve this issue using JavaScript, but users without JS enabled may still see the right margin on page type 2.