Hi from York Uk, damn freezing and cold!
Ok Ive given myself the task of building the below web page mock up. My first CSS challeneg i want to tackle is how to replicate a newspaper column layout. I came across this:
http://www.w3schools.com/css/css3_multiple_columns.asp is this a good starting point?
Also I’ll need to tackle the age old faux column issue, i came across this:
https://css-tricks.com/fluid-width-equal-height-columns/ is this a good starting point?
Thanks,
David
It’s been ages that I don’t use W3Schools as a reference for anything but I know they do try to keep up. It doesn’t mean that they do keep up but they try. So I can’t tell.
I would say that anything that gets you were you want it is a good starting point… but that’s the key word here would be “starting” 
This is quite a good reference on columns:-
That’s quite an old article, not using the css3 columns.
The article I linked has a section on the column-fill property, which evens column content, but only works in Firefox so far.
But it’s one of those things, if not supported, is not the end of the world.
Yes, use css columns they are simple to use and do exactly what you want.
No don’t go there.
Assuming you want want the right column to have full height sidebars then use the display:table / table-cell approach.
e.g. very roughly.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0;
}
body {
background:#ccc;
padding:10px;
margin:0
}
.wrap {
display:table;
border-collapse:collapse;
border:1px solid #000;
width:100%;
max-width:960px;
margin:auto;
background:#fff;
}
.tc {
display:table-cell;
vertical-align:top;
}
.sidebar {
border-left:1px solid #000;
background:#f9f9f9;
width:300px;
}
.content {
padding:10px;
}
.columns {
padding:10px;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
p{margin:0 0 1em}
</style>
</head>
<body>
<div class="wrap">
<div class="main tc">
<div class="columns">
<p>Shores of the cosmic ocean hydrogen atoms, of brilliant syntheses quasar, hearts of the stars rings of Uranus, the only home we've ever known preserve and cherish that pale blue dot, from which we spring, birth decipherment light years venture another world the only home we've ever known as a patch of light prime number concept of the number one, Drake Equation billions upon billions! Across the centuries two ghostly white figures in coveralls and helmets are soflty dancing star stuff harvesting star light billions upon billions Drake Equation, great turbulent clouds corpus callosum cosmos. Concept of the number one, not a sunrise but a galaxyrise Jean-François Champollion astonishment rich in mystery, shores of the cosmic ocean!</p>
<p>Concept of the number one intelligent beings Sea of Tranquility kindling the energy hidden in matter vastness is bearable only through love muse about cosmos. Billions upon billions ship of the imagination rich in mystery dream of the mind's eye. Rich in mystery radio telescope brain is the seed of intelligence. How far away Hypatia? At the edge of forever rich in heavy atoms ship of the imagination finite but unbounded. Emerged into consciousness, billions upon billions Sea of Tranquility preserve and cherish that pale blue dot great turbulent clouds across the centuries, realm of the galaxies, paroxysm of global death the carbon in our apple pies the ash of stellar alchemy, rich in mystery from which we spring worldlets the sky calls to us. Concept of the number one.</p>
</div>
</div>
<div class="sidebar tc">
<div class="content">
<ul>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
</ul>
</div>
</div>
</div>
</body>
</html>
[edit] hmmm looks like a found a bug with the column rule in webkit in a fluid layout. I;'ll get back to you 
I take that back 
I seem to have found an undocumented bug in chrome that won’t resize the column rule to match the text in a fluid layout. The rule stays fixed to the spot while the columns themselves get smaller or larger. IE and Firefox are fine with it!
I’ve found a partial fix by specifying a width less that 100% which seems to trigger a better reflow but will be awkward if there are parent elements to contend width.
Here’s the fix in action:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0;
}
body {
background:#ccc;
padding:10px;
margin:0
}
.outer {
max-width:980px;
margin:auto;
}
.wrap {
display:table;
border-collapse:collapse;
border:1px solid #000;
width:90%;/*webkit fix for column rule in fluid layout !!!!!!!*/
background:#fff;
margin:auto;
}
.tc {
display:table-cell;
vertical-align:top;
}
.sidebar {
border-left:1px solid #000;
background:#f9f9f9;
width:300px;
}
.content {
padding:10px;
}
.columns {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}
p {
margin:0 0 1em;
}
</style>
</head>
<body>
<div class="outer">
<div class="wrap">
<div class="main tc">
<div class="columns">
<div class="content">
<p>Shores of the cosmic ocean hydrogen atoms, of brilliant syntheses quasar, hearts of the stars rings of Uranus, the only home we've ever known preserve and cherish that pale blue dot, from which we spring, birth decipherment light years venture another world the only home we've ever known as a patch of light prime number concept of the number one, Drake Equation billions upon billions! Across the centuries two ghostly white figures in coveralls and helmets are soflty dancing star stuff harvesting star light billions upon billions Drake Equation, great turbulent clouds corpus callosum cosmos. Concept of the number one, not a sunrise but a galaxyrise Jean-François Champollion astonishment rich in mystery, shores of the cosmic ocean!</p>
<p>Concept of the number one intelligent beings Sea of Tranquility kindling the energy hidden in matter vastness is bearable only through love muse about cosmos. Billions upon billions ship of the imagination rich in mystery dream of the mind's eye. Rich in mystery radio telescope brain is the seed of intelligence. How far away Hypatia? At the edge of forever rich in heavy atoms ship of the imagination finite but unbounded. Emerged into consciousness, billions upon billions Sea of Tranquility preserve and cherish that pale blue dot great turbulent clouds across the centuries, realm of the galaxies, paroxysm of global death the carbon in our apple pies the ash of stellar alchemy, rich in mystery from which we spring worldlets the sky calls to us. Concept of the number one.</p>
</div>
</div>
</div>
<div class="sidebar tc">
<div class="content">
<ul>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone else got a better fix? I tried all the 3d triggers that seem to fix other chrome redraw bugs but not this one.
Not a fix, but a “workaround” for this particular case. I put a wrapper around .columns and assigned {pos:rel}, then added a vertical box with no width and a border on its left side, .columnrule, and assigned {pos:abs}. Seems to work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--
https://www.sitepoint.com/community/t/column-newspaper-layout-solution/218999
Nightwing
Mar 23,2016 1:53 PM
-->
<style>
html, body {
margin:0;
padding:0;
}
body {
background:#ccc;
padding:10px;
margin:0
}
.outer {
max-width:980px;
margin:auto;
}
.wrap {
display:table;
border-collapse:collapse;
border:1px solid #000;
width:100%; /* 100% width restored */
background:#fff;
margin:auto;
}
.tc {
display:table-cell;
vertical-align:top;
}
.sidebar {
border-left:1px solid #000;
background:#f9f9f9;
width:300px;
}
.columnswrap { /* ADDED */
position:relative;
}
.columns {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
/* -webkit-column-rule: 1px dashed blue;
-moz-column-rule: 1px dashed blue;
column-rule: 1px dashed blue; /* COMMENTED OUT. "column-rule" buggy in Chrome */
}
.columnrule { /* ADDED */
position:absolute;
top:0;
bottom:0;
right:50%;
border-left:1px dashed magenta;
}
.content {
padding:10px;
}
p {
margin:0 0 1em;
}
</style>
</head>
<body>
<div class="outer">
<div class="wrap">
<div class="main tc">
<div class="columnswrap"> <!-- ADDED -->
<div class="columns">
<div class="columnrule"></div> <!-- ADDED -->
<div class="content">
<p>Shores of the cosmic ocean hydrogen atoms, of brilliant syntheses quasar, hearts of the stars rings of Uranus, the only home we've ever known preserve and cherish that pale blue dot, from which we spring, birth decipherment light years venture another world the only home we've ever known as a patch of light prime number concept of the number one, Drake Equation billions upon billions! Across the centuries two ghostly white figures in coveralls and helmets are soflty dancing star stuff harvesting star light billions upon billions Drake Equation, great turbulent clouds corpus callosum cosmos. Concept of the number one, not a sunrise but a galaxyrise Jean-Fran瀀ois Champollion astonishment rich in mystery, shores of the cosmic ocean!</p>
<p>Concept of the number one intelligent beings Sea of Tranquility kindling the energy hidden in matter vastness is bearable only through love muse about cosmos. Billions upon billions ship of the imagination rich in mystery dream of the mind's eye. Rich in mystery radio telescope brain is the seed of intelligence. How far away Hypatia? At the edge of forever rich in heavy atoms ship of the imagination finite but unbounded. Emerged into consciousness, billions upon billions Sea of Tranquility preserve and cherish that pale blue dot great turbulent clouds across the centuries, realm of the galaxies, paroxysm of global death the carbon in our apple pies the ash of stellar alchemy, rich in mystery from which we spring worldlets the sky calls to us. Concept of the number one.</p>
</div>
</div>
</div>
</div>
<div class="sidebar tc">
<div class="content">
<ul>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
<li>Something here</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
The problem seems to be that Chrome does not track the dimensions of the columns box correctly so the column-rule doesn’t know where it is supposed to be. (How’s that for a WAG) 
Yes thanks Ron,
I did consider that approach as a fix but its a shame that we have to revert to faux column techniques in this day and age.
I’m really surprised that no one else has mentioned the bug anywhere.
I use this example…
column-layout.zip (2.9 KB)
…without any problems in IE11, Firefox, Chrome or Opera. 
coothead
That’s because you aren’t using the column-rule property which is the webkit problem I was talking about
Hi there Paul,
is the column-rule property considered to be a necessity?
I did not even know of it’s existence. 
And perhaps, mistakenly, I thought that my columns looked rather sweet. 
coothead
Your columns look lovely
I assumed from the OPs original request for equal columns that the dividers between columns needed to be present. However, it would look fine without it
Thanks everyone for guidance, going to have a bash at this soon and will update here
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.