Sometimes we need to change the layout of the page based on the resolution of the client machine or browser. For example, in one web site, I was required to change the position of the navigation bar. If the page is displayed in 800×600 mode, navigation bar has to be displayed on the right hand side. In case of 1024×768 resolution, it has to be on the left hand side. Even the appearance, font and background color, has to be changed for each position. So I did this using the JavaScript and CSS.
This post describes how to change the CSS based on the resolution of the browser. This is a step by step walk through.
Step 1 – Create CSS for 800×600 resolution
Create a new CSS file and name it 800.css. This CSS file will have styles for the 800×600 resolution. For this example I have chosen the background color as green and position of navigation bar on right hand side. Copy and paste (or type) the following code into this file and save this.
body{ background: #FF9999;}
.navbar{ float:right;}
Step – 2 Create CSS for 1027×768 resolution
Create another CSS file for the 1024x768 resolution and name it as 1024.css.
I have chosen the background color to be red and position of the navigation bar on the left hand side.
The code for this file is as below:
body{ background: #99FF99; }
.navbar{ float:left; }
Step – 3 Create HTML File
Create a HTML file. This HTML file will import both the style sheets i.e 800 and 1024.
The code for this file is given below.
<HTML>
<HEAD>
<TITLE>Dynamic Layout</TITLE>
<link rel="stylesheet" type="text/css" href="800.css" id="800">
<link rel="stylesheet" type="text/css" href="1024.css" id="1024">
</HEAD>
<BODY>
This is the test for dynamic layout.
<div class="navbar">
<a href="#"> Navbar Link 1</a><br />
<a href="#"> Navbar Link 2</a><br />
<a href="#"> Navbar Link 3</a><br />
<a href="#"> Navbar Link 4</a><br />
<div>
</BODY>
</HTML>
Don’t forget to provide the Ids in the link tag. These Ids will be used in JavaScript to apply particular CSS. In the Body there is a div which displays the navigation bar. Class ‘navbar’ is applied on this div.
Step – 4 Insert JavaScript to handle resolution
The trick to change the CSS at client side is implemented through the JavaScript. Insert the below code into the ‘head’ section of HTML file created in the step 3.
<script type="text/javascript">
if (window.innerWidth <= 800){
document.getElementById("1024").disabled=true;
document.getElementById("800").disabled=false;
}
else{
document.getElementById("800").disabled=true;
document.getElementById("1024").disabled=false;
}
</script>
Window.innerWidth is JavaScript that provides the width of the browser window that is available to the HTML page. Based on the value of innerWidth property, I have enabled the desired CSS file and disabled the other.
The complete file should look like:
<HTML>
<HEAD>
<TITLE>Dynamic Layout</TITLE>
<link rel="stylesheet" type="text/css" href="800.css" id="800">
<link rel="stylesheet" type="text/css" href="1024.css" id="1024">
<script type="text/javascript">
if (window.innerWidth <= 800){
document.getElementById("1024").disabled=true;
document.getElementById("800").disabled=false;
}
else{
document.getElementById("800").disabled=true;
document.getElementById("1024").disabled=false;
}
</script>
</HEAD>
<BODY>
This is the test for dynamic layout.
<div class="navbar">
<a href="#"> Navbar Link 1</a><br />
<a href="#"> Navbar Link 2</a><br />
<a href="#"> Navbar Link 3</a><br />
<a href="#"> Navbar Link 4</a><br />
<div>
</BODY>
</HTML>
Save all the files and run the HTML File. Now change the resolution and run the file again.
. 
