11

Imagine a very common <header><article><footer> layout, where the header and footer are fixed heights and the article gets as tall as needed (the page scrolls vertically to accommodate). That's like most web pages.

What I'm trying to get is a layout just like that, but on its side so the article gets as wide as needed, and the page scrolls horizontally:

Horizontal scrolling

My initial attempts used flexbox:

Here is my first attempt on jsFiddle.

Relevant CSS:

body {
    display: flex;
    position: absolute;
    height: 100%;
}
header {
    background: green;
    width: 400px;
    flex: none;
}
article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
}
footer {
    background: yellow;
    width: 450px;
    flex: none;
}

But I'm moving away from that as I try other things, like in this fiddle, which is a little closer. The problem with this attempt is that the article width is constrained to 100% of the viewport width, even though the text flows over to the right! (My article uses CSS columns which is absolutely important to my layout.)

My requirements are:

  • Header, Article, Footer to be 100% height (done)
  • Header to be 400px wide (done) and to left of content (done)
  • Footer to be 450px wide (done) and to right of the article (how?)
  • Article to be as wide as it needs to be without overlapping footer (how?)

So, I need help with the bolded goals. What can I do to keep the article from overlapping the footer to its right? Are there other ways to lay out this page so that the article width expands as the content does?

  • Should work in Chrome, Firefox, and Safari (IE and Opera a plus, but not necessary)
  • Preferably no JavaScript (or CSS features likely to be dropped from the spec)
  • Simple, clean CSS is ideal
10
  • Can the calc function of CSS3 help you out? Width: calc( 100% - 200px ) e.g.
    – Mouser
    Dec 31, 2014 at 18:42
  • I don't think so -- starting with 100% limits the width to the width of the viewport. I'll play with that a bit though.
    – Matt
    Dec 31, 2014 at 18:46
  • Correct floats (left) should also fix your problem.
    – Mouser
    Dec 31, 2014 at 18:55
  • @Mouser Do you have an example? I'm having trouble getting anything working quite right.
    – Matt
    Dec 31, 2014 at 19:39
  • Not for today anymore. Tomorrow i'll provide you with an example if someone else doesn't steal my thunder. Answering on mobile.
    – Mouser
    Dec 31, 2014 at 19:46

12 Answers 12

5
+350

I've been working on this all afternoon and without JS it seems pretty impossible. I've also fiddled with @Grily's solution and I think I nailed it in Chrome at least.

Solution 1 Works on Firefox, Chrome and IE

However I got this to work, sort of. It's not completely to spec.

HTML

<div id="DIV-1">Header </div>
        .. in the Fiddle there's a lot of "Lorum ipsum here"
<div id="DIV-3">Footer </div>

CSS

@media only screen 
and (orientation : landscape) {

    body {
        position: absolute;
        display: block;
        box-sizing: border-box;
        white-space: normal;
        -webkit-columns: 235px auto;
        -moz-columns: 235px auto;
        columns: 235px auto;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
        height: 100%;
        float: left;
        width: calc(100% + 450px);
        min-width: -webkit-min-content; 
        padding-left: 400px;
    }

    #DIV-1{
        position: absolute;
        left: 0px;
        box-sizing: border-box;
        background-color: #2693FF;
        height: 100%;
        width: 400px;
        float: left;
    }

    #DIV-3 {
        position: relative;
        float: right;
        left: 205px;
        box-sizing: border-box;
        background-color: #FF7373;
        height: 100%;
        width: 450px;
        -webkit-column-span: all;
        -moz-column-span: all;
        column-span: all;

        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;

    }       

}

I've put the content container the columns directly into the body. (Can still be a div).

width: calc(100% + 450px);
min-width: -webkit-min-content; 

This bit actually (by magic) forces the browser to recognize that the body has a width that is broader than the viewport. The positioning of the header is simple. absolute and add padding to the body and it's in place. The content now flows nicely to the right. Exception is the footer. I got it in the right position on it's own by using column-span: all. Firefox is going it's own way with this and actually renders it correctly. Chrome and IE render the column inline and only the width of the column. That's the drawback of this approach.

I hope you can do something with it or somebody else could improve this so it actually appends the footer at the end of the page without shrinking it to the column's width.

The Fiddle: http://jsfiddle.net/5dtq47m3/

Solution 2 - Works on Chrome

Edited the work of Grily.

