Prev: two flowed columns?
Next: How is this drop shadow acheived?
From: noon on 23 Jan 2008 08:00
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%;
}
From: noon on 23 Jan 2008 13:13
On Jan 23, 8:00 am, noon <Nun...(a)gmail.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.
From: noon on 23 Jan 2008 13:18
On Jan 23, 1:13 pm, noon <Nun...(a)gmail.com> wrote:
> On Jan 23, 8:00 am, noon <Nun...(a)gmail.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
 | 
Pages: 1
Prev: two flowed columns?
Next: How is this drop shadow acheived?