The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 100% height quandary (NOT EQUAL HEIGHT COLUMNS) Re: 100% height quandary (NOT EQUAL HEIGHT COLUMNS)


Thanks for the very helpful reply. Lots of good ideas here. BUT

Unfortunately “border: double” doesn’t let me set the border thicknesses to be different, which is the name of my game here.

And “outline” unfortunately always goes all the way around the box. There’s no “outline-left” or “outline-right” property. So that doesn’t quite work.

And I don’t see how the pseudo class approach could be used to insert a border. I tried inserting a 8000pix tall gif with my border that I made in Photoshop à la:

#container:before {
content: url(8000tall.gif);
position: relative;
left: -6px;

But weirdly the gif is reflowing content inside the container, and isn’t really being inserted before it. So that doesn’t seem to work either.

That leaves border-image, which frankly has always scared me. The uneven implementation also seems slightly scrappy. Nora’s awesome demo only stokes my fear: