CSS Overlapping div's

Question

i have 4 div's:

#centered {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 500px;
    height: 500px;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
    }
#container{
    width:100%;
}

(left and right are in this container)

 #left{
        float:left;
        width: 260px;
        height: 600px;
    }
    #right{
        float: right;
        top: 50%;
        width: 160px;
        height: 600px;
    }

the div centered is always in the center of the page, and the other two are at the sides. using

body { min-width:1150px; }

there always is a space between #centered and #right. but when i shrink the page, no space is being kept between #centered and #left, causing overlap. How can i do this?

Answer 1

You could add a guttering <div> and adjust your positions accordingly, or you could reduce the width of #left . Using percentages rather than px for the width of #left and #right will make it smoother when resized.