CODEWITHSUNDEEP
htmlcss
JoannaFalkowska
JoannaFalkowska

Reputation: 3677

Size behaviors differently specified in percent and em/px

I have a nav wrapped in header element and same width content frame that should be placed below it.

This is how page looks like when I specify header width in %:

example1

This is when it's specified in ems or pxs:

example2

So why just in % it's not working properly?

HTML: ("content" class is added only for setting the same color)

    <header id="page-header">

        <img id="logo" .../>

        <nav class="content" id="page-nav">
            <ul>
                <li><a href="#">...</a></li>
                ...
            </ul>
        </nav>

    </header>


    <section class="content" id="content-container">            
        ...
    </section>

CSS: (just important parts)

    /*CSS reset*/
html, body, div, ul, li,
article, footer, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}

article, footer, header, nav, section {
   display: block;
}
/*end of CSS reset*/

/*header*/

#page-header {
    margin-bottom: 3em;
    height:20%; <----- this is where exactly I have a problem 
}

#logo {
    float:left;
    display:block;
    margin-left: 30px;
    width: 420px;
}
#page-nav
{
    margin-left:30%;
    margin-right:10%;
}
#page-nav a {
    float:left;
    display: block;

    width: 12.5%;
    min-width:100px;
    height: 2em;
    line-height: 2em;

    margin: 3em 1.04%;
    vertical-align: middle;

}

#page-nav li:first-child a {
    margin: 3em 1.04% 3em 0;
}

#page-nav li:last-child a {
    margin: 3em 0 3em 1.04%;
}



/*content frame*/

#content-container {

    margin-left: 30%;
    margin-right: 10%;
    margin-bottom: 5%;

    padding: 2em 6em;
}

Upvotes: 0

Views: 58

Answers (1)

Samih
Samih

Reputation: 1088

Percentage heights are relative to the first position: relative container or if none of them are then the html/body tag heights. My guess is you didn't specify a height on parent containers so 20% is not as big as you think it should be.

Have a look at what the parent containers' height is and add a position: relative to it. Then set the #page-header height percentage to the necessary proportion of the parent container.

If the parent container is the html <body> element, then try this:

html, body {
    height: 100%;
}

Upvotes: 1

Related Questions