Overflow problem

My containing DIV isn't stretching to the width of its contents
because of the padding. My links and 'This Page' div sizes are
matching, but the border / background color width isn't matching. The
only solution I came up with is setting overflow to hidden and all
elements are clipped to the width of the containing div (which isnt
stretching) but this eliminates any right-padding that I want to see.
Help appreciated,

##### HTML #####
<div class="sideBox LHS">
<div>This Page</div>
<a href="#">Hm</a>
<a href="#">Hmm</a>
<a href="#">Hmmm</a>
<a href="#">Hmmmm</a>
<a href="#">Hmmmmm</a>
</div>

##### CSS #####
..LHS {
margin-left: 2.5mm;
float: left;
clear: left;
}

..sideBox {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
width: 10em;
margin-top: 5mm;
}

..sideBox div {
width: 100%;
font-weight: bold;
padding: 0.5ex 0.75em;
font-size: 95%;
border-bottom: 1px solid black;
}

..sideBox a, .sideBox span {
background-color: #ccc;
width: 100%;
color: black;
text-decoration: none;
line-height: 1.25em;
display: block;
padding: 1ex 0.75em;
font-size: 75%;
}

On Jan 23, 8:00 am, noon <Nun... (AT) gmail (DOT) com> wrote:

My containing DIV isn't stretching to the width of its contents
because of the padding. My links and 'This Page' div sizes are
matching, but the border / background color width isn't matching. The
only solution I came up with is setting overflow to hidden and all
elements are clipped to the width of the containing div (which isnt
stretching) but this eliminates any right-padding that I want to see.
Help appreciated,

##### HTML #####
div class="sideBox LHS"
div>This Page</div
a href="#">Hm</a
a href="#">Hmm</a
a href="#">Hmmm</a
a href="#">Hmmmm</a
a href="#">Hmmmmm</a
/div

##### CSS #####
.LHS {
margin-left: 2.5mm;
float: left;
clear: left;

}

.sideBox {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
width: 10em;
margin-top: 5mm;

}

.sideBox div {
width: 100%;
font-weight: bold;
padding: 0.5ex 0.75em;
font-size: 95%;
border-bottom: 1px solid black;

}

.sideBox a, .sideBox span {
background-color: #ccc;
width: 100%;
color: black;
text-decoration: none;
line-height: 1.25em;
display: block;
padding: 1ex 0.75em;
font-size: 75%;

}

Fixed by setting .sideBox a, .sideBox span width to auto and
removing .sideBox div's width. Is this safe? Seems to work fine in
FF2 and IE6.

On Jan 23, 1:13 pm, noon <Nun... (AT) gmail (DOT) com> wrote:

On Jan 23, 8:00 am, noon <Nun... (AT) gmail (DOT) com> wrote:



My containing DIV isn't stretching to the width of its contents
because of the padding. My links and 'This Page' div sizes are
matching, but the border / background color width isn't matching. The
only solution I came up with is setting overflow to hidden and all
elements are clipped to the width of the containing div (which isnt
stretching) but this eliminates any right-padding that I want to see.
Help appreciated,

##### HTML #####
div class="sideBox LHS"
div>This Page</div
a href="#">Hm</a
a href="#">Hmm</a
a href="#">Hmmm</a
a href="#">Hmmmm</a
a href="#">Hmmmmm</a
/div

##### CSS #####
.LHS {
margin-left: 2.5mm;
float: left;
clear: left;

}

.sideBox {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
width: 10em;
margin-top: 5mm;

}

.sideBox div {
width: 100%;
font-weight: bold;
padding: 0.5ex 0.75em;
font-size: 95%;
border-bottom: 1px solid black;

}

.sideBox a, .sideBox span {
background-color: #ccc;
width: 100%;
color: black;
text-decoration: none;
line-height: 1.25em;
display: block;
padding: 1ex 0.75em;
font-size: 75%;

}

Fixed by setting .sideBox a, .sideBox span width to auto and
removing .sideBox div's width. Is this safe? Seems to work fine in
FF2 and IE6.

Er, so I thought it was fixed.

My problem here is that I want a user to be able to click any part of
the anchor and it "hover" so that they can activate the link. This is
why I want <strong>.sideBox a, .sideBox span</strong> width at 100%.
Without the width at 100, IE6 won't render the anchor as the entire
box.

Help appreciated