HTML

<header>
        <h1>Article Title (width 400)</h1>
</header>

<article>
     ........
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    position: absolute;
    height: 100%;
}
header {
    background: green;
    width: 400px;
    flex: none;
    float: left;
}
article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);
    flex:none; /*added*/
    width: calc(100% + 10px); /*added*/
    max-width: -webkit-max-content; /*added*/
}
article p {
    padding: .2em 15px;
    text-indent: 1em;
    hyphens: auto;
}
footer {
    background: yellow;
    width: 450px;
    flex: none;
    float: right; /*added*/
}

http://jsfiddle.net/w4wzf9n6/8/

4
  • Wow, this is definitely on the right track! I'll be fiddling with it a bit also. That footer is proving difficult to size & place just right. I'm OK with rewarding the answer that's closest to the spec anyway, since I'm also beginning to believe that this is impossible with CSS.
    – Matt
    Jan 1, 2015 at 20:13
  • Solution 2 still overlaps the footer in Chrome it looks like. But Solution 1 is the closest and doesn't use JS, so you will probably win the bounty (unless somebody waves a magic wand in the next couple hours). Thanks for your hard work!
    – Matt
    Jan 7, 2015 at 16:14
  • Hey @Mouser you could actually remove many properties, without causing any effect to the output. Also, you have repeated DIV-3 selector and some of its properties. Good CSS solution btw. Jan 10, 2015 at 9:27
  • @ThePragmatick Thanks, Deleted the redundant css selector. Yes I know many things are rudimentary. I only added to the code to make it work and deleted things that contradicted my work. Feel free to edit.
    – Mouser
    Jan 10, 2015 at 10:44
3

I have the flex basics here: http://jsfiddle.net/hexalys/w4wzf9n6/16/ which is the cleanest theoretical css.

This places the footer to the right of the article and the article doesn't overlap with the footer. Best visible in Webkit/Blink with calculation issues on the text content width interpreted by Flex.

In an ideal world, Flexbox would know what to do with the columns and calculate the auto width of the article flex item. But because 1. This isn't specced yet; 2. Flex still has existing issues to be resolved; And 3. CSS Columns are still quite buggy and unstable. Webkit and Firefox handle his both differently and wrong. For Webkit a flex auto width is that of the <p> element on one line, and for FF/IE it is the size of one column only. So it's quite a dead end, and need solving by the W3C specs before this would work. I tried to wrap article, but it doesn't seem to help that cause.

Meanwhile if you know the constraint of the viewport height and the amount of text on the server side, you could use a JS fallback to give the article element a flex width before DOMContentLoaded. (See my later comment for a partial Webkit/Blink polyfill)

Update: The multi-column issue is a know problem back from 2007. This case was added as reference on the CSS Working Group wiki page listing current multicolumn issues

5
  • Hey, funny thing, I actually stumbled upon the same/similar solution -- except that the article container is as wide as the longest paragraph as if it didn't wrap at all. Maybe my layout will have to succumb to browser bugs with flexbox and columns one way or another. +1 though, for getting closer and explaining how this is an uphill battle.
    – Matt
    Jan 5, 2015 at 22:03
  • If your article content is text columns only (no images or other things) you can calculate an approximate/safe width using a word count, and just set it on the interactive state of the document. That's a simple workable solution as a concept. Though it's definitely not so simple as a production site, because you have to deal with orientation changes, zoom, default text size, mobile viewport etc.
    – hexalys
    Jan 5, 2015 at 22:28
  • I actually thought of a minimal javascript solution to address the length issue. Essentially, Webkit renders the article columns properly in term of pixel volume when <article> is a child of <main> when no height constraint is applied to it. So I use that to adjust the main dimensions to reflow the article element to a nearly identical pixel volume using the viewport height, and avoid the flex width miscalculation. If you like, the script can be expanded by reversing the reflow to wrap in the oppose orientation for FF and IE for cross-compat.
    – hexalys
    Jan 7, 2015 at 10:01
  • Dang that demo you posted is pretty good. It's too bad it uses JavaScript but it looks almost exactly like how I want it to. Obviously, as you implied, it has some edge cases to handle, but in some ways, it rivals Mouser's solution in closeness. I wish I could split the bounty two ways.
    – Matt
    Jan 7, 2015 at 16:18
  • No worries. I am more interested in making Flexbox work with all possible use cases. If the handling of the text can be addressed by Flexbox spec and/or implementors (I made an inquiry in the W3C mailing list about that), the JS can become a simple polyfill method for that bug until fixed. And with this particular solution, you don't have the edge cases I previously mentioned. Just onresize traditional quirks.
    – hexalys
    Jan 7, 2015 at 20:48
