CODEWITHSUNDEEP
csshtml
ARH
ARH

Reputation: 1395

Fix div relative positions after zoom

I have 3 div blocks, the first one is bigger on the left hand side of the web-page and the other are smaller in located the right hand side. I want their relative location become fixed in all browsers with any zoom level. The two div blocks in the right column drop down below the first big div if I zoom in now.

Here is JFFIDDLE link of the code, please zoom in/out to see the issue.

<div id="topdiv">

    <div class="bigdiv">
        <p> big div </p>
    </div>  

    <div id="staticcal">
        <p> staticcal </p>
    </div>      
    <div id="staticnews">
        <p> staticnews </p>
    </div>

</div


#topdiv{
    display: inline-block;
    background-color:#b0c4de;
}

.bigdiv{
    margin: 10px 0;
    position: relative;
    width: 335px;
    height: 250px;
    float: left;
    border: 2px solid #c7930d;
}

#staticcal {
    width: 220px;
    height: 100px;
    line-height: 175px;
    float: right;
    display: inline-block;
    border: 2px solid #c7930d;
    border-radius: 4px;
    margin: 5px;
    margin-top: 10px;
    margin-right: 0px;
    position: relative;
}
#staticnews {
    width: 220px;
    height: 100px;
    line-height: 175px;
    float: right;
    display: inline-block;
    border: 2px solid #c7930d;
    border-radius: 4px;
    margin: 5px;
    margin-right: 0px;
    position: relative;
}

Upvotes: 0

Views: 1707

Answers (2)

Overflow Stack
Overflow Stack

Reputation: 833

I noticed that you are using border-radius in your development, so I updated your file to account for cross browser use. Here is an updated JSFiddle for your review. Additionally I lined up your staticcal and staticnews by adding float: left. Here is a minified version of your code: CLICK HERE

HTML:

<div id="topdiv">
    <div class="bigdiv">
        <p>big div</p>
    </div>
    <div id="staticcal">
        <p>staticcal</p>
    </div>
    <div id="staticnews">
        <p>staticnews</p>
    </div>
</div>

CSS:

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
    position: relative;
    float: left;
    border: 2px solid #c7930D;
}
.bigdiv {
    margin: 10px 0;
    width: 335px;
    height: 250px;
}
#staticcal, #staticnews {
    display: inline-block;
    line-height: 175px;
    width: 220px;
    height: 100px;
    margin: 5px;
    margin-top: 10px;
    margin-right: 0px;
    -webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
    -moz-border-radius: 4px; /*Firefox 1 to 3.6*/
    border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
    text-align: center;
}

Upvotes: 1

Overflow Stack
Overflow Stack

Reputation: 833

Add min-width: 800px; to the #topdiv id in your CSS file.

CSS: 

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}

Upvotes: 3

Related Questions