CSS Table Footer Group causing min width block

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

CSS Table Footer Group causing min width block

Post by simonmlewis »

Code: Select all

display: table-footer-group;
I have a site where in the top DIV are two DIVs.

the logo one is on the left, and a box with a background image is on the right.

I've laid it out in CSS with Float left and Float right.
But on mobile, I want the "float right" one to cover after the logo (no float!). So the logo is on top of the "right" DIV.

So I did it with the css shown above, and display: table-header-group; for the logo div.

However, it's cause both these divs to block up ot a fixed width, rather than full width.

I have tried width: 100%, but that doesn't work. So how can I use this style, keeping the logo on the left, the other div on the right for desktop, while having the logo on top of the right div on mobile?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: CSS Table Footer Group causing min width block

Post by Celauran »

You haven't really posted enough for us to see what's going on, but couldn't you just change the CSS rules in your media queries?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Table Footer Group causing min width block

Post by simonmlewis »

Well I'm only really asking because it seems that assigning that to a class, sets the box to a "block" width rather than the standard 100%, unless otherwise set.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply