CODEWITHSUNDEEP
htmlcss
user1117313
user1117313

Reputation: 1985

CSS: Using different width depending on screen resulution

I have following structure of an HTML document:

<body>

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
<div>

</body>

Is it possible to define different width for the main, left, center and right depending on the screen resulation. For example if the screen resulution is 1280 or higher, main width should be 1140px. If it is 1280 or lower, the width should 960px? Thanks.

PS. I understand we can define the width in %, but I am interested to know if we can define 2 different fixed widths.

Upvotes: 0

Views: 862

Answers (4)

Orentet
Orentet

Reputation: 2363

this can be achieved using javascript:

<script language="javascript">
if ((screen.width>=1024) && (screen.height>=768)) {
  alert('High resolution');
} else {
  alert('Low resolution');
}
</script>

Upvotes: 1

Murtaza
Murtaza

Reputation: 3065

this is the javascript you can use to check the screen width and height. 

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

reference.. http://andylangton.co.uk/articles/javascript/browser-screen-resolution/

Upvotes: 1

jeanreis
jeanreis

Reputation: 908

Using only CSS, you can use media queries. Here's the spec, and some examples. Note that not all browsers support this feature.

Upvotes: 3

Maheep
Maheep

Reputation: 5605

Use JavaScript for this. Jquery can can give better syntax. Use screen.width to get the width of user screen and then resize your content accordingly.

Upvotes: 1

Related Questions