have the content div be always centre aligned no matter what the window size is and regardless of whether the sidebar is there_问答_开发者

have the content div be always centre aligned no matter what the window size is and regardless of whether the sidebar is there

开发者 https://www.devze.com 2023-04-06 08:44 出处：网络

I would like to have a specific layout but don\'t know how to fix it up in CSS. here is my code: <html>

相关专题：css

I would like to have a specific layout but don't know how to fix it up in CSS. here is my code:

<html>
    <body>
        <div id="outer" style="text-align:center;">      
            <div id="mainContent" style="background-color:red; width:700px; margin-left:130px; 

                    display:inline-block;">
                <p>A Lot of Text Here. Yes, A Lot of Text. Gotta Love it. More Text.</p>
            </div>
            <div id="rightNav" style="background-color:blue; width:130px;                                   display:inline-block;">
                <p>Some Text</p>
            </div>
        </div>
    </body>
</html>

Now the problem is:

I want to have the content div be always centre aligned no matter what the window size is and regardless of whether the sidebar is there. The content is around 700px and the sidebar around 130px. The sidebar needs to sit to the right of the content.

Now I have managed to accomplish the above, but the tricky problem is how can I fix this so that when the wi开发者_运维知识库ndow size is say 830px (700+130) that all content is visible and half of the sidebar is not cut off due to the content div being centred.

I hope I have explained this clearly enough.

Update: I have update the code to include CSS. As you can see the red section is centered, the blue to the right. This is what I want, expept when the window gets too small, I always have a minimum of a 130px gap on the left which is not what I want. (but had to put it in there to get the layout aligning right)

Something like this may help

<html>
  <body style="overflow:hidden;">
      <div id="mainContent" style="overflow:auto; position:absolute; top:0px; left:0px; right:130px; bottom:0px;"></div>
      <div id="rightNav" style="overflow:auto; position:absolute; top:0px; width:130px; right:0px;"></div>
  </body>
</html>

Edited:
@Nathan Arthur was so kind to add a nice fiddle to demonstrate the solution above.

...Demonstration of this in action: jsfiddle.net/2QQtU Try moving the middle divider to see the magic.

CSS

#outer {
   position:relative;
   width:830px;
   margin:0 auto;
}

#content, sidebar {
   float:left;
}    

#content {
   width:700px;
   background-color:#afa;
}

#sidebar {
   width:130px;
   background-color:#faa;
}

That's all :)

*EDIT* just added background-colors to see the example better.

It appears what I want is not possible in a single solution. I will need to use conditional CSS to accomplish this.