HTML, CSS, Web Design, Photoshop Articles and Tutorials
The CSS fluid width layout
With modern screen resolutions becoming much larger and wider than before, designers often find themselves in a dilemma: should a layout be designed to fit in 800px width, 1024px width, or perhaps even more wide?
The problem of course is that if you design a wide layout of, let’s say 1280px wide, anyone viewing the page in a resolution less than 1280px will end up with a horizontal scroll bar. This is not a good thing.
On the other hand, if your layout is 800px wide, it will look very small to all users in modern resolutions (which make up the majority nowadays). The solution is to use a fluid width layout using CSS.
One thing to watch out for is how wide to make your maximum fluid width; users generally don’t want to read text that spans 1920px wide, even if their widescreen monitor supports that width.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>CSS fluid width layout example</title> <style type="text/css"> body{overflow:auto;margin:0 auto;background:#eaeaea;font-size:0.7em;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif} *{outline:none;margin:0;padding:0} #header{color:#fff;background:#061118;border-bottom:1px solid #357dac;padding:10px 0;width:100%;height:100px} #header p{text-align:center;font-size:2em} .content{width:90%;margin:0 auto;padding:6px 0 20px 10px;max-width:1260px;min-width:990px} .container{width:auto;padding:0 332px 0 0} #leftcol{float:left;margin:20px 0 0;width:100%;position:left} .mainpost{line-height:1.6em;font-size:1.3em;background:#f7f7f7;padding:1px 10px 15px} .content_block{margin:10px 0 10px;padding:0 0 20px} #sidewrap{margin:20px -310px 25px 10px;width:310px;position:relative;float:left} #tutmenu{width:170px;float:left;margin:0 0 0 5px} #tutmenu a:hover,#tutmenu a:active{color:#d76000;border-bottom:2px solid} #tutmenu ul{margin:0 0 10px;float:left;list-style:none;width:165px} #tutmenu li{width:175px;line-height:1.4em} .pagenav{margin:0;font-size:1.3em;font-weight:bold} #sidetwo{float:left;width:135px} #sidetwo img{border:5px solid} #disclaimer{color:#fff;background:#061118;border-top:1px solid #357dac;padding:10px 0;float:left;width:100%} #disclaimer p{text-align:center;margin:0} </style> </head> <body> <div id="header"> <p>Hooray for the header!</p> </div> <div class="content"> <div class="container"> <div id="leftcol"> <div class="mainpost"> <div class="content_block"> <h1>CSS fluid width layout example</h1> <p>The upper part of the page (minus the header and footer) is set to a minimum width of 990px and a maximum width of 1260px with 2 side bars next to each other at the right side. You could easily remove or add sidebar columns by changing the width and margin of the #sidewrap.</p> </div> </div> </div> </div> </div> <div id="sidewrap"> <div id="tutmenu"> <ul> <li class="pagenav">Sidebar menu <ul> <li><a href="" title="Sidebar link 1">Sidebar link 1</a></li> <li><a href="" title="Sidebar link 2">Sidebar link 2</a></li> <li><a href="" title="Sidebar link 3">Sidebar link 3</a></li> <li><a href="" title="Sidebar link 4">Sidebar link 4</a></li> </ul> </li> </ul> </div> <div id="sidetwo"> <a href=""><img src="http://www.netindesign.com/images/articles/box01.png" alt="box01" /></a> <a href=""><img src="http://www.netindesign.com/images/articles/box02.png" alt="box02" /></a> <a href=""><img src="http://www.netindesign.com/images/articles/box03.png" alt="box03" /></a> <a href=""><img src="http://www.netindesign.com/images/articles/box04.png" alt="box04" /></a> </div> </div> <div id="disclaimer"> <p>Yay footer!</p> </div> </body> </html> |
Click here to see the example.
Tags: CSS
This article is filed under the categories: Coding.
You can follow responses to this entry through the RSS 2.0 feed.
You can post a comment, or trackback from your own site.