Two column layout, #navigation on the right, but below #content in html?

Issue

I have 2 column layout and for SEO reasons I want #navigation div lay below main #content div in HTML.

The problem is - on some pages I want to hide #navigation, so #content must stretch to 100%, but it doesn`t..

Here is the basic code

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

#wrap{
   position:relative;
}
#content{
   margin-right:200px;
}
#navigation{
   width:200px;
   position:absolute;
   right:0px;
   top:0px;
}

If your want to play with it:

http://jsfiddle.net/fWrAu/3/

I fix it up with JS, but users without JS would see that right margin on page type 2.

Solution

in normal page html structure like this:

<div id="wrap">
    <div id="conten">CONTENT</div>
    <div id="navigation">NAVIGATION</div>
</div>

css:

#wrap{
    position:relative;
    background-color:red;
    }
    #content{
        margin-right:200px;
        background-color:green;
    }
    #navigation{
        width:200px;
        position:absolute;
        right:0px;
        top:0px;
        background-color:blue; 
    }
    #content, #navigation {
        height:700px;
        font-size:24px;
    }

if without the navigation lets say in "about us page" html:

<div id="wrap">
    <div id="content" class="aboutUs">CONTENT</div>
</div>

then add this css:

.aboutUs {margin-right:0 !important}

demo

Answered By - jhunlio