Fixed-width or Percent-based website design - css
My question is very basic and generic.
I am starting on designing a page(s) using div tags. now I am confuse with two approaches.
should I keep width and height of divs fixed (i.e. fixed with pixels) or
should I keep width and height of divs variable (i.e. using % instead of pixels).
I personally like the first approach where you fix everything and there is very little chance of anything getting disturbed at different screen resolution but the drawback is if screen resolution goes below my expected screen resolution then the scroll bars makes the site look bad(there may be more drawbacks but at present I am not remembering it :) ) , so in that case 2nd approach comes into the picture but the thing is once you start using % for your width and height its very difficult to design the page though once its designed its more stable.
I am confused with the two approaches and need inputs on the above two...
thanks in advance.
You answered your own question. The second approach is better in most of the situations, as it would fit all the screen resolutions nicely. Think of when somebody tries loading your page using a mobile phone, then using percentage will help.
And I don't think using percentage make it harder to design, I even think it's easier. For example, if you want to adjust the main table width to be 1/4 of the screen, now you only need to set width: 25% instead of setting (say) width: 250px; and guess if it works on this size of monitor or different sizes of monitor.
Imagine that you're currently working on a 17" laptop, and the width of your page layout is set fixedly 800px that would fit your screen at the moment. But when you run it on the 24" monitor, that layout will look like a paper on a desk.
With percentage, say, 70% would fit your 17" laptop and also, 24" monitor.
Here is a sample fluid HTML page for you to reference, try to see how it looks with percentages. Note that no matter you minimize the screen, the layout can still adjust. Just simply copy and paste, this is the point of designing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
html, body{
height:100%;
}
/* Backward Compatible for IE6 */
* html #container{
height:100%;
}
/* Top logo and bottom footer */
div#logo, div#footer {
max-width: 90%;
color:#000000; background-color:#ffffff;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Top navigation bar */
div#navbar {
max-width: 90%;
color:#ffffff; background-color:#124a9f;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Container for three lower boxes */
div#container {
max-width: 90%;
height:70%;
color:#000000; background-color:#ffffff;
margin-bottom:10px; margin-left:auto; margin-right:auto;
}
/* Main content (center box) */
div#main {
overflow:auto;
height: 100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#efecf8;
}
/* Full navigation menu (left box) */
div#leftcol {
float:left;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
/* Featured content (right box) */
div#rightcol {
float:right;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
</style>
</head>
<body>
<div id="logo">
Logo
</div>
<div id="navbar">
Navigation Bar
</div>
<div id="container">
<div id="leftcol">Left Column</div>
<div id="rightcol">Right Column</div>
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
</div>
</div>
<div id="footer">
©2011 Ideal Web Design Co.
</div>
</body>
</html>
It all depends on the layout and design of the website you are creating.
the 2nd approach is used in "fluid" layouts (websites that need to extend and take all the space available to them), otherwise you don't have other notable advantages vs. fixed layouts.
I recommend that you look at the statistics on screen resolutions provided by W3C here:
http://www.w3schools.com/browsers/browsers_display.asp
As you can see, 800x600 is almost gone, so focusing on 1024x768 and up will help.
I don't know how far you are into the learning process, but when you feel like taking a look at what most developers use, I recommend you visit the 960 grid system:
http://960.gs/
That's a question that really depends on what functionality will reside within those divs. If it needs to grow, then percentage is probably warranted. If not, then you should be ok with using px
I guess the 1st approach is better for 99% of the wepapps. You can look Blueprint css framework, is a very easy and clean way to use grid like layouts.
Related
Problem with css propriety "background-clip: text;" and W3C validator
I would like to put on a text a gradient of two colors.
After some searches, here is the css code I got:
p{
background: linear-gradient(red, blue);
-webkit-text-fill-color: transparent;
background-clip:text;
-webkit-background-clip:text;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum vitae sem at ornare. Cras in massa et ante suscipit dignissim. Donec finibus, erat ac vehicula fringilla, magna nibh molestie est, sit amet pellentesque magna augue in lectus. Sed volutpat enim augue, tempor luctus lectus laoreet a. Integer et nibh nunc. Quisque ac est a sapien blandit rhoncus. Cras maximus mi eu quam auctor facilisis. Aenean a nisl lacus. Vivamus elementum aliquet magna, vel efficitur augue luctus vitae. Sed sit amet lectus feugiat, gravida urna id, imperdiet neque. In nec nulla et ante tristique dapibus eu ac eros. Vestibulum vitae tellus mattis, facilisis massa a, mollis ante. Curabitur et orci laoreet, porttitor ipsum ac, mattis elit. Proin in feugiat dolor, non volutpat velit.</p>
I got the desired result, but on W3C validator, "background-clip: text;" does not pass.
I would like to know if there is another way to achieve this result but that goes to W3C.
Thank you in advance
PS: I must only use HTML/ CSS
PS2: Sorry if the question has already been asked.
Text Overlapping over Image
The structure of my image and paragraphs is as follows: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p> <div class="_idGenObjectLayout-3"> <div id="_idContainer062" class="ObjExpOpt-Images"> <img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" /> </div> </div> <p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p> When the page renders, the text of the lower paragraph overlaps over the image. How can I prevent this and make sure that the distance between the image and the parapgraph is 5 px and no overlap occurs whatsoever. Thanks! Here's a live demo with my problem http://jsfiddle.net/zvnjnxnf/
Everything looks ok here: JsFiddle
p {display: inline}
img {display: block}
first, you should remove all the style for All-Book-Text and _idGenObjectLayout-3
then add the following css :
._idGenObjectLayout-3{
padding : 5px;
}
align property in css
I have the below html.What I am trying to do is center the contents of the p tag.The thing is that if I do a align on the div then it works but when I do it in the p tag it does not.Not good with css and want quick solution so asking u guys for help. <html> <head></head> <body> <div> <p align="center" style="width:500px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor neque augue. Mauris a ante et libero tincidunt lacinia. Donec at lorem eu mi sagittis pretium. Donec sed ligula vel nunc placerat auctor quis vitae est. Nullam varius leo sed elit auctor rutrum. Pellentesque at erat quis nibh eleifend tincidunt sed feugiat est. Fusce dolor ante, imperdiet in congue ut, vulputate vitae nisi. Vivamus hendrerit felis a leo laoreet eget mollis purus tempus. Etiam fringilla est lacus. Praesent quis purus sem. Vestibulum interdum scelerisque consectetur. Nam nulla est, lacinia in eleifend eget, ultricies at est. Phasellus congue sollicitudin tellus, sit amet lobortis odio interdum et. Quisque turpis elit, feugiat in laoreet mollis, tempus et leo. Morbi eget viverra enim. Donec nec lacus dolor. Suspendisse tincidunt mi in enim gravida et fringilla lacus ultrices. Integer ac augue at nulla sollicitudin placerat. Morbi et ligula quis mauris consequat egestas vel et sapien. Ut ut justo a augue ullamcorper egestas ullamcorper vel nisl. Cras quam ligula, pharetra at pulvinar et, scelerisque vel erat. Donec scelerisque metus vitae libero accumsan quis suscipit urna pretium. Curabitur imperdiet, turpis a pulvinar adipiscing, nibh felis fringilla felis, nec consequat felis justo accumsan est.</p> </div> </body> </html>
align is a deprecated attribute in HTML 5 .. instead give the <p> an explicit width and add: margin: 0 auto; to center the entire element (top/bottom 0, left/right auto) or text-align: center; to center the elements text
Text is center aligned. I have tested it in latest IE, Chrome and Firefox. You can try <p style="width:500px; text-align:center">
That's because the property align is meant for divs. Also, it is deprecated, there are better ways to style your paragraphs than that.
Here's a jsFiddle example.
CSS:
div {
width:100%;
}
p {
text-align:center;
}
HTML:
<div>
<p>Hello</p>
</div>
I've just checked your problem, and actually the text is centered in your p tag. I think you are trying to move your p tag in the center of the div,
and you can achieve that by
p
{
margin:0 auto;
}
here is also a fiddle
just an advice: a good practice is to separate your styles from your html, so move all your styling to a separate style sheet.
Try <p style="width:500px;margin:auto">...</p>
Make paragraph text fill container
I've seen a property that allow you to fill the entire width of a container with text, ala magazine style. It simply increases the space between words to accommodate for the additional space. What is this property?
You're thinking of text-align: justify.
div {
text-align: justify;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec nisl ipsum, at ullamcorper justo. Vivamus ac dui lorem. Aliquam nec diam urna, in semper augue. Etiam commodo dui velit. Vestibulum in nibh nulla, a feugiat justo. Proin accumsan, tellus et condimentum laoreet, lacus lorem consequat nisi, ac fermentum velit eros at metus. Aliquam lacinia mollis felis, vel pretium nulla condimentum consectetur. Quisque in mattis nibh. Nunc adipiscing tincidunt elit, vitae pellentesque felis molestie ac. Fusce vestibulum dui in nibh gravida ut placerat ligula porta. Ut sem lectus, condimentum nec tincidunt a, imperdiet vitae risus.</div>
Expanding a div to fill the page
I'm creating a webpage where the content div should fill all of the screen. At the moment it shrinks to the amount of content.
The footer should be 'sticky' and sit at the bottom of the screen (imagine there's hardly any content).
I've got the footer bit sorted, I'm just struggling with the height of the content div. How do I go about making the content div fill up the entire screen?
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
#wrap {min-height:100%;}
header {
height:100px;
background:green;
}
#main {
background:yellow;
overflow:auto;
padding-bottom:50px;
}
#main {
font-size:28px;
overflow:none;
}
footer {
position:relative;
margin-top:-50px;
clear:both;
height:50px;
background:red;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
This is the header
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a viverra mauris. Aenean eu facilisis enim. Cras laoreet diam at lorem euismod condimentum. Morbi diam nisi, eleifend id varius vitae, ultrices sed nunc. Aenean facilisis, arcu sed congue tempor, leo nisi convallis dolor, et malesuada velit tortor id neque. Nullam nec eros est, at hendrerit risus. Vivamus in sollicitudin elit. Vivamus id odio justo, eget condimentum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mauris massa, iaculis eu laoreet sit amet, suscipit nec dolor. Ut rutrum porttitor viverra. Proin convallis, turpis id varius varius, nisi nulla vulputate dolor, vitae mattis neque quam ac nulla. Fusce accumsan, urna nec vulputate imperdiet, tortor erat fringilla massa, nec convallis ligula risus vitae mauris. Vivamus sagittis pulvinar ipsum, bibendum congue purus gravida posuere.</p>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non lorem id ante scelerisque malesuada id ut nibh. Duis massa erat, dictum hendrerit interdum ut, faucibus non lorem. Sed velit leo, pellentesque sit amet dapibus vel, vestibulum ac sem. Nulla a hendrerit risus. In sodales ultricies lorem at tempus. Fusce sed velit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut mi nunc, et tristique ipsum. Cras lobortis augue eget enim sodales et sollicitudin turpis feugiat. Morbi a interdum felis. Donec porttitor nibh ut metus commodo et pulvinar dui pretium. Fusce pellentesque felis in metus vehicula feugiat.</p>
<p>
Duis suscipit nibh non leo venenatis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt sapien id purus tempus ac viverra sapien vulputate. Fusce eu tortor purus. Mauris sit amet diam a arcu hendrerit auctor. Mauris vel nunc nec leo gravida ullamcorper. Donec eu arcu nibh, eu feugiat lorem. Nunc euismod ligula nec est lobortis vehicula. Etiam feugiat lacus in nulla porttitor eu iaculis dui dictum. Nullam gravida enim in leo tempor euismod. Cras porttitor, neque at molestie egestas, metus nisl tincidunt lacus, non vestibulum metus sapien eu est. Mauris tempus mattis quam eu elementum. Curabitur tempor feugiat massa, sit amet tempor mauris fermentum ut. Nullam faucibus lobortis lectus, ac fermentum sapien venenatis eget.</p>
<p>
Nulla facilisi. Proin a lorem non justo gravida pharetra a at dolor. Phasellus vitae viverra purus. Nullam at tellus id orci ornare cursus. Maecenas velit ante, egestas eu auctor at, lacinia in massa. Morbi sit amet turpis a neque vestibulum pulvinar. Aliquam erat volutpat. Ut accumsan aliquet sodales. Praesent tortor turpis, vulputate quis bibendum eu, pharetra vestibulum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem ac consectetur volutpat, diam sem bibendum lectus, vitae sagittis eros odio eget urna. Sed ipsum nulla, interdum nec accumsan at, faucibus at est. Vivamus faucibus condimentum erat, id varius metus cursus non. Vestibulum ut justo fringilla enim pellentesque auctor pretium eget quam.</p>
<p>
Ut in urna quis turpis placerat volutpat. Integer vel tincidunt sem. Pellentesque semper venenatis vestibulum. Pellentesque pretium volutpat neque eu dignissim. Aenean consectetur, magna in hendrerit sodales, mauris libero ullamcorper lectus, in imperdiet enim odio quis sem. Donec sed tellus urna, non sodales massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum dolor nec sem gravida dignissim. Curabitur in ante leo. </p>
-->
</div>
</div>
<footer>
This is the footer
</footer>
</body>
</html>
Try to set the footer to position: fixed bottom: 0 left:0 This should do the trick positioning the footer sticky to the bottom. But if the body expands beyond the footer it could pose an issue.
It seems like you might already know this, but in order to make an element fit the height of the viewport, it, as well as every other ancestor element, needs to be 100% height.
You've already done this for body and html (which is good), but you need to do this for #wrap too. Min-height won't work for that. Then, you'll want to set your header to a percentage height too so that you can have the #main div fill up the rest of the viewport. Something like:
#wrap { height: 100%; }
header { height: 10%; }
#main { height: 90%; }
This should take care of filling up the viewport, since your html and body are already set to height: 100%;