Question

I have three Div blocks overlapping each other when I resize the window of the browser.

My code is:

CSS

.face{
    width:100%;
    overflow: hidden;
    clear:both;
    clear:left;
    clear:right;
}
    .center {
    width:80%;
    height:3000px; 
    margin:50px auto auto -100px; 
    text-align:center;
    float:left;}.

    .contact{
    width:10%;
    float:left;}

    .menu{
    width:10%;
    float:left;}

HTML

    <div class = "face">

    <div class ="menu">
        <ul class="nav">
        </ul>
    </div>
    <div class="center">
        <div class ="content">
            <?php   ?>
        </div>
    </div>  
    <div class = "contact"> 
            <div id="scrollingDiv"> 
        </div>  
    </div>
</div>      

The page this code is from: enter link description here
I have tried many methods to stop the overlapping. I have tried using relative/absolute positioning. I have also tried without floats. I recently tried using left and right padding, all to no avail.

Any suggestions or working examples would be great.

Answer 1

I think you mean that in Internet Explorer, the element with the class ‘center’ doesn’t maintain a minimum width. I don’t see the same issue in Firefox 9. I haven’t tested, but try giving ‘content’ a fixed width of say 640px.