2

Here's a solution that works on webkit browsers, Firefox, and IE:

// JS to work around the CSS column bug where the width
// is not properly calculated by the browser. We have a
// float:right marker at the end of the article. Set the
// width of the article to be where the marker is.
function resize()
{
    var article = document.querySelector("article"),
        marker = document.querySelector("endmarker");

    article.style.width = (marker.offsetLeft) + "px";
}

window.addEventListener("resize", resize);
resize();
* { padding: 0; margin: 0; }

holder {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #fed;
    white-space: nowrap;
}

header,
article,
footer {
    position: relative;
	display: inline-block;
	height: 100%;
	vertical-align: top;
    white-space: normal;
}

header {
	background: green;
	width: 400px;
}

endmarker {
    position: relative;
    display: block;
    float: right;
    width: 10px;
    height: 10px;
    background: red;
}

article {
	background: #CCC;

	-webkit-columns: 235px auto;
    -moz-columns: 235px auto;
	columns: 235px auto;
    
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}

article p {
	padding: .2em 15px;
	text-indent: 1em;
	hyphens: auto;
}

footer {
	background: yellow;
	width: 450px;
}
<holder>
<header>
    	<h1>Article Title (width 400)</h1>
</header>
<article>
    <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
    <p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
    <p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
    <p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
    <p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoquenatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
<p>END OF ARTICLE</p>
<endmarker></endmarker>
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
</holder>

http://jsfiddle.net/jmhh56g2/2/

All browsers have a bug with column layout and how they calculate the width of the element with columns. So unfortunately, a tiny bit of JS is needed to set the width. I know the requirement said "preferably no javascript", but this is fairly minimal and it works on all browsers that support CSS columns.

Quick overview:

  1. Put the entire content in an absolutely positioned div (<holder>) that is 100% height. This pulls the content out of the main body flow and prevents the body and viewport width from doing crazy things.
  2. Set white-space: nowrap on <holder> and normal for all other elements. This forces the header,article, and footer to align horizontally, while allowing the text inside them to flow normally.
  3. Set all elements to be position: relative (needed for offsetWidth)
  4. Create a little marker element at the article that is float:right. This is used to calculate the correct width.
  5. A tiny bit of js to watch the window resize event and recalculate the proper width for the article.
4
  • Thanks for the detailed explanation! I'm still seeing an overlap of the footer in Chrome, and the article expands beyond the right of the footer. I think hexalys is right, though, this might be impossible due to browser quirks.
    – Matt
    Jan 5, 2015 at 22:05
  • Works for me on Mac chrome. What platform are you on?
    – dbcb
    Jan 5, 2015 at 22:07
  • 1
    Thanks, that helped. I didn't resize my window small enough to see the problem. Updated the fiddle. See updated link and answer. Hope this helps.
    – dbcb
    Jan 7, 2015 at 20:51
  • Your updated fiddle is pretty much spot-on! Clever solution, too. Again, too bad it needs JS but it's pretty lightweight and the browser bugs are unavoidable, I'm realizing. Thank you!
    – Matt
    Jan 10, 2015 at 18:02
2

Flexbox does indeed work for this, but you need to add a few more things.

Add the following CSS:

article {
    display: flex;
}

To make each paragraph inside the article tag the same width, add:

article p {
    flex: 1;
}

A quick fix for the width (and height) of the footer, add:

footer {
    display: table;
    height: 100%;
}

Edit:

Been playing around with it a little, but didn't figure it out yet. I'll just leave the code here, but it's incorrect.

html {
    height: 100vh;
}

body {
    display: -webkit-box;
    height: 100%;
}

header {
    background: green;
    width: 400px;
    flex: none;
}

article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);
    height: 100%;
}

