The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Padding problems causing parent div expansion!

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #44786


    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;
    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 :)


    I done this [codepen]( 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)
  • The forum ‘CSS’ is closed to new topics and replies.