Question

I’m intentionally pushing my link text below their containing <div class="box">

The problem is that the wrapper doesn’t include the link text. How do I get it to encompass said text?

Here’s the fiddle.

<div id="wrapper">
    <div class="box lowest"><a href="#">Home</a></div>
    <div class="box medium"><a href="#">About</a></div>
    <div class="box"><a href="#">Products</a></div>
    <div class="box medium"><a href="#">Services</a></div>
    <div class="box lowest"><a href="#">Contact</a></div>
</div>

#wrapper{
    width: 600px;
    margin: 0 auto;
    text-align: center;
    border: solid 1px green;
    position:relative;
    white-space: nowrap;
    letter-spacing: 15px;

}

.box a{
    padding-top: 105px;
    display: block;
}

.box{
    width:75px;
    height: 100px;
    background-color:red;
    border: solid 1px black;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}

.lowest{
    margin-top:50px;
}

.medium{
    margin-top:25px;            
}
​

Screenshot

Answer 1

To #wrapper, add:

padding-bottom: 30px;