footer {
    background: yellow;
    width: 450px;
    display: table;
    height: 100%;
}
2
  • Unfortunately, this breaks the columns layout. Flexbox's column layout doesn't work quite like the CSS columns property (columns should be evenly sized by splitting paragraphs between columns, like a newspaper article). Do you know of a way to do it without making the paragraphs flex items? But, props for the footer width hack, strangely it works - I'll take a closer look at that.
    – Matt
    Dec 29, 2014 at 20:42
  • Actually, for footer, just saying flex: none does the same thing as the table hack. However, the article is still overlapping the footer (the article tag isn't getting wider).
    – Matt
    Dec 29, 2014 at 20:51
1

The simple answer is to set the overflow-x and overflow-y on the body, and then display: inline-block the elements inside. Here's the code:

body {
  height: 500px; /* just for demo */
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

header,
article,
footer,
.box {
  display: inline-block;
  height: 500px; /* just for demo */
}

header,
footer {
  width: 200px;
  background: #666;
}

.box {
  width: 300px; /* just for demo */
  background: #ccc;
}
<header>header</header>
<article>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
</article>
<footer>footer</footer>

Here is a demo

6
  • Why is this being down-voted? This solves the problem EXACTLY as described. Jan 5, 2015 at 7:56
  • 1
    The simplest solutions are the best ones. I was going to post something similar: jsfiddle.net/bpgumkg2/1. This answer should have about 30 upvotes, not a downvote... Jan 5, 2015 at 16:42
  • Why thank you @JamieBarker... I couldn't agree with you more! Jan 5, 2015 at 17:26
  • 1
    This isn't the solution the OP asked for. "(My article uses CSS columns which is absolutely important to my layout.)".
    – Mouser
    Jan 6, 2015 at 23:23
  • 3
    @SeanStopnik Since you asked. Like Mouser said, you missed both "as wide as it needs" and "fluid". Your layout isn't fluid. It's predetermined by 'fixed width' blocks. The issue here is how to contain some inline text of arbitrary length in a horizontal way. Traditionally, CSS can't do that. It always relies on a max-width constraint of a parent. Only Flexbox could possibly predetermine the width of arbitrary text content, given a height constraint, and restrict its article container to that width. Sadly it's not able to do that yet, and the column layout complicates even further.
    – hexalys
    Jan 7, 2015 at 2:52
0

There is a lot to be said for flex. I suggest bookmarking this link: CSS-TRICKS A Complete guide to FlexBox

Regarding the columns - column width is a minimum width, not a forced value so you will never see a partial column within <article> tags

Css Changes as noted and fiddle following:

article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);

    /* Added */
    overflow:hidden;
    overflow-x: scroll;
}

footer {
    background: yellow;

    /* Changed */
    min-width: 450px;
    display: block;
}

EDIT: I updated my fiddle; There are some limitations being imposed by Fiddle in that the results are displayed in an iframe that limit the width and height to 100% of the results display quadrant so you don't really get to see true browser results.

The solution in this edited fiddle does not use Flex, but a combination of inline-blocks with some white-space management. This is as close as I could come with the time I had. Hope it helps.

Updated: FIDDLE

6
  • Thanks for the attempt -- I should probably clarify that the article should be visible. Overflow is okay for the body of the page, of course, but not the article. Basically, imagine a typical HEADER-ARTICLE-FOOTER layout, just flipped 90 degrees so it scrolls horizontally instead.
    – Matt
    Dec 29, 2014 at 23:27
  • you have a Catch-22 you need the limited width to allow scroll bar visibility but you you need to hide the overflow to prevent overlap to the footer. Am I missing something?
    – fnostro
    Dec 29, 2014 at 23:30
  • Is the header and footer text also flipped 90 degrees? Or do you just want no scrolling at all and just a really wide browser page?
    – fnostro
    Dec 29, 2014 at 23:32
  • No, the content is still upright, but the page just scrolls horizontally, so the footer is on the right instead of bottom, and header at the left instead of top. So the footer can be, say, 5000px over to the right, and the whole page should be able to scroll to it, without hiding the article in its own container. Hmmm I'll try to draw it if needed...
    – Matt
    Dec 29, 2014 at 23:33
  • I think i got it - gimme a sec :)
    – fnostro
    Dec 29, 2014 at 23:34
0

Possible solution.

The CSS:

