What I Want From CSS3 - Part 1 | October 25, 2005

I’ve been thinking about liquid layouts recently and have decided how useful min-padding, max-padding, min-margin and max-margin would be.

Generally in liquid layout you will set padding/margin using percentages to create a liquid gutter between elements. However once the layout is reduced beyond a certain width, the gutters start to get too small. As such it would be great if you could set a minimum gutter width to maintain the separation of elements, and hence legibility.

Conversely, on a wide screen, gutters can become ridiculously big, causing a disconnect between content elements. Setting a maximum gutter width would prevent this problem and help keep elements visually associated.

Considering there is a min and max width, it seems like an oversight not to have an equivalent for for padding and margin.

Posted at October 25, 2005 9:26 PM

Comments

AkaXakA said on October 25, 2005 10:21 PM

You can do that already with min and max width. It requires extra div’s, but it’s certainly possible.

Ben Ward said on October 25, 2005 10:57 PM

Certainly sounds good Andy.

I don’t know if you’ve searched the W3C Style mailing list archives, but there was one thread that at least tried to suggest what you’re after. Their mailing list software forces you to browse by month, so there’re two links:
* September Messages
* October Messages

If the discussions that’ve already taken place on the matter don’t seem to offer a resolution (or go wildly off topic, ahem), are you planning to submit this feature requests to the list yourself? It’s the best way of having the Working Group notice your request and (critically) the use-cases you have to back it up.

Many of the suggestions made to the list tend to suffer from lack of use-cases, or (apparent) misguided thought process. I imagine you’d be capable of offering some pretty concrete support to your suggestions, though.

If nothing else, it would brighten my day to read something substantial on there. ;-)

Ben Ward said on October 25, 2005 11:40 PM

You can do that already with min and max width. It requires extra divs, but it’s certainly possible.

True, but teh point is that in the context of pure CSS, you can’t do it.

CSS should work without any dependencies on superfluous mark-up. In this real world of ours technology isn’t currently up to doing it, but when suggesting things for the CSS spec., you gotta be thinking ‘no-wrapper-div mark-up utopia’ :)

JohnnyLab said on October 26, 2005 11:20 AM

Good point. If min/max width is available than min/max margin and padding need to be there. Once min/max width and mutli-columns are better supported and used more often, I think you’ll start finding a min/max for margin and padding a necessity.

I agree with Ben, you should submit this idea in a formal setting. Surprised it was not…

Kim Siever said on October 26, 2005 6:19 PM

Thanks for this post, Andy. I completely agree with it. There have been many times where I could have used either of these techniques.

Bruce said on October 27, 2005 6:14 PM

Wierd .. I was composing a “what I want” post myself. What I want is the ability to specify “use the browser default”.

I recently styled a form that looked great in Firefox, but didn’t like the rendering in IE - in fact, the default unstyled form controls were better in IE. So what I wanted to do was over-ride the styles in my IE.css [which is pulled in by a conditional comment] to say

input, select, textarea {color:default; border: default;}

etc.

I ended up with a hack to feed the rule only to modern browsers, using attribute selectors:

input[id], select[id], textarea[id] {margin: 5px;padding: 3px; border: 2px inset #B35D2A;}

This selects any input that has an id (and they all have, for WCAG compliance) and so styles it.

But of course, this will break when IE7 comes on the scene and understands attribute selectors.

Greg Reimer said on October 28, 2005 5:36 PM

Maybe the deeper problem is that, within the screen media type, there are just too many possibilities. What if the screen media type was somehow parameterized so you could have:

@media screen(viewPortWidth<=480px) { … }
@media screen(viewPortWidth>480px && viewPortWidth<=800px) { … }
@media screen(viewPortWidth>800px && viewPortWidth<=1024px) { … }

Now something like that would be awesome.

pawel said on October 29, 2005 7:24 PM

Greg, something similar to your proposition works in Opera and is in CSS3 spec. ( http://www.w3.org./TR/2001/WD-css3-mediaqueries-20010404/ )

You can use
#sidebar { display:none; }
@media screen and (min-width:800px) { #sidebar { display:block }
}

it will show element with id=”sidebar” when scren is wider than 800px. I hope it will be implemented in Gecko soon as well.

Mike D. said on October 30, 2005 5:16 PM

The biggest problem with the prospect of liquid layouts is the line-length issue. Doubling horizontal screen real estate is a great thing… doubling line-length automatically as a result of this isn’t. There are really only two ways around this, the first of which is not helpful, and the second of which isn’t always possible:

1. Increase the font size to keep line-length rational.

2. Include a sidebar full of extras for people who have widths of greater than X pixels.

Option 2 can be great on some sites, but it’s almost like running two separate sites at that point since what you’re giving your two groups of people can be quite different.

Erik said on October 30, 2005 5:33 PM

What font are you using for the posts?

Greg Reimer said on November 3, 2005 6:26 AM

pawel, that is really awesome.

JaX said on November 3, 2005 11:03 PM

Are you considering a redesign?

Robin Massart said on November 4, 2005 3:31 PM

Mike D, This is certainly a problem, but maybe not as big as it may first seem. My feeling is that people with huge screens tend anyway not maximise their browsers. I know I don’t. And they can always resize them to their desired width. Those with small screens can’t make their browsers bigger.

I know it’s not nice to expect people to resize their browsers, but I really can’t imagine many people with 21” monitors surfing the web with maximised browsers. They are more likely to have two or three browsers open on the go in order to do “multitasking” or whatever.

I may be completely wrong on this of course!