I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV
.site-content
. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.