<style type="text/css">
* {
    margin:0;
    padding:0;
}
html {
    height:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
}
header {
    background:green;
    display:table-cell;
    vertical-align:top;
    width:400px;
}
article {
    background:#CCC;
    color:rgba(0, 0, 0, .75);
    display:table-cell;
}
article div {
    -moz-column-gap:0;
    -moz-columns:235px auto;
    -webkit-column-gap:0;
    -webkit-columns:235px auto;
    column-gap:0;
    columns:235px auto;
    height:100%;
    max-height:1vh;
    min-height:100%;
    overflow-x:scroll;
}
article p {
    hyphens:auto;
    padding:.2em 15px;
    text-indent:1em;
}
footer {
    background:yellow;
    display:table-cell;
    vertical-align:top;
    width:450px;
}
</style>

The HTML:

<header>
    <h1>Article Title (width 400)</h1>
</header>
<article>
    <div>
        <p>Article Text</p>
    </div>
</article>
<footer>
    Footer should be 450px wide and appear to the right of everything else.
</footer>
1
  • Thanks for your attempt! Not too bad -- except that the body of the page should scroll, not just the article. I don't want the footer to be visible until you scroll to the (right) end of the article.
    – Matt
    Jan 2, 2015 at 19:54
0

Man I thought I had it... It works if the window is a particular height. If you change the size of the output pane, the content doesn't fit evenly. Works the same in both Firefox and Chrome, wanted to put it out there to see if it helps someone get closer to a solution.

http://jsfiddle.net/ryanwheale/bbhmkLw5/

HTML:

<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

CSS:

html, body, article, header, section, footer {
    height: 100%;
    margin: 0;
}
html, body {
    background: red;
    width: calc(100% + 850px);
}
article {
    white-space: nowrap;
    background: blue;
}
article > * {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}
header {
    background: green;
    width: 400px;
}
section {
    background: grey;
    -webkit-columns: 2000 235px;
    -moz-columns: 2000 235px;
    columns: 2000 235px;
    -moz-column-fill: auto;
}
footer {
    background: yellow;
    width: 450px;
} 
1
  • That was close! Thanks for working on it anyway. Might still be useful!
    – Matt
    Jan 3, 2015 at 16:48
0

Check this out!

