<a> is an inline element and cannot contain block level elements (such as
<div>).
One way is:
.container {
position: relative;
}
a {
display: block;
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
text-indent: -9999em;
z-index: 1 /* or higher if necessary */
}
<div class="container">
<div>Some content here</div>
<a>Link</a>
</div>
If you're open to other ideas, did you try my codepen? Even if you didn't
want the boxes to be 100% on narrow devices, you could center them. Either
way, I tend to favor display:inline-block over float:left whenever possible.
Yes, block level elements will fill out the parent without being explicit
On Thu, Sep 12, 2013 at 3:03 PM, Chip at Caliber Communications <
chip.me...@calibercommunicationsllc.com> wrote:
> I played around with lots of variations on this theme, but none worked. I
> THINK the issue was that the container (.mobile-services) expands to fill
> its own parent (main-content), and the children (.mobile-services div) are
> floated left within it (which I need so that they form two columns at
> larger container-widths).
>
> The fundamental obstacle - I think - is that, absent an explicit width,
> the container does does not shrink to the children, but fills the parent.
> No?
>
> Also, Chris, why should I not wrap a <div> in an <a> tag and what's the
> alternative if I want the entire block to be clickable?
>
> Thanks for your help, folks. The media query solution worked.
>
> Chip
>
> ==========================
> Caliber Communications LLC
> chip.me...@calibercommunicationsllc.com
> (t) 636-221-0926
> http://www.calibercommunicationsllc.com
>
>
> On Thu, Sep 12, 2013 at 1:25 PM, Chris Rockwell
> <ch...@chrisrockwell.com>wrote:
>
>> Tom's suggestion may work as well, but you will need to fix your
>> container. Due to all of the child elements being floated, you will need
>> "height: 100%;overflow:auto" so that your container wraps the children
>>
>>
>> On Thu, Sep 12, 2013 at 2:21 PM, Tom Livingston <tom...@gmail.com> wrote:
>>
>>> They are also floating left at narrow width.
>>>
>>> On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications
>>> <chip.me...@calibercommunicationsllc.com> wrote:
>>> > http://www.csbnow.com/mobile/index.html
>>> >
>>> > http://www.csbnow.com/mobile/css/style-mobile.css
>>> >
>>> > I am trying to get the grey boxes (Online Banking, Online Bill Pay,
>>> etc.)
>>> > to center on the page so that when the viewport gets too small to
>>> > accommodate 2 columns, the remaining single column is centered. Seems
>>> like
>>> > I must be missing something obvious, but I cannot see it.
>>> >
>>> > Thanks for any help...
>>> >
>>> > Chip
>>> > ______________________________________________________________________
>>> > css-discuss [css-d@lists.css-discuss.org]
>>> > http://www.css-discuss.org/mailman/listinfo/css-d
>>> > List wiki/FAQ -- http://css-discuss.incutio.com/
>>> > List policies -- http://css-discuss.org/policies.html
>>> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>>
>>>
>>> --
>>>
>>> Tom Livingston | Senior Front-End Developer | Media Logic |
>>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>>> ______________________________________________________________________
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>
>>
>>
>> --
>> Chris Rockwell
>>
>
>
--
Chris Rockwell
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
