I have a div within a tag, this has a fixed width, height and margin.
<center>
<div id="360container" style="width:1252px; height:805px; margin-right:50px; margin-left:50px">This is div
</div>
</center>I want to decrease the width when this div not fit's the browser anymore, when the browser width is less than 1252+50+50px, and i want the height to decrease but still keep the same ratio(1252x805).
How can this be done?
On
Try this code and let me know whether it satisfies you or not.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
When you want to apply a specific style when the screen size width between 320px and 480px for example ,You can use ( @media queries) to detect the screen size.:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
{
/* your style here */
}
Here is something that may work, pure CSS
<div id="360container" style="position: relative; height: 0; margin:0 auto;
overflow: hidden;width:60%; max-width:500px; padding-bottom:25%; border:1px solid #000;">
<div style="position:absolute; top:0;width:100%;height:100%;max-height:200px;background:#ccc;"></div>
</div>
Take a look at the fiddle
On
if you want your website to be responsive use percentage widths instead of pixels.... for eg.
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 100%;
height: 300px;
border: 1px solid black;
}
</style>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
You can add the following CSS :