Sorry, meant to include a link to validation:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.csbnow.com%2Fmobile%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0
On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell <ch...@chrisrockwell.com>wrote:
> <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
>
--
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/
