Personally I am not a fan of fluid layouts both from a design point of view and for practical readability purposes unless the designers really know what they are doing. However there are plenty of reasons to use a fluid page, or even some fluid layout elements while some are fixed.
For example on this site I did for someone the masthead needed to always be 100% width in order to do my design. The css for that is:
#hd {
width: 100%;
height: 182px;
background: transparent url('_assets/images/layouts/bg.hd.jpg') center top no-repeat;
}
While the main content of the page (content and sidebar is contained within a div):
#doc {
position: relative;
/*top: 182px;*/
width: 987px;
margin: 0 auto;
/*min-height: 100%;*/
}
#bd {
float: left;
width: 694px;
margin-top: 18px;
margin-bottom: 36px;
}
#sb {
float: right;
top: 0;
right: 0;
width: 272px;
height: 100%;
margin-top: -50px;
font-size: 11px;
line-height: 18px;
z-index: 2;
}
So here I am using a fluid header with static content containers.
But then on the same site I needed to use a wider layout for the forums while using a fixed width for the rest of the site. However, because I don’t like to read really wide pages I also decided not only did that page have to be “fluid” it needed to not ever get too wide (such as for people such as you and me with wide-ass monitors). But it could never get to skinny or some of the functionality would be lost.
So the css for that page became:
.forum #doc {
width: 98%;
max-width: 1200px;
min-width: 987px;
/*float:right;*/
}
.forum #bd, .forum #ft {
float: none;
overflow: hidden; /* vital */
width: auto;
margin-right: 290px;
}
.forum #sb {
float: right;
margin-left: -280px; /* ie-hack */
}
So here instead of the #doc wrapper element having a set width like on the other pages it now has a width of 98%. Then I quit floating the #bd content container and let it be as wide as it could taking into account the width of my still floating sidebar AND limited it to a max-width so it couldn’t get too wide and min-width to prevent it from becoming unusable.
It is important to note here that at no point did I change the markup between the forum page and the rest of the site but I made that one page switch to a fluid layout with that little bit of css.
However, fluid layouts are a tricky game for a variety of reasons. But if you really want to do it definitely google up some tutorials on fluid layouts, starting reading articles at AListApart.com, and just experiment. Experiment and regular research will get you where you want to be.
And I’m just gonna throw this out there: Never make a website wider than 976 or so pixels unless you have a darn good reason (or REALLY know your demographic). There are still a lot of people using 1024 pixel wide screen resolutions out there and even if there weren’t as you get much wider than that you start to make the page less and less readable. But of course there are ALWAYS reasons to defy the rules, just know when before you do it. But generally speaking width: 1899px; is pretty absurd and you definitely should be using percentages at that point.
Simple fluid percentage example markup:
<div id="bd">
...content...
</div>
<div id="sb">
...sidebar...
</div>
And the css to make it work:
#bd {
float: left;
width: 80%;
}
#sb {
float: right;
width: 18%;
}
While this will work it has a load of problems for practical site design. Namely you probably at least want your sidebar column to be a fixed width (and often you’ll see fluid layouts with three columns). And then you get into the game of max-width’s and margins to tame portions of the layout, which hopefully were demonstrated in a useful manner in the examples above. But keep at it and you’ll get it.
Try this article at smashing magazine. It says what I was saying only a whole lot better.
