CODEWITHSUNDEEP
htmlcsszoomingoverlap
user3643016
user3643016

Reputation: 3

Divs Go On Top Of Other Div When Zoom

I'm currently working on a website, however I've ran into a problem. At default page zoom (!00%), my website looks fine, however for some reason when I zoom in, my side bars go on top of my main div. Check the screenshots:
https://i.sstatic.net/yxyWt.png --normal
https://i.sstatic.net/zzD9T.png --zoomed

Here is my css and html:

<!--Main Content-->
    <div id="main">

    </div>

    <!--Navigation-->
    <div id="sidebox">
        <div id="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">REGISTER</a></li>
                <li><a href="">DOWNLOADS</a></li>
                <li><a href="">CHAT BOX</a></li>
                <li><a href="">FORUM</a></li>
                <li><a href="">RANKINGS</a></li>
                <li><a href="">DONATE</a></li>
            </ul>
        </div>

    </div>
    <!---->

    <!--Server Information-->
    <div id="sidebox">

    </div>

    <!--Partners-->
    <div id="sidebox">

    </div>

-----------
        * {
    margin: 0;
    padding: 0;
}

body {
    width:100%;
    max-width:960px;
    height:100%; 
    margin:140px auto 0;
    background-image: url('../img/bg.png');
}

#sidebox {
    background-color: #333;
    border: 1px solid black;
    outline: 2px solid #444;
    width:230px;
    min-height:100px;
    float:left;
    margin-bottom:14px;
}

#main {
    background-color: #333;
    border: 1px solid black;
    outline: 2px solid #444;
    float:right;
    width:712px;
    min-width:10px;
    height:auto;
    min-height:600px;
}

#nav {
    font-family: arial;
    background:red;
}

#nav ul {
    list-style-type: none;
}

#nav ul li {
    background: url('../img/navbg.jpg');
    padding-top:5px;
    padding-bottom: 5px;
    padding-left:5px;
    border-bottom: #262626 solid;
    border-top: #262626 solid;
    border-width: 1px;
}

#nav ul li a {
    color: #0d0d0d;
    font-size: 14px;
    text-decoration: none;
}

Does anyone have any idea what I've done wrong and how to fix this issue? thanks i appreciate it much

Upvotes: 0

Views: 1590

Answers (1)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

Your #main and #nav have fixed widths. When you zoom they can't fit into body so that happens. Give body width of 960px. When you zoom you will get horizontal scroll bar but they will not overlap.

#body {
    width: 960px;
}

DEMO

Upvotes: 1

Related Questions