Responsive Web design Layout Code - html

Question

*
{
margin: 0px;
padding: 0px;
}
body {
background-color: #FFAF0A;
}
#wrapper {
width: 100%;
height: 1000px;
}
#header {
background-color: #222222;
height: 120px;
width: 100%;
}
#body {
width: 100%;
height: 700px;
}
#leftNav {
float: left;
width: 15%;
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 85%;
float: right;
height: 700px;
background-color: white;
}
#footer {
background-color: #222222;
height: 100px;
}
Hello all, this is my layout for my web page. Is this responsive? If not how can I make it responsive. When it comes to graphics what do i do with pixels? convert them to percentages?
Thank you in advance.

Answer 1

'Responsiveness' has more things to consider than making heights and widths in % of the total available. It should include css #media queries, should consider resized images for different screen widths, should also consider image layouts and dimensions for device positions like ipad vertical or horizontal.
This 'responsive' term is still not clearly defined and I can say the stylesheet you wrote above is not responsive.
EDIT
Since you are doing this in dreamweaver, it has all things you need to do for a responsive web scroll. Just follow to create responsive web page while starting a new project. Also, dreamweaver has really good interface in the bottom of the editor which has tabs of desktop, mobile device, and a tabular device icons which show how your code looks in each type of device. You should also have flexibility of jquery-mobile in it, because it contains all those things bundled, and more interestingly, it writes plain CSS for your wysiwyg editing. (Though it includes many stylesheets, beyond you feel their requirement).

Answer 2

You could also use css3 #media queries to include or exclude items depending on the size of you page.
A good way to experiment would be to shrink or expand your browser on a desktop of laptop computer.
For more on this, see..
Css Media queries
The others are correct about % though. When you use declare % rather that static px dimensions, you are setting your elements to adapt to a certain % of their parent elements.

Answer 3

Still your css will behave like liquid layout. It will break on very large screen. As you wish to create the website on 960px. So you have to give the css for wrapper like below:
#wrapper {
width: 960px;
max-width:100%;
height: 1000px;
}
due to max-width:100% your wrapper will automatically behave liquid format in small screens. Other child elements you can use % value as well.
Now there is a question how to convert fix px value to % or em.
So here is the simple rule to do this.
for em value: child width / parent width = em
For % value: (child width / parent width)x100 = %
Example:
#wrapper width is: 960px;
#leftNav width is: 200px;
#content width is: 750px;
Now for per you have to do follow the above mention rule:
#leftNav {
float: left;
width: 20.83333333333333%; /* (200/960)x100 */
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 78.125%; /* (750/960)x100 */
float: right;
height: 700px;
background-color: white;
}
you can use this rule to define the fonts size in percent or em .