Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

stuck on how to make margins fluid on a webpage....

I'm currently stuck on how to make margins more fluid when making a website. I understand that you have to change the px values to % but I get confused with what context value to use and what margins I need to change.

How would you go about giving this code a more fluid margin:

````html code

            <div class="grid_4">
        <img src="images/logo.gif" alt="baking company">
    </div>
    <div class="grid_8 omega">
        <ul id="nav-bar" class="nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Cupcakes and Prices</a></li>
            <li><a href="#">Locations</a></li>
            <li class="last"><a href="#">Contact Us</a></li>
        </ul>
    </div>

```css code

ul.nav {
    margin: 120px 0 0 0;
    list-style:none;
    float: right;
}

also would you need to change the margin for every piece of text like headers and paragraphs or only certain areas of the webpage.

1 Answer

Errin E. Johnson
Errin E. Johnson
22,458 Points
Errin E. Johnson
Errin E. Johnson
22,458 Points 
ul.nav {
 margin: 0 10%;
}

Margin properties go in the order of top right bottom left ; Margin properties short-cut: 0 auto; or in your case 0 10%;

you are setting the value of 120px for top margin.? when setting up grids You set for right and left width when setting the target / context = result

it looks like you are setting up a grid, what is the max-width of the grid and use that for context.

context = grid max width 1000(?)

target = ul nav margin: 120px value;

target / context = result; 120 / 1000 = 10 or 10%

   10% seems high, where did you get the 120px;?

target is the ul nav elements with its property of margin and value of 120px; context is usually in the parent element.

You need to first set a pixel value and then convert to %. if you body max-width is = to 1000 px the ul nav is nested with-in the body use 1000px as the context.
120px / 1000 px = 10, go over to the right 2 places gives you the 10% convert.

fyi: margin: 0 auto; sets your right and left margin to center content. fluid way of setting contents to center on the page. contents is not same as context. context is the circumstances surrounding an element. and content is the code - data- img, etc. So, what are the circumstances surrounding your ul.nav elements , this will give you the context to your contents. hope this helps.