Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS layout techniques – Part 2

Sunday, November 3rd, 2013 by Servage

Fluid page design
In fluid page layouts (also called liquid layouts), the page area and columns within the page get wider or narrower to fill the available space in the browser window. In other words, they follow the default behaviour of the normal flow. There is no attempt to control the width of the content or line breaks; the text is permitted to reflow as required and as is natural to the medium.

css part 2 layot

Fluid layouts are a cornerstone of the responsive web design technique. Now that web designers are coming to terms with the vast variety of browser window and screen sizes, particularly those smaller than the traditional desktop monitor, many are moving to designs that flex to fill the browser width, whatever that might be. Because it is futile to try to build a fixed-width design for every screen size, I think fluid layouts will see resurgence.

Of course, fluid layouts have both advantages and disadvantages.

  • Fluid layouts keep with the spirit and nature of the medium.
  • They avoid potentially awkward empty space because the text fills the window.
  • On desktop browsers, users can control the width of the window and content.
  • No horizontal scrollbars.
  • On large monitors, line lengths can get very long and uncomfortable to read.
  • They are less predictable. Elements may be too spread out or too cramped at extreme browser dimensions.
  • It may be more difficult to achieve whitespace.
  • There is more math involved in calculating measurements.

How to create fluid layouts
Create a fluid layout by specifying widths in percentage values. You may also simply omit the width attribute, in which case the width will be set to the default auto setting and the element will fill the available width of the window or other containing element.

One potential drawback to fluid layouts is overly long line lengths, but you can prevent the layout from becoming ridiculously wide by specifying a maximum width for the page. You can also use min-width to keep the page from getting crazy skinny. That gives you some of the advantages of a fixed layout while still providing flexibility at sizes in between.

min-width and max-width are not supported by Internet Explorer 6, but there is an IE-specific CSS patch you can use if you really need to support that old dinosaur.

div#main {
width: 70%;
margin-right: 5%;
float: left;
background: yellow;
div#extras {
width: 25%;
float: left;
background: orange;

In this two-column layout, the width of each div has been specified as a percentage of the available page width. The main column will always be 70% of the width of the window, and the right column fills 25% (the remaining 5% is used for the margin between the columns), regardless of the window size. You’ve already gotten a taste for this approach when you created a column with a float.


Resources for further reading

CSS layout techniques - Part 2, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.