Some JavaScript code is needed to calculate dynamic width, otherwise overall structure is simple and will work with almost all major browser (didn't checked JS, but that will be easy change, "in case"!).

You can also check on JSFiddle here.

var header = document.getElementsByTagName('header')[0].offsetWidth;

var article = document.getElementsByTagName('article')[0].children[0].offsetWidth * document.getElementsByTagName('article')[0].children.length;

var footer = document.getElementsByTagName('footer')[0].offsetWidth;

document.getElementsByTagName('html')[0].style.width = header + article + footer + 'px';
html,body,header,article,article p,footer{
  margin:0px;
  padding:0px;
  height:100%;
}
html{ width: 100%; }
body{ width: auto; }
header, footer{
  width: 200px;
  float: left;
}
header{ background-color: green; }
footer{ background-color:yellow; }
article{
  display:block;
  width: auto;
  float: left;
}
article p{
  border:1px solid red;
  width: 200px;
  float: left;
  display:inline-block;
}
<header>
  <h1>Article Title</h1>
</header>
<article>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
</article>
<footer>
  Footer should be 450px wide and appear to the right of everything else.
</footer>

1
  • Unfortunately, this relies on the assumption that all paragraphs are the same length. Long ones overflow downwards instead of wrapping into the next column, and short ones don't get filled up with content from the next column. Take a look at how CSS columns are laid out and that should help make more sense of what I need.
    – Matt
    Jan 5, 2015 at 22:00
0

You should use table css then it's easy - otherwise it's pain in the butt

Here is a working example: http://jsfiddle.net/y60zy7fp/1/

The main difference is removing flex and then wrapping everything in 1 .layout and 1 more div for table and table-row, and first element in div in .layout will become column this is css:

.layout {
    display: table;
}

.layout > div {
    display: table-row;
}

.layout > div > * {
    display: table-cell;
}

update:

The article needs to have set width for the scroll to become horizontal. In my example it's 200%.

example: http://jsfiddle.net/n3okxq94/7/

Why it has to have width? Because the width of a paragraph is the size of the container. And you're asking the container to set the width according to paragraph which has width: auto

You can add white-space: nowrap on article but that makes all text one line http://jsfiddle.net/n3okxq94/10/

finished? http://jsfiddle.net/n3okxq94/8/

You could put inside of the article something like at least one <p style="width: 1000px;">and that way you could have width per-article

5
  • You would need to set article width sice what width should it fit into? The browser doesnt know what width would be ok Jan 7, 2015 at 16:22
  • Like a usual layout where the page gets as tall as it needs to fit the content, I need this layout to get as wide as it needs to. So instead of the viewport scrolling down (or a container that's 100% width and height of the viewport), I need the viewport to scroll horizontally, as much as it needs to fit the content growing to the right.
    – Matt
    Jan 7, 2015 at 16:24
  • yes but you have to have SOME width of the ARTICLE content right? What I mean: if it only has paragraphs, then there is no required width for a paragraph (1000px or 300px ?!) so should it fit to WHAT WIDTH you get? Check my updated jsfiddle Jan 7, 2015 at 16:27
  • I don't know the width, because the browser window could be any height. The width needs to be as wide as it has to be to fit the content (which fills the height of the window). Your solution would be really close/perfect if you could demonstrate how to make its height 100% (no vertical scrolling) and only scroll horizontally as much as is needed.
    – Matt
    Jan 7, 2015 at 16:31
  • posted updated answer, just try to understand that the article element must be some set width because the browser cant get that value from thin air Jan 7, 2015 at 16:42
0

How about this simple sultion below using very simple CSS and HTML?

html, body {width:100%; height:100%; min-height:100%; margin:0; padding:0;}
article {width:100%; height:100%; min-height:100%;}
header {width:400px; float:left; background:red; height:100%; min-height:100%;}
section {width:auto; display:block; background:blue; height:100%; min-height:100%; padding-right:450px;}
footer {width:450px; position:absolute; top:0; right:0; background:green; height:100%; min-height:100%;}
<article>
    <header>content</header>
    <section>content</section>
    <footer>content</footer>
</article>

1
  • No, the footer needs to be to the right and the article (in your example, "section") needs to use CSS columns for text flow.
    – Matt
    Jan 7, 2015 at 18:42
-1

Hi Matt just try it me be it help full sorry for i can't make the live demo.

First download this jQuery library http://manos.malihu.gr/jquery-custom-content-scroller/ and css and js file in your code as lik.

<link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
<style>

            * {
                padding: 0;
                margin: 0;
            }
            html, body {
                height: 100%;
                width:auto;
                display:block;
                white-space:nowrap;
            }
            header, article, footer {
                float: left;
                height:100%;
                vertical-align:top;
                white-space:normal;
            }
            header {
                background: green;
                width: 250px;
                padding: 0px 15px;
            }
            article {
                background: #CCC;               
                color: rgba(0, 0, 0, .75);
                width: 100%;
                padding-right: 20px;
            }
            article p {
                padding: .2em 15px;
                text-indent: 1em;
                hyphens: auto;
            }
            footer {
                background: yellow;
                width: 250px; 
                padding: 0px 15px;
            }
            .showcase #content-6.horizontal-images.content{
                padding: 10px 0 5px 0;
                background-color: #444;
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC");
            }

            .showcase #content-6.horizontal-images.content .mCSB_scrollTools{
                margin-left: 10px;
                margin-right: 10px;
            }
        </style>

<body>
        <header>
            <h1>Article Title (width 400)</h1>

        </header>
        <article>
            <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>

            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
            <p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
            <p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
            <p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
            <p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
        </article>
        <footer>Footer should be 450px wide and appear to the right of everything else.</footer>


        <!-- Google CDN jQuery with fallback to local -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


        <!-- custom scrollbar plugin -->
        <script src="../jquery.mCustomScrollbar.concat.min.js"></script>        


        <script>
            (function ($) {
                $(window).load(function () {
                    $.mCustomScrollbar.defaults.theme = "light-2"; //set "light-2" as the default theme
                    $("article").mCustomScrollbar({
                        axis: "x",
                        advanced: {autoExpandHorizontalScroll: true}
                    });

                    jQuery('article').css({'max-width': jQuery(window).width() - 581});
                });

            })(jQuery);
        </script>
    </body>

enter image description here

3
  • if get any problem so info me. i will help you. Jan 5, 2015 at 11:51
  • I appreciate your attempt, but I need a columnar layout, and the scrollbar needs to be on the viewport instead of the div. And if possible, it'd be nice to avoid jQuery...
    – Matt
    Jan 5, 2015 at 21:58
  • Yes it's possible but not scroll on mouse wheel Jan 6, 2015 at 4:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.