CSS positioning for left nav

Question

I'm trying to recreate a website and position the icons in a certain way. Currently I have a black nav bar on the left with icons. I want the black nav bar to extend all the way to bottom of the page and I also want the icons to be separated.

Here is the CSS code:

#left_nav {
border: solid black;
}

#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}

HTML code:

        <div id="left_nav" class="grid_2 alpha">
            <i class="ss-icon">home</i>
            <i class="ss-icon">time</i>
            <i class="ss-icon">user</i>
            <i class="ss-icon">question</i>
            <i class="ss-icon">play</i>
        </div>

Answer 1

http://jsfiddle.net/fmpeyton/3L5YV/

A few things:

• Inline elements (ie <i> ) cannot have a margin. You'll have to make the element a block level element via display:block;
• In order for the sidebar to reach the whole page, you can set its height to 100%, but only after setting the height of its parent (in this case, the BODY and concurrently HTML elements) to 100% height.

CSS:

html, body{
    height: 100%; // height declared so child #left_nav can expand to this height
}
#left_nav { 
    border: solid black;
    height: 100%; // will expand to height of parent
}

#left_nav i {
    display:block; // added display:block; to allow for margin
    color: gray;
    padding-right: 35%;
    padding-left: 35%;
    margin: 10px 0; // only available to block level elements
}