There is probably a simple answer for this i am overlooking. My content is in a div container on the main page. I want it to be horizontally centred however when the browser is shrunk to small it overl开发者_如何学Caps my side menu. I want it to stop moving left when it gets to 200px for example.

It is currently centred by having a negative margin of half the width (-350px) then positioning it at 50%.

My css is here

paper {

position:absolute;
z-index:6;
overflow: hidden;
visibility: visible;
float: left;
left: 50%;
margin-top: 0px;
padding-top: 0;
padding-right: 0;
padding-bottom:200;
padding-left: 0;
background-color: #000;
height: 900px;
width: 700px;
margin-left: -350px;

}

any help would be much appreciated

cheers

Centre the container using: margin:0 auto; instead of absolute positioning, then then apply a left and right padding of 200px; (padding: 0 200px;).

This will centre your container and give a space of 200px on either side when minimising the browser window.

This first bit is more of a general comment on solving CSS problems. If you install the firebug add-on for firefox, then whenever you're previewing your page, you can edit the css and inline styles in real-time to see what property affects your UI in the way you like. In this case, you'd load up your page, inspect the 'paper' div, and try changing properties like padding-left, position, margin, etc.

In this case, your problem is related to the fact that this div is floating, so it can overlap other content. If your side menu is also floating (left) then it will not overlap with any other float: left elements. Also, because you're using overflow:hidden, it won't wrap below the menu like it normally would.

Finally, it isn't clear in the OP, but if the menu you're talking about is on the right, then make both float: right.

You will have to rework your HTML and css to make it happen.

<div id = "sidebar"></div>
<div id = "content">
    <div id = "content_inner"></div>
</div>

with that new HTML you will also need new CSS

#sidebar{
float:left;
width:200px;
}

#content{
padding-left:200px;
}

#content_inner{
    margin:0px auto; /* This will center your box in the parent box */
    width:700px;
}

At a certain point, you still might have to let go on your design, you can't stop someone to view you site in a 100px wide screen. You should try to optimize your pages for a minimal size (Actually most of the sites gets developped for a 960 pixels display or wider)

you might also be able to find more info on this here : http://css-tricks.com/the-perfect-fluid-width-layout/