My question was: Is it possible to use 2 different coloured boxes side by side in a responsive website?
Basics:
boxes must be flexible (hight and width)
boxes have different amount of text (content)
both boxes shall shrink the same amount when resizing browser window
I have found a way, but I am not entirely happy with it.
(In my example I have a red container which contents one blue and one transparent box. Disadvantage: the blue box MUST have more text, that both both boxes (colours) shrink nicely.) I hope I can get my idea across to you.
So, very simple built. The color is applied directly to the column
containers. They are also set to height:none with a padding-bottom at a
percentage (the same for all columns in the row). This has the effect of
regulating the height of the column container.
Of course, to be responsive it helps to convert the padding-bottom from %
to px for narrower screen widths. I might add this has problems in legacy
IE, but, I don’t care.
if you look at the 4 blocks near the bottom you will see the titles align up regardless of the width of the browser window and those blocks change to two columns at a specific break points and then finally to a single column.
Ernie, I like your example a lot but the rows would appear to be a fixed height (based on the padding of the item). If you add more content to either of the boxes then you’ll see it soon gets clipped by the bounds of the wrapper which, unfortunately, would rule this method out for use in a CMS.
One technique I’ve used in the past to achieve equal height columns (other than background images or JavaScript) is to set the padding on the bottoms of the boxes to a vast figure (9999px) and then pull the bounds back using an equal negative margin (-9999px). The effect is that the background colour will stretch right out to 9999+ pixels high should it need to but is clipped at a uniform height by a wrapper object with the overflow set to hidden.
You should be able to add or remove as much content to either column and have them both be the same height. I ended up using a div for the row, another for the column, and a final one for the content although you could merge the content and column items if you make sure you integrate any existing box padding values.
The downside to this technique is that Freeway will select either of the column items if you click anywhere below them on the page (Freeway thinks the boxes are huge because of the 9999px padding values) which makes working with the page a little tricky to say the least. If anyone wanted to use this technique I’d suggest entering the padding and margin values as extended styles simply to avoid this issue.
Regards,
Tim.
Tim, you must be „out of your mind“ to create - padding 9999px / margin -9999px plus wrapper object with overflow hidden - as technique for equal-height colored column boxes. Very creativ indeed.
I will test it later today.
When I sum up all ideas, there is no 100% perfect method, but in the end we share some sound practices.
Personally, though, I can’t wait until Flexbox becomes a usable thing.
On what do you wait? There are enough prefix opportunities to make even outdated browser handling flexbox.
Basically I had a play with it in Freeway and it works in Safari, Chrome, FF, Opera. I call this progressive enhancement, cause it won’t break anything (theoretically
That’s what I did:
The parent container (via extended and using Ernie’s one-liner trick):
While I’m unsure what speaks against flexbox - all I can say is that chances are enormous - if you support progressive enhancement.
So thanks Hanna for bringing this up - and thanks guys for all the input.
Naturally the gradient-trick is a bit outdated (but once saw a pretty impressive example at Chris Coyier’s CSS Tricks).
Tim’s method is something that reminds me on very old days - I think the sticky footer stuff was something similar, was it?
JavaScript sucks (for this).
Flexbox?
Probably too new for Freeway, but the interesting part is, that you won’t need clearfix anymore - which is an advantage - but I’m not aware if auto-clearfix action breaks something or not (regarding display:—).
If we talk about display (and this just for info), Freeway doesn’t allow (reasonably) more than one “display” property - uses the first declaration and skips the second.
I finally solved flexbox by classifying which would make even a lil action thinkable.
I don’t recall the sticky footer issues. I know Paul had an Action for this a while back.
I think your list is missing a couple of other options Thomas. By far the easiest method of achieving equal height columns would be to use a table. The columns are naturally flexible and will always remain at a fixed height regardless of the content. Now that really is an ‘old days’ solution.
If you’d rather not use tables for non-tabular data then a faux-table structure using divs and display properties will do the same thing but with less code (albeit losing IE7 support).
By the way your GridMeister project is looking good.
Equal height columns in web pages are a pain. They always have been and although there are solutions on the horizon I think we each need to select a method that works with our target audience. A lot of web design is about minimising layout issues and providing a predictable experience for all users regardless of how they are consuming the site.
Regards,
Tim.
On 20 Feb 2015, at 09:51, Thomas Kimmich wrote:
Tim’s method is something that reminds me on very old days - I think the sticky footer stuff was something similar, was it?
cool - Safari 5 :-). Ahm - yes, I haven’t got any chance to debug this version anymore, but am aware, that I haven’t add the prefixes on all items down to this. And the shot shows even more problems.
If it comes to GridMeister (glad you like it) - my target is a FreewayPro 7+ user - and I instantly hope, that FW7 can’t be installed on iOS 10.3 (roundabout).
But I agree in its entirety, that we have to check our audience. But this embraces the outline and design as well - so no modern audience, no fancy stuff. (Should we really honor Safari 5 and bros?)
Cheers
Thomas
With sticky footer, I mixed this up (it was something like a specific height and a negative top-margin thing).
I wanted to come back to this thread… having enshrined the examples given
with a workbench article-- and an opportunity at redemption with a couple
extra methods…
At the end, I was plagued by Freeway’s stupid 19,000px workspace usability
limit… which still needs fixing by the way SP WIZARDS. But please, enjoy
and comment. Perhaps when I’ve recovered from battling all the niggling
behaviors Freeway still employs to try my patience, I’ll break the document
into several unnecessary pages and include a link to the file. Or not.
Ernie, what a great summary! Thanks a lot for your effort. It made me smile.
By the way in my method: It is easy to remember the box which need to contain longer content when you give items obvious names.
“row column orange"
“box left green long content”
“box right transparent small content”
And sometimes I find it useful to make an invisible textfield with infos (no layer) in the workung space, in case you open the FW file after a long period in order to quickly remember the structure.
I would not use my method in a cms though, clients tend to forget the requirement and will break layouts possibly.
what an excellent wrap - and furthermore I understood all those methods (yippee - that isn’t always the case).
One add to my “faking by gradient”:
The box-color (#thomas-col1 + #thomas-col2) is not optional - it’s necessary to be applied in order to cover the responsive aspect on whatever breakpoint.
Cheers
Thomas
And a small addition to my flexbox method which obviously starts at 19,001 px (and is therefor hidden reacting on Tim’s screenshot:
I removed all fallbacks - so it at least shows up the content. This is progressive enhancement.
Thomas-- when you earlier mentioned Flexbox, I spent some time trying to
dig up an example that I did a while back, but could not find it. I found
flexbox to be exciting, with that brand new code smell… but I didn’t do a
flexbox example here because to me it is still mysterious-- more like
snake-charming than css. If I come back to this article then I promise to
look at flexbox again.
Likewise, I saw a breathless demo of flexbox, but could not connect the dots in my own head to the point that I have tried it.
What does work really well (even IE8!) is to declare that the parent box of your columns has display:table and width:whatever (since :table means collapse to shrink-wrap the contents, and you probably don’t want that) and then each of your columns has display:table-cell.
With those two changes, you can have visual columns that expand and contract to wrap the tallest contents, while keeping the shorter contents the correct background color. Naturally, this does mean breaking out the Item / Extended interface. since those particular values aren’t available for you to use in the UI.
