Last nav button doesn't fill its respective space

Question

I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.

If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.

The 3 .nav items are located inside of a #header item. Here is the respective CSS:

    #banner, #header, #content {
        margin: 2.5% 15% 2.5% 15%;
    }
    #header, #content {
        border-radius: 0.375em;
        background-image: url('http://shacktown.com/engine/img/trans.png');
    }
    .nav {
        height: 2em;
        padding-top: 1.0em;
        text-align: center;
        color: #000000;
        font-size: 1.2em;
        float: left;
        width: 33%;
        cursor: pointer;
        border-left: 0.1em solid #333333;
    }
    .nav:hover, .navSelected {
        background-image: url('http://shacktown.com/engine/img/trans.png');
    }
    .navSelected {
        cursor: default;
    }
    .nav:first-of-type {
        border-radius: 0.375em 0 0 0.375em;
        border-left: none;
    }
    .nav:last-of-type {
        border-radius: 0 0.375em 0.375em 0;
        width: 34%;
    }

Any idea why it isn't filling up the whole space?

score 0 · Answer 1 · answered Dec 29 '14 at 00:22

:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.

So remove this line from html:

<div style="clear: both;"></div>

and change width of the class nav to %33.3

these will do the trick.

Weafs.py · Answer 2 · 2014-12-29T00:38:39.230

0

Change the rule for .nav to following:

.nav {
    height: 2em;
    padding: 1em 0 2.5em 0;
    text-align: center;
    color: #000;
    font-size: 1.2em;
    float: left;
    cursor: pointer;
    border-left: 0.1em solid #565656;
    width: 33.33%;
    box-sizing: border-box;
}

And add a new rule:

.nav:last-of-type:hover {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Remove the whitespace in your markup:

enter image description here

And this is the result you'll get.

enter image description here

edited Dec 29 '14 at 00:38

answered Dec 29 '14 at 00:28

Weafs.py

22,731
9
56
78

I tried this but now when you hover over Contact, the edges aren't rounded anymore. – SISYN Dec 29 '14 at 01:08
@danL - Did you add the new rule for `.nav:last-of-type:hover`? – Weafs.py Dec 29 '14 at 01:08
Yes, but I changed 5px to 0.375em to match the other side's radius. – SISYN Dec 29 '14 at 01:13

score 0 · Answer 3 · edited May 23 '17 at 10:33

there is no selector with only class only

CSS: How to say .class:last-of-type [classes, not elements!]

so you can do

set .nav as display:inline-block and remove clear div so that they are inline

here is the demo

.cont {
  font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
  display: inline-block;
  font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
  background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
  background: red;
}
.float .test {
  float: left;
}
.float .clear {
  clear: both;
}

<p>used inline-block instead of float</p>
<div class="cont">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="clear"></div>
</div>

Last nav button doesn't fill its respective space

3 Answers3