Home/ Questions/Q 6373227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:20:16+00:00

I was just going through some tutorial on responsive web design or fluid layouts.

  • 0

I was just going through some tutorial on responsive web design or fluid layouts.

In the example, a 3-column layout automatically converts to a 2-column layout at lower screen sizes. They have made that possible through 2 CSS properties;

float:none
margin-right:0

Could you please help me understand how this happens and margin-right is calculated based on what?

Link to example http://www.alistapart.com/articles/responsive-web-design/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The article definately is a show you an example of how I do it, so you can take it an adapt it to your particular needs. You will have to go a step beyond. Hopefully the following explanations and @Wesley’s answer will help you do that.

    float:none

    By setting float:none on the elements (that were previously floated), this causes these elements to stack on top of each other for those sizes of screens. The floating perviously caused the elements to line up side-to-side.

    margin-right:0

    In this example, they are setting margin-right:0 so that those imagines line up nicely on the right hand side. If you notice, those images are the ones that are the furthest right for those sizes of screens. If margin-right wasn’t set to zero, it would inherit the style of .figure which does have a margin-right applied.

    • 0