Creating fluid layout

Question

Im trying to convert all my margins to percentages to make a fluid layout, but what if the parent element does not have a margin value to use as the context in my css, for example below, if I wanted to convert the margins of header to percentages, my context would be the px value of body. Do I then have to give a margin value to body? If I want to convert the width value of the header, must body need to have a width value as well and html since it is the oldest parent element?

Currently my header obtains the width that I resize my screen at, what is the standard max-width that is used for the oldest parent element in a website?

Also, I am trying to create a responsive website from a mobile first to desktop first approach. Does it matter if I am using the Smells like Bakin tutorials which is doing desktop to mobile?

Thanks!

<html>
 <body>
<header>
      <a href="home.html" id="logo">
          <img src="img/mob-shpe-header.jpg" alt="">
      </a>
      <nav class="navclass">
        <ul>
          <li><a href="home.html" class="selected">Home</a></li>
          <li><a href="about.html">Members</a></li>
          <li><a href="gallery.html" >Gallery</a></li>
          <li><a href="history.html">History</a></li>
        </ul>
      </nav>
    </header>```


CSS

```body {
  font-family: 'Open Sans' , sans-serif;

}

header{
  float: left;
  margin: 0 0 20px 0;
  padding: 5px 0 0 0;
  width: 100%;

}```

Answer 1 · 2014-07-09T09:17:50Z

July 9, 2014 9:17am

% based widths are a funky thing to be working with that's for sure, I can't quite see your code right now as I'm on mobile but the quick answer is this;

As you know % widths are calculated from the total parent width which in turn is calculated from its parent and so on. This presents a challenge as what most people forget is that <body> has no width itself so this must be first set as it will effect each child. Set the body width to 100% first then follow on from there.

Why not take a look at Guil Hernandez's course on CSS layouts. It's helped me massively.

http://teamtreehouse.com/library/css-layout-techniques

Welcome to the Treehouse Community

Looking to learn something new?

Henry Lopez

Henry Lopez

Creating fluid layout

1 Answer

Jason Broderick

Jason Broderick