Grow your CSS skills. Land your dream job.

Padding problems causing parent div expansion!

  • # May 15, 2013 at 2:03 am

    Hey,

    I am having some problems with a navigation I am creating.

    Basically I have a parent header with a fixed width of 350px and my nav with a width of 100%.

    Within my nav there are li elements which when I set the padding for (as the class named .nav-big) it seems to be basing off the full document rather than just the nav and therefore is expanding across the page – this is why the padding at the moment is;

    header {
    float: left;
    width: 350px;
    height: auto;
    margin-top: 1%;
    margin-right: 1%;
    outline: 1px solid #000;
    }

    nav {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    outline: 1px solid yellow;
    }
    nav ul{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:center;
    }
    nav ul li {
    margin: 6% 0;
    padding: 0;
    display: block;
    font-family: “Kalinga”;
    font-size: 28pt;
    color: #7f7f7f;
    position: relative;
    }

    nav ul h3 {
    outline: 1px solid red;
    margin: 0;
    padding-top: 10%;
    line-height: 0;
    font-size: 20pt;
    z-index: 100
    }
    .nav-big {
    margin: 0;
    outline: 1px solid blue;
    position: relative;
    padding: 15% 20% 0 20%;
    z-index: 1000
    }

    Thanks :)

    # May 15, 2013 at 5:18 am

    I done this [codepen](http://codepen.io/unasAquila/pen/qsnky) and it seems to do exactly what your asking it to do in the css so could you replicate with a new codepen

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

You must be logged in to reply to this topic.

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