full-width overlay – #2

exploiting available space, again.

As I was finishing up the first full-width overlay demo page, the following thought popped up somewhere between the ears of this permanently bored web carpenter…

Come to think of it, the expanding container may work equally well, or better, for presenting larger pictures and stuff residing in the side column – expand in the opposite direction that is. File-size is the same no matter where large images resides, and the effect is greater.

Consequently, a new page was assembled, and a copy of the original stylesheet was reworked ever so slightly. As no problems was found, this “reversed” demo was ready for launch in no time.
(You'll notice that much of the text below is copied from the original page, which is logical since it is all about the same solution.)

The images in the sketchbook alongside here, all have an inherent width of 1200px. As the side column in this layout only have space for images up to about 460px in width even on the widest screens, wider images will be compressed.
(Usually I do not want to compress images on widest page width, but in this case I have of course made an exception.)

As I do not want to change the basic layout behind this site, I had to come up with simple ways to expand content-containers at will in order to present large images and other types of content that need maximum space.

This is how my expanding containers came about. And, as “one size fits all” usually means that it doesn't fit anything properly, several versions and variants got tested. A few somewhat OK solutions was then packed together and presented here.

Note that the stylesheet for this exploit has a few more “!important” than most might like, and quite a few more than absolutely necessary.
That's what you get when you load new stuff on top of existing stuff and won't bother to go through every single stylesheet on site looking for conflicts.

The demos are working as intended in my browsers. I have not included vendor-prefixes for transitions, so older browser versions relying on those may show a “jumpy” behavior.

just touching the surface.

My four demos are supposed to show how the “expanding container” techniques used can be made to work when added to the already quite complex styling of a live site. There are more than enough examples in the wild that show how the various techniques work in isolation, and few that show them combined.

The solutions presented on this page contain no surprises, or at least there are no planned surprises here. It is all quite simple stuff that anyone familiar with web design can put together.

It is all about coming up with an idea, and then realize it with regular markup and style. Turning ideas into reality is what I have been doing all my profes­sional life, and the world wide web is well suited for such activities.

mastering web design

When choosing which technique, or combination of techniques, to use for what, and where, one has to be quite familiar with as many techniques as possible. Nothing beats hands-on experience.
I have over the years coded up several thousand test/demo-pages just to see how things work in combination, which means I have this large, local, library to check up on things in whenever I run into new challenges. Sure helps me get by in the world of web design.

That only a few of my design related pages make it onto the web, has many reasons. One reason is that I do not often care to make such test/demo-pages “presentable” to a larger audience of web designers.
Another reason is that most of my test/demo-pages are too complex – too many things combined – to make it easy to write simple descriptions about and around whatever it is.

I am all for sharing ideas, but I am long since past the time when modifying and simpli­fying code so it could be easily explained and shared, was of any interest to me. Besides, I no longer have as much time as I used to for solving other designers' problems.
So, anyone may freely borrow ideas from my site – if they can find anything useful here, but do not expect any help from me to make any of my code work on someone else's site.


When several layers of stylesheets are run through the CSS cascade, conflicts tend to show up. To me this is a much welcome bonus, as there isn't much use in developing solutions that work well in isolation but not in com­bi­na­tion with all else on a live site.

CSS conflicts are not to be taken lightly, and “quick fixes” can cause more damage than good. This site has a simple layout and basic styling, that isn't easily broken. But, the main stylesheets also carry tons of alternative styles that balance down the CSS cascade, and these are not so insensitive to conflicts.

Sometimes CSS conflicts are best solved by going through all relevant styles on site, and correct whatever the issues are in all instances. Other times the conflicts are best solved by adjusting the precision and weight of a few selectors and/or property/value pairs in the latest addition.
Targeting through precise selector-chains allow for increased weight without causing further conflicts, which is where my extensive use of !important comes in. The targeted declarations hit and override site-wide styles where they should, and do not affect anything anywhere else.

From time to time I go through all stylesheets on site, and “tune in” declarations that may cause, or be sensitive to, conflicts in the CSS cascade. So also now.

From what I can see there aren't any serious conflicts to correct for with the introduction of the “expanding containers” solutions. I do expect some minor cascade-issues as/when I put these solutions through the phases in the collection of site-wide alternative styling, but those issues will be dealt with when they show up.

I am happy with the “expanding containers” concept as such. What remains is to find good uses for it, and that will have to wait till another day.

sincerely  georg; sign

Hageland 01.jun.2015
last rev: 16.nov.2017

www.gunlaug.com advice upgrade advice upgrade navigation