I have one report for which I am using the print option of Chrome. I need to repeat my headers for each page.
I am dividing my content as given below and it is working fine.
<table>
<thead>
<!-- Header Content(need to repeat)-->
</thead>
<tbody>
<!-- Body Content-->
</tbody>
</table>
This is working as expected but up to some particular height of the header.
When my header is more than some particular height, repeating header stops working.
When I try to change the paper size from chrome print to a bigger size than it will work for that same header height.
Ex. If my header is not working in A4 size paper, same will work if I try to change paper size to bigger size (A3) and suppose if my repeating header is working in A4 and if I change to small size (A5), it will not work.
I am not sure for how much height its stops working but it is happening in my live project and sample also.
Please have a look at the sample and also let me know if I am missing somewhere?
The breaking point is 245px (at least in chrome), but depending on it's content, you may need to reduce it. We found keeping it under 230 seems to work.
If you need more than that, we split up the content into two pieces, each capped at 230. The workaround is to stack multiple table-headers so it looks like one big header. Nest a second table in the tbody. It's not perfect, but it works. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css" />
</head>
<body>
<table class="w-100">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="header1">
<h1>Header #1</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<table class="w-100">
<thead>
<tr>
<td>
<div>
<div class="header2">
<h1>Header #2</h1>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.
Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.
Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.
Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.
Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.
Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.
Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.
Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.
Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.
Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.
Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.
Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.
Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.
Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.
Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="footer w-100">
<h2>footer</h2>
</div>
</body>
</html>
CSS:
.header1, .page-header-space {
height: 230px!important;
overflow:hidden;
}
.footer, .page-footer-space {
height: 230px;
}
.header1{
background-color: rgba(223, 223, 223, 0.5);
}
.header2{
background-color: rgba(223, 223, 223, 0.5);
height:230px;
}
.footer{
background-color: rgba(223, 223, 223, 0.5);
}
#media print{
.page-header, .page-header-space {
height: 230px!important;
overflow:hidden;
}
.footer {
position: fixed;
bottom: 1px;
}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
body {margin: 0;}
}
.w-100{width:100%;}
/*---Reset---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
border-spacing:0;
}
I am designing a page for a blog. The page has a fixed position sidebar, and a centered div for content. You can see it here. Here's my CSS:
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
}
<body>
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna
sed consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar
in sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
</body>
Currently all widths are as percentages. I do not want the content to span the whole width of the page (for easier reading). However on mobile devices (or when the screen width is small enough) I want the content to span the page. However with % widths, the content width constantly changes with the page width. It is ok on a computer screen but for smaller widths the content div becomes too narrow.
An example would be the website medium. You can see (as you resize the window) that for larger widths, the content width remains the same, but for smaller widths the content starts to span the whole page.
Any idea how to achieve that?
you can set a min-width in your .content with any value you may like, just remember you have a fixed sidebar
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
min-width: 260px
}
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna sed
consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar in
sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
You can use CSS special selectors: example:
#media screen and (max-width: 480px) {
.content {
width: 80%;
}
}
So that the .content will be set to 80% width on small screens.
You may also want to change the sidebar behavior for small resolutions, like setting up his position to initial and expanding his width to the same width as your content, so the design stay coherent.
Here's a fiddle (You need to resize the render frame by click and drag to see it in action )
https://jsfiddle.net/9c3ztska/1/
Now i will introduce to you something very usefull when designing responsive website:
It's a framework called Skel.
Long story short, it uses a grid system, wich let you specify specific size for a div for specific resolutions.
The grid system works with 12 units in width, so 12u represent 100% of the container width.
Here's a code example:
<div class="row">
<div class="6u 12u(small)"> YOUR CONTENT </div>
</div>
What it means:
Your content will be 50% of the container width on large screen, but will expand to 100% on small screens.
If you want to try it out and get fast in it, i recommend you to try baseline wich is a boilerplate using Skel framework.
You can download it and put it on your server (no db needed) and start coding.
baseline comes with pre-configured Skel and "breakpoints" (breakpoints are screen resolutions for wich Skel will swicth between CSS rules)
I was wondering if any of you knew if it was possible to make anything looking like this :
I know about http://www.infimum.dk/HTML/slantinfo.html but I can't put any text in the slanted areas.
Did it with a bit of javascript: http://jsfiddle.net/billymoon/AvmE8/
But that is just for convenience, you can do the same with HTML.
Will not apply to all circumstances, and will need a little tweaking, but can be made to work for things you know the approximate length of - or know the upper bound of.
html:
<div id='left'>whatever text</div><div id='right'>random text</div>
css:
#left, #right{
text-align: justify;
position: absolute;
width:60%;
right:0;
}
#right{
right:auto;
left:0;
}
js:
for (i = 1; i < 40; i++) {
$('<div />').css({
border: '1px solid silver',
height: 10,
width: (5 * i),
float: 'left',
clear: 'left'
}).prependTo($('#left'))
$('<div />').css({
border: '1px solid gold',
height: 10,
width: (200 - (5 * i)),
float: 'right',
clear: 'right'
}).prependTo($('#right'))
}
Here is an example of the desired layout using the CSS shape-outside property even though it has the status of "candidate recommendation" and should not be used as it may change at any moment and has poor browser support :
DEMO (only modern webkit browsers)
Note : this layout would be much easier to make by combining shape-outside and shape-inside (i.e. no absolute positioning) but currently no browsers I know of support shape-inside.
p{
width:550px;
text-align:justify;
overflow:hidden;
}
#right{
position:absolute;
top:0; left:355px;
}
p:before{
content:'';
width:40%;
height:710px;
}
#left:before{
float:right;
shape-outside: polygon(100% 0, 100% 100%, 20% 100%);
}
#right:before{
float:left;
shape-outside: polygon(0 0, 100% 0, 20% 100%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
This property can also (combined with the clip-path) alow you to slant text next to a cliped image:
DEMO (modern webkit browsers only)
References:
browser support chart
MDN shape-outside
more to read and learn about CSS shapes and ways to clip content around and inside non rectangular shapes: Non-Rectangular Layouts With CSS, html5rocks, alistapart
Thinking out loud here, but what if you have 2 side by side vertical divs. In the left div use Eric Meyer's Slantastic technique on the right side. In the right div use it on the left side.