How to Surround Links with Bounding Box Using CSS - html

Question

In a responsive design website, I need to show four links presented side-by-side and have the collection of those 4 links enclosed within a self-resizing border. If all four links can't all fit horizontally on one line without overwriting each other, those links that can't fit should drop down to subsequent lines and the bounding border box should increase in size.
My main problem is that the bounding box... doesn't surround the links or resize properly. What am I doing wrong?
Here's the code and CSS that I've tried: http://jsfiddle.net/K3jyD/
HTML:
<div class="boundingbox">
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
</div>
</div>
</div>
CSS:
.boundingbox {
border: 1px solid red;
padding:10px;
margin:10px;
clear:both;
}
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
float:left;
padding:10px;
}
.boundeditem div {
text-align: center;
}
.boundeditem a {
text-decoration: underline;
}
I am not permitted to use jquery or external javascript libraries other than plain old html and css on this project.

Answer 1

The float:left is bringing your links outside the bounding box. Try this instead:
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
display: inline-block;
padding:10px;
}
If you want four links next to each other rather than three, make the width slightly smaller than 25% and put the padding in the div inside boundeditem rather than boundeditem itself.
.boundeditem {
width:24%;
min-width:24%;
max-width:24%;
display: inline-block;
}
.boundeditem div {
text-align: center;
padding: 10px;
}

Answer 2

add this to the .boundingbox
.boundingbox {
position: absolute;
height: auto;
}
Not sure if that's exactly what you're looking for.