Related
I have generated html and css that users will be printing. Each <div class="entry">...</div> should effectively be an index card with content. I added these rules to the <body>
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 120px);
grid-row-gap: 0.5em;
grid-column-gap: 1em;
and the layout looks reasonable except that when printing it will break some of the cards accross pages so I added
#media print {
.entry {
break-inside: avoid;
}
}
This does not work, the print preview still shows the page breaks coming in the middle of the entry divs.
If I remove the grid css then the break-inside: avoid is honored.
Is there any reasonable way to get these two features to work together?
Edit: At Brett's request here is a jsfiddle https://jsfiddle.net/3sxt192h/ with the minimal repro content
If you take that html and css and remove both display:grid and break-inside the print preview shows it breaking inside a div. Adding the break-inside works and it doesn't break mid-div. Add display:grid and you can see that it breaks mid-div again.
I got the same results as you when I tried it.
You could use CSS columns instead of a grid, which seems to work fine in Chrome, but not in Safari. Here is the code I used. I tried it as a snippet, but that changes the printing behaviour :-(
<html>
<head>
<style>
body {
columns: 2;
gap: 1em;
margin: 1em;
}
p {
break-inside: avoid;
padding: 1em;
border: 2px solid black;
background: cyan;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas dui eget eros consectetur, vel lacinia erat tempor. Nunc volutpat, ante quis condimentum faucibus, mi augue posuere libero, luctus luctus leo lacus et ex. Donec non vehicula augue. Mauris a imperdiet est, eu mollis risus. Cras ac libero ac nunc posuere porttitor. Phasellus congue magna quis magna blandit, at feugiat lorem consequat. Aliquam est magna, malesuada non enim ut, vehicula accumsan odio. Donec aliquet, ante at vulputate vehicula, mi justo venenatis turpis, pretium laoreet neque augue quis lacus. Maecenas finibus sed velit vel laoreet. Nunc porttitor sit amet turpis vel efficitur.</p>
<p>Duis mollis volutpat enim, non dignissim libero tincidunt at. Nam mauris nunc, fermentum non suscipit quis, ultricies ac augue. Suspendisse bibendum, massa vel tempus tristique, purus dui tristique ligula, et venenatis sem tortor nec nibh. Aliquam eget justo nec ipsum tincidunt congue non quis velit. Morbi fringilla, erat ut gravida eleifend, mauris urna posuere mauris, id porta turpis felis at nisl. Quisque et mi ac urna viverra efficitur eu sed turpis. Phasellus eget pulvinar lectus. In ac felis id sapien gravida convallis in at lorem.</p>
<p>Donec tincidunt ac tortor sit amet sodales. Nam convallis enim sem, id consectetur nisl ultricies sit amet. Aenean maximus, purus commodo luctus pharetra, lectus lectus lobortis eros, at tristique mi velit vel elit. Pellentesque sed justo non tellus blandit elementum. Phasellus arcu ipsum, posuere id venenatis a, faucibus ut nulla. Sed scelerisque sapien a augue efficitur, ac lobortis nulla sollicitudin. Pellentesque vitae neque vitae turpis aliquet tincidunt. Morbi at ex magna. Vestibulum ornare lacinia rutrum. Curabitur luctus, magna eget consequat rhoncus, purus nunc egestas nulla, at sollicitudin dui lacus et massa. Duis sit amet risus sit amet turpis dignissim lacinia. Suspendisse sagittis cursus dui ut rhoncus. Integer eu ex leo. In sit amet nisi mi. Curabitur nec mollis tortor.</p>
<p>Suspendisse potenti. Sed a hendrerit diam. Praesent tincidunt ut sapien sed porttitor. Fusce consectetur volutpat faucibus. Mauris iaculis efficitur risus, at tempus odio tincidunt at. Praesent volutpat nibh ac elit gravida tempor. Integer laoreet ac nisl ut pretium. Suspendisse et magna ut risus congue tincidunt.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed non diam viverra, vestibulum magna et, varius dui. In vitae eros efficitur, scelerisque est vitae, fermentum ipsum. Duis imperdiet in orci ut porttitor. In ultrices sollicitudin elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus elementum magna ornare, tincidunt elit ac, aliquam elit. Suspendisse dictum fermentum massa, a vehicula nisi finibus nec. In mattis tincidunt tellus, ac consequat leo aliquet at. Phasellus ultricies, lorem sed placerat porttitor, urna augue hendrerit mauris, at accumsan tortor justo eu felis. Cras id lacus aliquam, malesuada erat nec, malesuada libero.</p>
<p>Curabitur at ipsum vitae lacus fermentum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas eu lorem sit amet augue pellentesque pharetra. Praesent semper libero nec efficitur tincidunt. Suspendisse faucibus ultricies porttitor. Duis luctus ut neque tristique condimentum. Aenean ut massa id felis pretium rutrum.</p>
<p>Aenean ultrices, urna a facilisis luctus, diam quam efficitur eros, a posuere leo metus ultrices est. Morbi venenatis dolor ut justo finibus, in semper nisl auctor. Aenean risus ex, viverra vitae neque nec, eleifend laoreet sem. Nam suscipit magna non lectus imperdiet, sit amet venenatis enim molestie. Vestibulum id felis vel dolor hendrerit fringilla nec venenatis odio. Donec dapibus, nunc non pellentesque efficitur, ipsum tortor condimentum tortor, sed laoreet diam ante nec urna. Sed leo massa, eleifend sit amet iaculis at, placerat at elit. Nullam at mollis purus. Quisque faucibus enim hendrerit lacus volutpat, eu dignissim dui venenatis. Nulla accumsan turpis vitae lobortis tincidunt. Morbi maximus arcu sapien, eu tincidunt justo vestibulum eu. Suspendisse luctus tellus dolor, a ornare leo imperdiet sed.</p>
<p>Pellentesque maximus, urna in posuere faucibus, enim sem molestie ante, vel mollis tellus massa vitae odio. Sed elementum at turpis sit amet semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent risus ex, commodo sodales iaculis vitae, cursus sit amet nulla. Proin venenatis neque felis, id vulputate arcu cursus et. Quisque venenatis tellus id nisl convallis, id mollis massa condimentum. Vestibulum aliquet tristique lacus vitae viverra. Integer tincidunt eu diam a molestie. Curabitur eleifend urna sit amet aliquet sodales. Suspendisse et felis et metus lobortis faucibus quis eu eros. Nulla a augue dolor. Vestibulum sit amet leo sagittis, interdum mi eget, aliquam sem. Morbi elementum, tellus eu molestie sagittis, diam ipsum euismod nulla, at aliquet sapien tellus non nisi. Donec malesuada tellus lorem, vitae ullamcorper massa sagittis et. Praesent sodales tincidunt eros, eget tempor enim blandit vitae.</p>
<p>Aliquam gravida sagittis imperdiet. Fusce pellentesque metus vitae velit pharetra, eu tempus risus tempus. Maecenas egestas, turpis id euismod tristique, eros dui tempor elit, eu vulputate ipsum eros quis nibh. Nulla facilisi. Aliquam eget dui condimentum, tempor sapien in, dapibus magna. Nam nec velit mauris. Nunc auctor, eros quis bibendum lacinia, elit diam ornare nulla, ut viverra arcu nibh in odio. Quisque nibh ipsum, dictum ullamcorper purus in, condimentum fermentum risus. Nullam eget mollis magna. Phasellus rhoncus dignissim blandit. Sed massa ex, mollis id placerat in, convallis in velit. Sed molestie volutpat justo sit amet eleifend.</p>
<p>Ut dui est, mollis eget efficitur quis, dapibus et quam. Sed est erat, pulvinar et efficitur et, blandit sit amet purus. Nunc congue vitae enim id interdum. In euismod, felis at faucibus euismod, nunc nulla varius nisl, ut viverra nisl lectus a ipsum. Nunc sollicitudin felis eget viverra accumsan. Mauris id sem elit. Praesent ultrices lorem quis est malesuada, congue imperdiet mi sodales. Curabitur laoreet velit nisl, eget viverra ex posuere ac. Nullam pretium est ac semper fringilla. Integer sed egestas elit. Sed eu pharetra felis. Morbi eget enim sit amet tellus rutrum tincidunt. Nullam in efficitur magna. Suspendisse lobortis nisi at lectus blandit, vitae ullamcorper urna placerat. Proin consequat, risus ut condimentum tristique, ex nibh vehicula dolor, non viverra eros odio eu augue.</p>
<p>Donec lectus sem, feugiat sed augue ac, dapibus bibendum leo. Donec pharetra vehicula fermentum. Donec ac urna lacus. Maecenas felis elit, laoreet ut vulputate ut, pretium in nisi. Integer elementum at enim eu pellentesque. Nunc in ornare erat. Donec sed hendrerit massa. Nunc mattis nunc at ex cursus, vel sodales turpis pulvinar.</p>
<p>Suspendisse euismod condimentum scelerisque. Donec finibus justo at erat molestie, venenatis lobortis justo blandit. Fusce id arcu maximus, scelerisque dui eu, blandit dui. Morbi rhoncus pharetra porta. Duis rhoncus dui nec odio rhoncus mollis. Aenean et metus turpis. Duis ut metus mi. Nam eleifend sapien et nisl vehicula iaculis. Praesent tortor tellus, pulvinar at ipsum ac, euismod porta felis. Nullam iaculis, ante vel pulvinar lobortis, mauris eros auctor nisl, consectetur maximus turpis lectus at odio.</p>
<p>Cras sed ex eget nibh fermentum molestie. In hac habitasse platea dictumst. In ac sollicitudin risus, id auctor elit. Fusce lacus orci, mattis ac neque non, malesuada feugiat mi. Morbi vel fringilla odio. In et nisi feugiat, varius ipsum nec, scelerisque massa. Etiam tincidunt rutrum sagittis. Fusce fringilla tincidunt vehicula. Pellentesque nec sem sed dui ultricies scelerisque. In pulvinar lacus sed eros cursus, imperdiet blandit neque fringilla. Nulla tempor molestie mattis. Donec et faucibus nibh. Duis nec turpis felis. Cras tempus eros quis nisi malesuada, non auctor neque porta.</p>
<p>Nullam est sapien, gravida finibus metus in, feugiat viverra nunc. Aenean at ultrices velit. Aenean tellus sapien, convallis eget metus at, elementum aliquet nunc. Vestibulum vestibulum risus quis arcu malesuada, eu feugiat velit elementum. Cras gravida ut massa ac aliquam. Fusce ornare luctus massa nec vestibulum. Sed vitae blandit ante. Nullam sed metus malesuada, bibendum sem sit amet, ullamcorper justo.</p>
<p>Ut sagittis semper molestie. Suspendisse potenti. Quisque eu commodo nisl. Praesent bibendum fermentum erat, vel mattis lacus aliquam eget. Morbi a laoreet risus, a tincidunt lectus. Integer elementum, justo nec commodo tempor, eros libero pretium diam, id feugiat magna risus at neque. In hac habitasse platea dictumst. Integer non dapibus velit. Maecenas fringilla dolor quis rutrum bibendum. Nam tincidunt hendrerit ullamcorper. Praesent tempus lacus et dui consequat dignissim. Vivamus sit amet scelerisque nulla.</p>
<p>Cras et ipsum ut lorem pellentesque vulputate. Vestibulum molestie, lectus pulvinar suscipit suscipit, sem turpis dignissim magna, et ornare mauris purus bibendum metus. Phasellus in scelerisque augue. Vestibulum iaculis non dui sit amet lobortis. Nunc semper massa sed risus placerat, at ultrices libero varius. Nulla metus nunc, vestibulum at vulputate a, ultrices vitae dui. Praesent luctus consectetur felis, eget lobortis purus tristique vel. Donec tincidunt felis eget augue tincidunt dapibus.</p>
</body>
</html>
My layout is made by Flexbox and I want to have a Sticky Sidebar that works great with content that overflows.
In my attempt, I'm using StickySidebar.js an external library. However, if you check the example because the Sidebar's position is set to fixed the content alignment is being messed up. I've also found out that centering the 2 elements with justify-content is what messes everything up.
window.ResizeSensor = ResizeSensor;
new StickySidebar("#sidebar", {
containerSelector: "#cont",
innerWrapperSelector: ".sidebar-inner",
topSpacing: 0,
bottomSpacing: 20,
left: 0,
right: 0,
maxWidth: "24rem",
resizeSensor: true,
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://abouolia.github.io/sticky-sidebar/js/ResizeSensor.js"></script>
<script src="https://abouolia.github.io/sticky-sidebar/js/sticky-sidebar.js"></script>
<div class="flex justify-center mt-10" id="cont">
<article class="max-w-xl border mb-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac turpis porta, tincidunt nunc in, facilisis sapien. Proin lobortis ac justo nec faucibus. Proin in egestas enim, in feugiat libero. Nulla quis vulputate ligula. Nulla tincidunt interdum augue, id ullamcorper dolor sodales eu. Phasellus sed libero lobortis, ornare neque et, ultricies quam. Praesent accumsan convallis mauris, sit amet convallis nibh feugiat nec.
Ut at faucibus tortor, eu suscipit tortor. Curabitur a molestie dui. Mauris ultricies rhoncus tellus id porta. Maecenas ultrices justo sit amet felis cursus, eget semper dui congue. Aenean maximus blandit nisl id commodo. In eget enim nunc. Cras sed vehicula urna. Integer non sapien cursus, scelerisque nunc non, imperdiet magna. In consectetur turpis sed felis laoreet, non bibendum tellus vulputate. Fusce eu tincidunt massa. Proin non imperdiet elit. Nulla nisi justo, egestas a viverra ut, suscipit non turpis. Vivamus mattis lacus a nisi varius bibendum. Sed non justo euismod, viverra felis vel, luctus nibh.
Pellentesque convallis ipsum nisl. Suspendisse potenti. Duis egestas maximus dui, ac accumsan purus euismod quis. Maecenas elit ante, iaculis vitae egestas a, fringilla sed ex. Suspendisse ac enim commodo, bibendum velit ac, sagittis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse fringilla ante et semper vestibulum.
Maecenas fermentum sagittis pellentesque. Ut semper enim id libero fringilla, ut malesuada velit cursus. Sed malesuada odio sit amet mauris dignissim tincidunt. Sed suscipit neque ut nibh auctor aliquam. Sed mollis lacus quis sollicitudin lacinia. Fusce vestibulum interdum commodo. Suspendisse aliquet venenatis nisl, at tempus dolor lacinia ac.
Quisque odio neque, accumsan eget laoreet a, lacinia nec arcu. Pellentesque faucibus purus gravida lorem pulvinar congue eget non erat. Morbi egestas arcu id justo tempor pharetra. Integer quis pharetra elit, at imperdiet turpis. Maecenas vitae gravida lectus, in ornare leo. Praesent porta non ligula a eleifend. Mauris nibh metus, blandit vitae metus quis, porttitor ultricies nunc. Nunc dictum consequat metus quis condimentum. Cras vitae interdum nisi, hendrerit placerat arcu. Nullam ut scelerisque urna, et pretium nibh. Pellentesque egestas elit egestas nibh tempus aliquam. Aenean vehicula velit eu est hendrerit, vel suscipit urna fermentum. Nam aliquam viverra augue ac pharetra.
Sed ut porta tortor. Nullam scelerisque lobortis neque eget auctor. In hac habitasse platea dictumst. Nulla tempor, nulla nec hendrerit laoreet, dui ex rutrum massa, vel scelerisque arcu sem eget libero. Vestibulum vestibulum odio vitae venenatis posuere. Phasellus pretium cursus ante, scelerisque iaculis nulla feugiat non. Integer varius posuere lorem, eget vehicula sapien commodo ut. Nam faucibus orci a magna blandit, a accumsan mi ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent imperdiet sapien arcu, sit amet vestibulum eros iaculis ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi luctus est a libero imperdiet, ac venenatis est blandit. Etiam pulvinar risus quis sollicitudin vehicula. Suspendisse lacinia neque non leo molestie, vitae volutpat velit laoreet. Vivamus purus nisl, aliquam id ullamcorper vel, egestas quis est. In hac habitasse platea dictumst.
Maecenas eu felis ut sapien mattis suscipit a et nisl. Etiam vel euismod dolor. Integer congue, metus in porttitor imperdiet, leo purus blandit tellus, ut dignissim odio eros sit amet mi. Duis malesuada feugiat felis vitae pharetra. Donec commodo metus sed luctus vestibulum. Ut eleifend eros nec metus venenatis hendrerit. Morbi commodo in magna a rutrum. Quisque sodales turpis eu felis lacinia pretium. Nam eu dolor sed magna gravida consequat. Fusce egestas lacus sit amet mi pharetra interdum. Donec lacinia pellentesque mi sit amet tincidunt. Integer id feugiat quam. Quisque congue a ipsum in sodales. Fusce tincidunt fermentum erat non molestie. Suspendisse sed ultricies augue.
Morbi massa leo, finibus vitae dictum quis, finibus ut purus. Maecenas convallis orci ac ante bibendum, ac tincidunt odio dictum. Cras placerat dapibus tellus, in porta risus. Donec vel tristique nibh. Vivamus euismod condimentum ipsum, sed fermentum nunc convallis id. Nunc laoreet scelerisque ligula, non consectetur orci sagittis vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus varius nulla nec nulla viverra, eget auctor est ullamcorper. Fusce tristique sodales faucibus. Sed volutpat nec ipsum non facilisis. Aliquam eget urna mollis, vehicula mauris sit amet, vehicula sem.
Vivamus sit amet odio sed ipsum pharetra semper. Proin eu sagittis metus. Donec ut tempus velit, sed vehicula quam. Pellentesque ultricies maximus magna efficitur dictum. Nullam pellentesque rhoncus sodales. Sed enim ex, vestibulum in lorem a, scelerisque pretium lectus. Quisque sit amet ipsum ac lacus vehicula porttitor porttitor non nisi. Nullam a placerat lacus, eget varius massa. Phasellus dignissim suscipit sodales.
Praesent fringilla elit quis leo imperdiet, id accumsan ante consequat. Aliquam fringilla tortor eget posuere sollicitudin. Mauris imperdiet facilisis magna, eget ultrices elit vulputate at. Morbi scelerisque, ante in placerat rhoncus, nulla elit auctor odio, eu dapibus lorem nibh sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed placerat quam vitae laoreet lobortis. Vestibulum blandit tellus in vulputate accumsan.
Nullam eget eros augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum eleifend erat, sit amet pharetra nunc malesuada ac. Nunc dapibus lectus quis pharetra facilisis. Duis ut cursus dui. Morbi auctor volutpat laoreet. Sed eu accumsan arcu. Sed fermentum vulputate ante nec interdum. Phasellus in magna lectus. Mauris nec aliquet velit, sed laoreet odio. Vestibulum tincidunt iaculis varius. Ut lobortis nisi leo, a mattis ante vulputate ut. Sed molestie enim sed urna pharetra rutrum.
Fusce mattis maximus purus, nec aliquam dui rutrum placerat. Maecenas vel efficitur nisi, vel venenatis neque. Duis facilisis diam et ultricies condimentum. Duis gravida convallis sagittis. Pellentesque sollicitudin nisi sed ante porttitor tincidunt. Proin euismod metus nisl, ut convallis elit pharetra in. Nulla posuere, odio non tincidunt tincidunt, ex risus finibus leo, vitae semper ligula dui a arcu. Nam ac molestie odio. Cras quis dolor dictum, rhoncus nibh vitae, pretium eros. Nam ante urna, imperdiet non tortor vel, accumsan mollis urna. Fusce maximus pretium est vitae aliquam. Integer eu pharetra justo, sit amet pellentesque nunc. Nullam ultrices risus non felis ornare, vel vulputate augue lobortis. Aliquam urna mi, commodo eu elit ut, suscipit dictum nunc. Aenean viverra lorem vel vehicula malesuada.
Suspendisse nibh ex, facilisis non condimentum nec, ullamcorper scelerisque elit. Fusce at efficitur enim. Nullam sed facilisis diam, ut semper velit. Quisque tincidunt elit ex, nec fringilla enim lacinia sed. Pellentesque elementum et orci eget tempus. Duis posuere, tellus sed volutpat tempus, lacus mauris finibus neque, id suscipit leo est eu magna. Proin feugiat vulputate ante, vitae malesuada nibh. Fusce metus risus, tristique at tincidunt at, pharetra non lorem. Phasellus varius tellus non ullamcorper finibus.
Integer varius, nisl commodo tempor ultrices, orci nunc condimentum sem, volutpat porttitor magna lectus in nisl. Sed vehicula mauris vel ipsum viverra, sed dictum mi pretium. Nam blandit condimentum justo, rhoncus pharetra ligula consequat vitae. Curabitur felis mauris, dignissim eget tristique non, euismod nec sem. Etiam consequat ex a elit ultricies, in ornare odio egestas. Vestibulum vulputate lorem et tortor porta, eget condimentum lacus efficitur. Donec velit felis, dapibus non sollicitudin quis, eleifend id diam. Maecenas massa elit, fermentum a tincidunt quis, dapibus et dui. Vestibulum elit sapien, auctor eu consectetur vel, feugiat vulputate erat. Donec mi risus, sodales nec auctor vitae, placerat quis nulla. Nulla porta interdum blandit. Suspendisse potenti. Morbi sed consectetur velit. Nullam aliquam gravida ante, vitae pellentesque dui.
Fusce sodales finibus erat in lobortis. Aliquam erat volutpat. Maecenas semper diam et lorem ultrices, aliquet euismod purus pulvinar. Nullam porttitor ex eu sapien placerat, non rutrum arcu laoreet. Curabitur ut laoreet est. Nulla semper sem quis commodo congue. Suspendisse pharetra lorem eros, eget semper ex rutrum id.
Etiam sit amet interdum metus. Nam dictum auctor dui id eleifend. Integer faucibus tellus ac nibh commodo, nec efficitur massa luctus. Morbi ante quam, rutrum vel rhoncus venenatis, gravida quis lacus. Cras ac egestas felis, ut iaculis purus. Nunc venenatis ipsum dolor, vitae cursus quam lobortis eget. Proin bibendum rhoncus diam, vel porta nisi. Quisque placerat sodales dignissim.
Proin volutpat tortor ex. Suspendisse efficitur libero purus. Aliquam ornare ex elit, eu feugiat turpis bibendum scelerisque. Sed ut commodo enim. Nullam porta, ex ut luctus tempus, nunc ipsum hendrerit nisl, id lobortis urna turpis id leo. Nunc ultricies nisi tortor, sit amet efficitur dui gravida sit amet. Ut ac feugiat metus. Proin dictum, sapien in rutrum luctus, sem mi viverra sem, eget tincidunt est quam et arcu. Fusce scelerisque sapien sed odio scelerisque, ut dapibus ex commodo. Pellentesque id commodo ante. Donec ultricies aliquet cursus. Curabitur blandit tempor tellus eget auctor. Phasellus tristique aliquet ante eu facilisis.
Maecenas at metus diam. Nam nec congue sem. Donec lorem risus, sollicitudin ac augue sit amet, bibendum bibendum dolor. Duis lacus erat, facilisis quis lobortis vitae, elementum nec velit. Maecenas porta tristique mattis. Vivamus vitae dolor sit amet eros pellentesque sagittis. Aenean massa risus, luctus at nibh id, maximus blandit eros. Mauris vestibulum consectetur neque sit amet placerat. Curabitur fringilla aliquet ornare. Donec auctor odio fermentum dolor vulputate, ut ullamcorper erat eleifend. Sed pellentesque tristique rhoncus.
Aenean commodo convallis mi nec euismod. Donec vestibulum sem sit amet vestibulum lacinia. Phasellus consectetur tellus turpis, id tincidunt nulla tempus sit amet. Suspendisse nec venenatis libero, molestie mattis lectus. Ut ut risus quis nisl hendrerit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nunc ultricies, ultrices est id, aliquet magna. Nulla auctor ligula nec metus finibus feugiat. Pellentesque sit amet pulvinar ante, vel semper magna. Aliquam in suscipit nulla, ut molestie turpis.
Sed scelerisque posuere lectus at tincidunt. Praesent at ornare nisi. Pellentesque mollis vehicula ante vel tempus. Sed sapien orci, bibendum ac purus at, faucibus interdum mi. Pellentesque feugiat gravida congue. Pellentesque mollis dictum sem, in posuere odio fringilla a. Duis urna libero, eleifend vitae erat in, pulvinar dignissim diam. Pellentesque luctus, tellus ut malesuada faucibus, ligula urna dictum nunc, non sollicitudin dolor lorem at est. Cras imperdiet, elit scelerisque convallis semper, augue erat posuere eros, ut sodales eros lorem at tortor. Nunc vel blandit massa. In nec sollicitudin nisi. Vivamus vitae ultricies orci, nec ultrices ante. Curabitur eleifend lorem eu nibh volutpat volutpat.
</article>
<article class="flex flex-col max-w-xs" id="sidebar">
<div class="sidebar-inner px-4 border h-full" style="transform: translate3d(0, 0, 0); will-change: position, transform;height: 800px;">
Content for the sidebar...
<div class="footer fixed bottom-0">
botttom
</div>
</div>
</article>
</div>
Is it possible to center everything in the middle while still using Flexbox and a fluid layout (with no container widths set)? Or are there any alternative solutions to this?
With css, you can center everything like this (if that's what you need)
span {
position: absolute;
top: 50%; right: 50%;
transform: translate(50%,-50%);
color: black;
}
<span>text in the center</span>
I am building a website with a horizontal layout. There will be a container with text inside which should flow in a fixed height and multiple columns to the right. The columns are set with column-width. My problem is now, that the container's width does not expand equal to the content. As you can see in my Jsfiddle, the main element only takes the viewport width. How can I get the main to expand equal to its content?
https://jsfiddle.net/vahut16y/6/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
}
main {
column-width: 300px;
column-gap: 80px;
column-fill: auto;
height: 70vh;
background-color: cadetblue;
}
<main>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
<p>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</p>
<p>
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum
sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis
hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
</p>
<p>
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.
Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt
non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac
</p>
<p>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</p>
</main>
Original answer
In the way you're currently doing, instead of expanding it you should allow the content to overflow, to do that just add overflow: auto to the main. (edit: minified html).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
}
main {
column-width: 300px;
column-gap: 80px;
column-fill: auto;
height: 70vh;
background-color: cadetblue;
overflow: auto;
}
<main><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p><p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p><p> Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. </p><p> Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p><p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p></main>
Answer after comments
You made things far more complicated when you said you needed the body to overflow instead of main, here's my second attempt using css only.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
padding: 0 40px;
}
main {
column-width: 300px;
column-gap: 0;
column-fill: auto;
height: 70vh;
}
div {
background: linear-gradient(90deg, rgba(69, 134, 222, 1) 0%, rgba(88, 81, 219, 1) 20%, rgba(131, 58, 180, 1) 40%, rgba(193, 53, 132, 1) 60%, rgba(225, 48, 108, 1) 80%, rgba(237, 140, 75, 1) 100%);
color: white;
}
<main>
<div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </p>
<p> Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. </p>
<p> Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac </p>
</div>
</main>
As you can see, it behaves the way you described, but with a few problems.
You have to set the spacing with padding and not column-gap.
Linear gradient backgrounds won't work properly.
The background won't fill to the height of the div, but to the text (see the end of div).
There might be other problems aswell, maybe you're better of with a js solution in this case. Also this might be useful when available.
I'm creating an HTML template for DOMPDF need to support multiple pages, but the header and footer doesn't show up on the first page when I have multiple pages.
At the moment;
When I have multiple pages, all pages have Header and Footer correctly except the first (the First page only shows content, page 2,3 and shows content with header and footer).
When I just have one page, the pages shows correctly with header and footer.
<style>
* {
background:transparent;
}
#page {
margin: 0cm 0cm;
background:#000;
margin-top: 190px;
margin-left: 75px;
margin-right: 75px;
margin-bottom: 115px;
position: reletive;
}
header {
position: fixed;
top: -190px;
left: -13px;
z-index:0;
right: 0cm;
}
footer {
position: fixed;
bottom: -115px;
right: 0cm;
left:39px;
z-index:0;
height: 215px;
}
div.content {
float: left;
width: 100%;
}
div {
z-index:10;
background:transparent;
}
</style>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra leo bibendum mi fermentum euismod. Aenean ut augue mauris. Vivamus ultricies euismod malesuada. Praesent mollis eros vel elit ullamcorper, nec viverra justo ultrices. Sed sagittis nisi sit amet convallis placerat. Nam sed dui quis lacus auctor eleifend. Nulla in imperdiet magna, eget dignissim tellus. Quisque placerat nisl a orci tincidunt, sit amet porta nibh dapibus. Vestibulum tortor neque, consequat nec nibh ornare, convallis sagittis ligula. Integer a ex at sapien porttitor volutpat ut in elit.</p>
<p>Fusce nunc orci, posuere sed varius ac, ornare eu orci. Donec consequat pulvinar eleifend. Donec rutrum fringilla dignissim. In consectetur ligula nec pulvinar placerat. Duis interdum accumsan congue. Nulla iaculis magna laoreet dolor tempor, vitae eleifend lectus accumsan. Suspendisse vulputate euismod ante, at blandit tellus auctor a. Sed aliquam lacus eget mi fermentum, vitae maximus elit rhoncus. Nunc vel sagittis orci.v
<p>Quisque fermentum augue in metus laoreet placerat. Nam eget nisi congue, luctus augue quis, ullamcorper est. Nullam eu augue sed dui imperdiet ornare ac interdum lacus. Mauris in viverra lorem. Duis cursus mi quis pellentesque condimentum. Vivamus ut nisl lacus. Phasellus condimentum eros non massa porta rutrum. Proin lacinia ultrices dui ut iaculis. Praesent ut placerat tellus, ac hendrerit mi.</p>
<p>Suspendisse vitae velit maximus, convallis ipsum vel, ornare sem. Curabitur et viverra ligula. Phasellus facilisis neque eu nunc interdum tempor. Mauris tellus lacus, vestibulum sed posuere eu, porttitor non orci. Proin sollicitudin et nisl eget mattis. Donec euismod ipsum quis interdum dictum. Duis facilisis accumsan ultricies. Praesent sollicitudin urna nunc, at auctor odio blandit nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean consequat, magna a molestie commodo, mauris lacus congue nisi, quis pellentesque nunc quam in metus. Duis volutpat neque in justo sodales, eget ultricies libero pellentesque.</p>
<p>Curabitur euismod velit turpis, consectetur ornare erat aliquam a. Nulla sagittis commodo varius. Pellentesque tempor, nibh a hendrerit tristique, turpis leo lacinia elit, vitae scelerisque dolor ex ac lectus. Maecenas vulputate dictum erat, quis posuere nisl pellentesque vitae. Nulla auctor volutpat lacus, sed sodales mi porta at. In ut purus augue. Fusce nec nulla non leo finibus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra id ante sed porttitor. Nam et dolor congue, malesuada enim facilisis, rutrum justo. Etiam quis lectus a tellus mollis placerat. Maecenas interdum tortor faucibus metus tincidunt euismod. Vestibulum laoreet velit quis lobortis interdum. Duis urna quam, vehicula sed ultricies ut, volutpat accumsan libero.</p>
<p>Morbi pulvinar tristique augue, vel pellentesque nisl porta eget. Quisque eu lacinia leo. Nullam ac lacus pretium, suscipit risus quis, volutpat ligula. Morbi vel nisl orci. Suspendisse pharetra tellus euismod ligula tristique, sit amet lacinia nisl ultrices. Curabitur finibus turpis nec metus tempus, non suscipit leo pulvinar. Pellentesque fringilla faucibus massa. Suspendisse commodo egestas tristique. Phasellus tristique vehicula nisl ut consectetur. Aliquam hendrerit augue eu posuere fermentum. Nulla a neque quis ex finibus congue. Vestibulum id condimentum augue. Nulla pretium imperdiet turpis, sit amet cursus urna maximus quis. Praesent dictum, leo nec ultricies fermentum, eros leo maximus felis, in aliquam lectus ligula at mauris. Etiam non ipsum at dui fringilla ullamcorper. Donec sapien lorem, aliquam in lacus at, lacinia pretium velit.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
</div>
<footer>
<img src="'.__DIR__.'/bottom.png" alt="" style="width:680px;"/>
</footer>
<header>
<img src="'.__DIR__.'/top.png" alt="" style="margin: 0px 0px 0px 0px; width:732px;"/>
</header>
In dompdf (up to and including version 0.8.3, latest release as of this post) elements are (generally speaking) rendered starting with the page on which they first appear. Because of this you'll want to put any header/footer content at the top of your document.
There is an issue related to this quirk here: https://github.com/dompdf/dompdf/issues/491
.container-fluid{
height: 500px;
padding: 0;
}
.kad-logo{
position: absolute;
top: 140px;
left: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img class="kad-logo" src="http://i.imgur.com/SMSxaXd.png" alt="kad">
</div>
<div data-spy="affix" data-offset-top="500">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
When I scroll down I can see the text behind the navbar. Why is this? This only occurs if I use the grid system.
I tried everithing: adjusting background color for navbar, changing z index, rewriting the whole code, and everithing from the forum recommendations.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img class="kad-logo" src="images/kad.png" alt="kad">
</div>
<div data-spy="affix" data-offset-top="500">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
I see you're trying to place an header image above the NavBar, but I guess you want to place it inside it.
So, you can follow Bootstrap's documentation to simply solve the problem. In any case, I tell you how to do.
It's enough to create a div with Navbar Header as class; placing then this:
<a class="navbar-brand" rel="home" href="#" title="Example">
<img src="logo.jpg">
Of course then close the a tag.
If what you're trying to do is something other, please make a fiddle with resources inside, so we can understand better the problem.
As you say, there is a problem about "text" while scrolling down; but I don't see any text, and evermore, I just see a failed-to-load image (of course, it isn't locally stored by my part, because you did a local src).
And so on, in line 8 you haven't really called a CSS file. Because it isn't correct syntax. Please check your CSS file and its location, then link to it like this:
<link rel="stylesheet" href="style.css">
I hope I have helped you.
UPDATE: After comments on this answer, I came to a solution.
I used some Javascript, because it's a bit tricky to achieve this, and with JS works really fine. Please note that if you want to make the space from the logo to the navbar more, you just need to use CSS with height and position vertically the logo. Here is it:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Now you need just this CSS (needs to keep navbar fixed while scrolling) */
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
</style>
</head>
<body>
<header class="masthead">
<div class="container">
<div class="row">
<div class="col-sm-3 logo">
<img src="http://i.imgur.com/SMSxaXd.png" alt="kad">
</div>
</div>
</div>
</header>
<div id="nav"> <!-- Do not remove this div#nav, because it makes everything work properly, using the JS in the bottom and the CSS; in any case if you want you can place JS in your <head>. -->
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// You need this to fix the Navbar properly.
$('#nav').affix({
offset: {
top: $('header').height()
}
});
</script>
</body>
</html>
Anyway, it was happening because is tricky place the navbar not at the very top of the page, so text doesn't even knew that there was a navbar, because it was even blocked by your logo container.
Now it's solved, I hope this helped you.
I experienced this same problem (the grid system content overlaying the navbar that was fixed using affix.js), but I solved it by just adding a z_index to the .affix css class, so I have:
.affix {
top: 0;
width: 100%;
z-index: 10;
}
This is a part of Optiroot's answer above, but that answer is so complicated and there are already so many comments to dig through, I wanted to give a simpler version.
I did not need the extra <div id='nav> or the css/javascript for it.