Grow your CSS skills. Land your dream job.

Three-column floated layout

  • # July 16, 2008 at 9:38 am

    I’m building a page based on the tutorial code that goes along with the book "CSS Mastery" by Andy Budd from friendsofed.
    It is based on the Three-column floated layout on page 140. The CSS code has this bit;

    /* Add some padding============= */

    #mainNav, #secondaryContent {
    padding-top: 20px;
    padding-bottom: 20px;
    }

    #mainNav *, #secondaryContent * {
    padding-left: 20px;
    padding-right: 20px;
    }

    #mainNav * *, #secondaryContent * * {
    padding-left: 0;
    padding-right: 0;
    }

    I don’t understand what this is doing, and the book contains no explanation of it that I can find. If I remove it I can’t make the page look right. I know right now you’re thinking — well leave it in you idiot — and I certainly don’t mind doing that, but I would like to understand what its function is.

    I tried going to the source and posted this question on the forum at friendsofed but got no response. CSS-Tricks is one of my top 5 places for learning web design so I hope someone here can help me out.

    # July 16, 2008 at 3:18 pm

    The way I understand it is.

    Padding adds space or "padding" to the inside of an element. Think of it this way. You have a <div> and inside the div you have text. Think of the div as a box. the text inside the box is the contents of the box. The padding adds space between the contents of the box and the inner wall of that box. So that the contents don’t touch the walls. Margin add space ouside the box so that the box doesn’t touch any other box. So padding-top and padding bottom adds space to what is above the contents and what is below the content padding left and right do the same things. So this code

    #mainNav, #secondaryContent {
    padding-top: 20px;
    padding-bottom: 20px;
    }

    is saying add 20 pixels of top padding and 20 pixels of bottom padding to and element that has and id of mainNav and id of secondaryContent.

    to learn more, just google padding tutorials. or try here http://www.tizag.com/cssT/padding.php

    box
    # July 16, 2008 at 5:25 pm

    Create a page using this CSS code – then use firefox with the firebug addon and view your page. With firebug you can then ‘virtually’ deactivate elements of the code so you can see in real time what changes take affect. This is one of the best ways to learn exactly what a particular piece of code is doing.

    # July 17, 2008 at 9:59 am

    I guess I need to be more explicit.

    I understand the concept of the box model, and thus, the first segment of code. What I don’t understand is the following two sections, making use of the universal selector. If someone could explain that I would appreciate it.

    # July 17, 2008 at 5:28 pm

    Well, the * is just a wildcard selector to select any element. So, the second declaration (#mainNav *) adds 20px of left and right padding to any element at all inside #mainNav. The third declaration (#mainNav * *) then removes that padding from any element nested two levels down from the top, because it’s more specific than #mainNav *.

    It is kind of confusing…without seeing the page itself I’m not sure what the advantage is.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".