HTML 5 <article> structure when dealing with custom scrollbar - html

Question

I'm making a "semantic" html5 model for all the articles in a website. This is what could be great :
<article>
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>ARTICLE TEXT</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom. I use a custom scrollbar (sly.js) which needs some extra wrapper divs. So I must have something like that :
<article>
<div id="first-scrollbar-wrapper"><div id="second-scrollbar-wrapper">
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main">
<p>ARTICLE TEXT</p>
</section>
</div></div>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
QUESTION : Is it acceptable? Don't you think the extra wrapper divs are "breaking" the semantic flow?

Answer 1

But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom
You can declare
position: fixed;
for the <footer>.
This will obviate the need to surround <header> and <section id="main"> (or <main>) with a container <div>.
Edit:
I've just realised this doesn't work.
You'd be entirely forgiven for imagining that position:fixed works in exactly the same way as position:absolute.
ie. If an element with position:fixed has a parent with position:relative, the contained element will be fixed relative to its container.
But it isn't - and apparently, this is a perennial frustration.
So... here's a javascript to fix the problem and to enable
position:fixed-relative-to-parent
Example:
function fixFooter(article) {
var footer = article.getElementsByTagName('footer')[0];
var articleScrollTop = article.scrollTop;
var articleHeight = parseInt(window.getComputedStyle(article).getPropertyValue('height'));
var footerHeight = parseInt(window.getComputedStyle(footer).getPropertyValue('height'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-top'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-bottom'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-top-width'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-bottom-width'));
var footerTopPosition = articleScrollTop + articleHeight - footerHeight;
var footerTop = footerTopPosition + 'px';
footer.style.top = footerTop;
}
function initialiseArticlesFunction(i) {
return function(){
var article = document.getElementsByTagName('article')[i];
article.addEventListener('scroll',function(){fixFooter(article);},false);
}
}
function initialiseArticles() {
var initialiseArticles = [];
var articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
var footer = articles[i].getElementsByTagName('footer')[0];
if (window.getComputedStyle(footer).getPropertyValue('position') === 'fixed') {
footer.classList.add('fixed-relative-to-parent');
fixFooter(articles[i]);
}
initialiseArticles[i] = initialiseArticlesFunction(i);
initialiseArticles[i]();
}
}
window.addEventListener('load',initialiseArticles,false);
article {
position:relative;
display:inline-block;
margin: 0 60px 0 0;
padding:0;
border: 2px solid rgb(127,127,127);
width: 220px;
height: 400px;
overflow-y: scroll;
}
article footer {
display:block;
position: fixed;
width: 191px;
height: 120px;
padding:6px;
background-color: rgb(227,227,0);
}
.fixed-relative-to-parent {
position: absolute;
left: 0;
}
<article>
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
<article>
<header>
<h2 id="title">MAIN TITLE 2</h2>
<h3 id="sub-title">SECOND TITLE 2</h3>
<img src="img.jpg" alt="article image 2"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>