CODEWITHSUNDEEP
csshtmlcss-floatmedia-queries
copenndthagen
copenndthagen

Reputation: 50752

CSS float:none and margin-right

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/

Upvotes: 0

Views: 5931

Answers (2)

scottheckel
scottheckel

Reputation: 9244

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.

Upvotes: 2

No Results Found
No Results Found

Reputation: 102745

The example you linked to contains a thorough explanation of the answer, more than I can provide here. They are using CSS media queries to determine the size of the viewport:

http://www.w3.org/TR/css3-mediaqueries/

Example in a CSS file:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Example using the media attribute of the <link> tag:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="my-media-specific-stylesheet.css" />

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

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style sheet’s media attribute:

The query contains two components:

  1. a media type (screen), and
  2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

Upvotes: 1

Related Questions