Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a fluid grid in CSS and HTML

The article illustrates the technique of achieving a fluid grid making use of CSS and HTML.

Fluid Grid

All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A fluid grid will move in and out when you resize your browser window.

Combination fluid and fixed grids

Similar to fluid grids, except one or more of the containers on the page have fixed widths.

Fixed-width grids

All containers on the page have their widths defined in pixels or other fixed units. They are completely independent of the viewport. A fixed grid will not move in and out when you resize your browser window.

Em-driven grids

All containers on the page have their widths defined in ems. They will be scaled according to the users default browser font size. They are completely independent of the viewport.

You can also use combinations of the above.

The secret of fluid grids

Fluid grids are easy to achieve if you follow some basic rules.

  • work out a basic grid before you begin coding
  • include gutters so that your columns will not spread too wide
  • use percentage units for widths of all containers and gutters
  • do not define containers that use the full width of a page - allow for browser rendering issues (such as percentage rounding)

Step 1 – Start with a grid

It is a good idea to start by sketching (on paper or using some imaging software) a rough grid grid.

You can start by doing a grid at 800 pixels wide. Columns and gutters can be adjusted until you are satisfied with the grid. When satisfied, these pixel-based measurements are then converted to percentage units.

If you want to achieve a basic three-column grid, your sketch could look like this:

The basic column grid for this mockup is:


Column Pixel Width Percentage width
gutter1 24px 0,03
column 1 384px 0,48
gutter 2 24px 0,03
column 2 160px 0,2
gutter 3 24px 0,03
column 3 160px 0,2
gutter 4 24px 0,03
Total 800px 1

As you can see, there has been an allowance made for gutters between each column. This will add some space to the page and stop the columns from becoming too wide in very wide browser windows. This is important, as line length affects readability.

Step 2 – Leaving space

One problem with percentage widths is that they have to be calculated by the browser so there will be some degree of rounding up or down of the percentage measurements. For this reason, it is always good to leave some free space on the page so there is room for error. In this case, you will simply leave "gutter 4" undefined, so there is 3% of free space at the right of the grid.


Column Percentage width
gutter1 0,03
column 1 0,48
gutter 2 0,03
column 2 0,2
gutter 3 0,03
column 3 0,2
gutter 4 Undefined
Total 0,97

Step 3 – Making containers

You now have three gutters and three columns. The gutters can be converted to left margins for each of the columns:


Column Margin-left column width total width
column 1 0,03 0,48 0,51
column 2 0,03 0,2 0,23
column 3 0,03 0,2 0,23
Total 0,97

These three columns can be converted into

containers. You can then apply a width, “margin-left” and “float: left” to each of them:

Listing1: HTML code

<body>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</body>

Listing2: CSS code

#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
}
	
#col2
{
	float: left;
	width: 20%;
	margin-left: 3%; }

#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

Step 4 – Fixing an Internet Explorer bug

You may have noticed that there is a problem with the sample above in Internet Explorer 5, 5.5 and 6 for Windows. The left margin is wider in these browsers. Internet Explorer 5, 5.5 and 6 for Windows have issues with margins applied to floated items that touch the left or right edge of the viewport. These browsers will sometimes double these margin widths – so a 3% left-margin will become a 6% left-margin.

All other standards-compliant browsers will render a 100px left margin, but Internet Explorer 5, 5.5 and 6 for Windows will render a 200px wide margin.

This rendering issue can sometimes cause the third column to drop below the other two columns. Luckily, there is a work-arounds for this problem. In this case you can add "display: inline" to column 1 and the double float bug will disappear in Internet Explorer 5, 5.5 and 6.. The code is now:

Listing3: HTML code

<body>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</body>

Listing4: CSS code

#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
	display: inline;
}
	
#col2
{
	float: left;
	width: 20%;
	margin-left: 3%;
}
	
#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

Step 5 – Adding headers and footers

It is easy to add headers and footers to this example. The header

will naturally sit above these floated columns and gutters as long as it is not floated. The footer must be cleared from the floated item by applying “clear: both”. There are now 5
containers on the page:

Listing5: HTML code

<body>
<div id="header"></div>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="footer"></div>
</body>

Listing6: CSS code

#header
{
	margin-bottom: 10px;
}
	
#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
	display: inline;
}
	
#col2
{
	float: left;
	width: 20%;
	margin-left: 3%;
}
	
#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}
	
#footer
{
	clear: both;
} 

Step 6 – Working around the box model

If you want to inset text within these three columns and you want to apply padding to the containers, you need to remember that Internet Explorer 5 and 5.5 for Windows incorrectly render the box model.

One way to avoid this problem is apply padding to items within the containers rather than to the containers themselves. This can be done with a rule set such as:

Listing7: Inserting text within the three columns

h2, p
{
	margin-left: 7px;
	margin-right: 7px;
} 

Or, if you want to be more specific, you can choose to target a specific column:

Listing8: Target a specific column

#col1 h2, #col1 p
{
	margin-left: 7px;
	margin-right: 7px;
}

Conclusion

We learnt the technique to come up with a fluid grid explaining in detail each steps pertaining to the same making use of HTML and CSS. Hope you enjoyed the article.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login