Free CSS Templates

Fluid basically means a template which expands horizontally to fit the screen size of each computer which may have different resolutions which with a fixed template would either cause is to scroll from left to right to see the whole page or to have big expanses of empty space with a large resolution. It is therefore sometimes better to use a fluid design, despite the added difficulty to design and code. When people decide they want to make a fluid design they should take into account a number of extra details which would be much more simple with a fixed with design

. If you use images for headings which are not repeated in the x axis we need to take account for that and if we end up with a really thin left column our navigation may mess up. Some of these are quite easy to overcome, others less so. I will go over a few little tips I use for when I design a fluid template.

The first big problem we have is usually with images. Now when I design a template in photoshop to be later coded into a XHTML website I take into concideration the css attributed I will later be using. When you design headings or titles which contain text like the black and pink titles to the left you should make them so they can repeat in the horizontal axis. This means you can select a 1px wide and whatever pixel high image and just repeat it to form the background. This therefore has no problem expanding with a fluid design. If however you do make it so it can’t be repeat you should do the following. If it is on the left or right columns you probably don’t want it to change in size. This would possibly mess your navigation up and cause text to go onto two lines where you don’t want it. I would therefore use a fixed width for a navigation column. This is usually around 220px. You can then float this to the left and just have a percentage width for your main content box.

Our new problem is that we now don’t know what to make the main content box’s width since the other is fixed. My first tip is to use float:left rather than float:right. Generally people use float:right for their right column but if we did this the margin between the left column navigation and right column content would change with the different resolutions of screen which generally is quite strange. If we instead float it to the left we can define the margin between the two divs with a simple margin-left attribute. To work out the width you will need the right column to be I suggest experimenting. You could work it out with reasonably simple maths but who wants to do that? Just put your screen resolution ot 800px x 600px via the control panel on your computer. Then fiddle with the width of the righ column so it fits perfectly with the left column with no space left over. You can then go back to your usual resolution and check if it still looks okay or if the gap on the far right is too big. It usually takes a bit of time with the width of the left and right columns and the margins to get it just right.

My next tip is to use the min and max width attributes. If you have your screen resolution in 800 x 600px and made the screen slightly less that full the whole design would mess up. To solve this we can use the min-width attribute in css. When the wrapper div gets to this width it does not get any smaller. You can therefore put your main site wrapper div and apply a width of 100% but a min-width:800px which would cause the design to remain intact and the way you want it to look for sizes of screen below 800px. This does however bring a scroller up, but this is better than having a broken design and columns being all over the place.

You can also use javascript and have separate css stylesheets for each different screen resolution or even different type of browsers. This however is something I tend not to do and would generally stay away from.

If you have any questions about the tutorial and tips I just gave please post a comments or email me via the contact form. No copying of this tutorial is allowed.