CODEWITHSUNDEEP
csszooming
user1652000
user1652000

Reputation: 23

CSS layout zoom issue

My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.

When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...

Here are some screenshots to illustrate my problem:

When zoomed-in:

zoomed-in

When zoomed-out:

zoomed-out

Here is my code:

HTML:

<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="title_bar">
            some txt here
            <div id="title_img"></div>

            <div id="title_txt"></div>

            <div id="menu_navigation"></div>
        </div>

        <div id="title_bar_2">
            some txt here
        </div>

        <div id="container_columns">
            <div id="column_1">
                <span id="column_1_content">some txt here</span>
            </div>
            <div id="column_2">
                <span id="column_2_content">some txt here</span>
            </div>
        </div>
    </body>
</html>

CSS:

html body
{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color:#f2f2f2;
}

div#title_bar
{
    height:4%;
    width:76%;
    margin:auto;
    margin-top:4%;
    border-style:solid;
    border-color:blue;
}

div#title_bar_2
{
    text-align:center;
    height:44%;
    width:76%;
    margin:auto;
    margin-top:2%;
    border-style:solid;
    border-color:blue;
}

div#title_bar img
{
    margin-top:1%;
    float:left;
}

div#title_txt
{
    float:left;
    margin-left:2%;
    margin-top:1.4%;
    font-style: italic;
    font-family:verdana;
    font-size: 16px;
}

div#menu_navigation
{
    float:left;
    margin-left:35%;
    margin-top:1.4%;
    font-size:19px;
}

div#container_columns
{
    margin:auto;
    width:76.5%;
    margin-top:2%;
    height:27%;
    border-style:solid;
    border-color:blue;
}

div#column_1
{
    height:100%;
    width:49%;
    float:left;
    border-style:solid;
    border-color:blue;
}

div#column_2
{
    margin-left:1%;
    width:48%;
    float:left;
    height:100%;
}

Upvotes: 2

Views: 3345

Answers (1)

andres83
andres83

Reputation: 310

Hi This is happening because you are using the property height. try not to use it, if you want this property.

html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}

div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}


div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}

div#title_bar img{
margin-top:1%;
float:left;}


div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}

div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}

div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}

div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}

div#column_2{
margin-left:1%;
width:48%;
float:left;}

Upvotes: 2

Related Questions