Removing viewport width constraint for html

Hello all,

I'm looking for a way to write, with current CSS,
horizontally-developed pages. The idea is to have the layout
constrained _vertically_ to the viewport height, letting it expand
horizontally as needed, in contrast to the standard layout that is
horizontally constrained by the viewport, with an indefinite vertical

The overall structure of the page I have is as follows: there's a
.page holding a .pageheader, #pagebody and .pagefooter ; the #pagebody
itself normally contains simply a #content div, that holds the actual
page content.

The idea in principle would be rather easy: set the #content to
columns with a fixed width (say, 30em) and height (say, 100%), and let
the #content grow with as many columns as needed; by not constraining
the width of any of the #content parent, I would expect it to grow
indefinitely. The CSS would look something like this:

html, body, .page {
	height: 100%;
	width: auto;
	max-width: none;

#content {
	width: auto;
	max-width: none;
	height: 100%;
	columns: 30em;

#pagebody {
	width: auto;
	max-width: none;
	height: 100%;
	padding-top: 4em;
	padding-bottom: 8em;

.pageheader {
	position: fixed;
	top: 0;
	width: 100%;
	height: 4em;

#footer {
	position: fixed;
	bottom: 0;
	height: 8em;

However, this doesn't work: the html width is still constrained by the
viewport, and even though #content can grow horizontally, this results
in an _overflow_ rather than in a stretch of the whole page width. The
text can be read, but the aesthetics is seriously hindered.

Is there a CSS property I'm missing that would help ‘unclamping’ the
html width from the viewport width?

(By the way, this is an excellent use-case for the 'paged’
experimental media supported by Opera: by setting #content {
overflow-x: -o-paged-x-controls} I get excellent navigation of the
page, while still keeping it clamped to the viewport width. But of
course this is Opera-only.)

Giuseppe "Oblomov" Bilotta

Received on Thursday, 11 October 2012 06:22:55 UTC