Creating a Fluid Design – CSS Tips for when you want to create a fluid layout

April 12, 2007 at 4:01 am 7 comments

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.



Entry filed under: css.

Top tricks and hacks in CSS How to style quotations in CSS

7 Comments Add your own

  • 1. Imad  |  August 17, 2007 at 4:31 pm

    Very Nice tutorial! Thanks allot!

  • 2. alex  |  January 19, 2008 at 3:25 am

    The min-width attribute doesn’t seem to work in ie, correct?

  • 3. cssfreak  |  April 25, 2008 at 9:07 am

    i never tried, but probably ie6 doesn’t allow min-width, but probably ie7 does, as it is true-css complaint browser…. drop support for ie 6, who cares? its easy to code only one version for your site for all browsers!

  • 4. Kazelyqe  |  May 24, 2008 at 2:58 pm

    Hi webmaster!

  • 5. Nikolay  |  January 21, 2009 at 8:10 am

    Very Useful Article. Thank you

  • 6. Mohan  |  September 1, 2009 at 9:10 am

    Hhow fluid design acheived throgh % and em…Can we use % and em together. In which situations em is used?

  • 7. Missing Link Social Midea  |  August 15, 2013 at 7:50 pm

    we help brands drive sales and reach, connect, engage and maintain relationships with their target audience via social media.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

Flickr Photos

Blog Stats

  • 720,244 hits

%d bloggers like this: