I have a section of a site that I want to set a max-height and then hide any content that overflows. The code looks like this:
HTML
<div class="blog-list">
<!-- CONTENT -->
</div>
CSS
.blog-list{
max-height: 243px;
overflow: hidden;
}
It works fine but the content inside has variable heights and I'm finding that content, every now and then, will appear clipped. Screenshot:
Is there a way to solve this problem? I prefer a CSS only solution but would accept a JS/jQuery solution, if that is what is required.
It really all depends on the ratio of your line-height to your font-size (based on your font-family)
See this snippet for instances, it won't show up (half-lines) due to having 1.33% of ratio regarding line-height / font-size (16px/12px)
Snippet
.blog-list {
max-height: 243px;
overflow: hidden;
font:400 12px/16px Arial;
}
<div class="blog-list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere,
mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus
sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed
tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed
suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec
tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor
lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam
velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra
erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices
lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet
vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere
egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus
ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel
urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur
id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed.
Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra
augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend.
Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat
eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien
fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur
vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo.
Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor
nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante
urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis
quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque
ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit
in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est,
sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam
</div>
Now see this snippet with system default font-size font-family and line-height using Firefox which are 16px serif and 20px respectively. Giving a ratio of 1.25% (20px/16px) and it still works.
Snippet
.blog-list {
max-height: 243px;
overflow: hidden;
}
<div class="blog-list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere,
mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus
sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed
tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed
suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec
tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor
lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam
velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra
erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices
lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet
vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere
egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus
ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel
urna vehicula aliquam. Proin lorem massa, efficitur vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nulla id sem finibus, maximus enim ut, congue leo. Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur
id est ac elit commodo vehicula. Donec nec porttitor nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed.
Sed hendrerit, lectus sit amet tristique semper, ante urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra
augue. Nullam sed efficitur urna. Vivamus dictum felis quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend.
Duis imperdiet urna id laoreet placerat. Pellentesque ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat
eros fringilla sit amet. Proin facilisis, velit in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien
fermentum posuere. Nullam ut scelerisque est, sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacus vel urna vehicula aliquam. Proin lorem massa, efficitur
vel consectetur non, luctus eu justo. Vestibulum urna dui, vulputate eget mollis nec, iaculis lacinia metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id sem finibus, maximus enim ut, congue leo.
Phasellus vestibulum eleifend ex, ac feugiat augue tempus a. Suspendisse potenti. Nam orci augue, ultricies id diam posuere, mattis commodo leo. Mauris aliquam velit sed purus blandit malesuada. Curabitur id est ac elit commodo vehicula. Donec nec porttitor
nisl. Sed volutpat condimentum ante, nec mollis massa sodales in. Vestibulum aliquet fermentum porta. Morbi dapibus sodales pulvinar. Sed dapibus viverra erat, faucibus dapibus ligula luctus sed. Sed hendrerit, lectus sit amet tristique semper, ante
urna tempor velit, non pellentesque mi metus ut nisl. Mauris fermentum ullamcorper nibh. Integer efficitur, nisl sed tincidunt pulvinar, nisi justo ultrices lectus, a sollicitudin sapien est viverra augue. Nullam sed efficitur urna. Vivamus dictum felis
quis purus pulvinar, at fringilla leo sodales. Donec quis nisl imperdiet, tempor nibh in, condimentum ligula. Sed suscipit nisl enim, et cursus urna aliquet vitae. Sed pharetra consequat eleifend. Duis imperdiet urna id laoreet placerat. Pellentesque
ullamcorper porttitor diam, interdum dictum massa placerat vitae. Nulla facilisi. Duis placerat accumsan neque nec tincidunt. Nunc pretium neque at posuere egestas. Sed lobortis lorem dolor, ac volutpat eros fringilla sit amet. Proin facilisis, velit
in tincidunt blandit, est erat dapibus elit, quis tristique massa dui vitae ligula. Cras vel nulla vel arcu auctor lacinia sit amet id magna. Curabitur dapibus ultricies blandit. Sed sit amet arcu eu sapien fermentum posuere. Nullam ut scelerisque est,
sit amet maximus orci. Curabitur nibh nibh, accumsan et justo a, aliquam
</div>
So, just adjust font-size and/or line-height and it will solve your issue.
According to a another stackoverflow question, you can hide elements that don't fit in your container by inserting this jQuery code in your script: (I tailored it to your needs - but you will need to give your container an id of blog-list.
var neededHeight = $('#blog-list').outerHeight();
var totalChildHeight = 0;
$("#blog-list").children("li").each(function() {
totalChildHeight += $(this).outerHeight(true);
if(totalChildHeight > neededHeight) {
$(this).hide();
$(this).nextAll().hide();
return false;
}
});
Here's a sample: (where the 13th and 14th li item won't show because they don't fit)
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var neededHeight = $('#blog-list').outerHeight();
var totalChildHeight = 0;
$("#blog-list").children("li").each(function() {
totalChildHeight += $(this).outerHeight(true);
if(totalChildHeight > neededHeight) {
$(this).hide();
$(this).nextAll().hide();
return false;
}
});
</script>
<ul id="blog-list" style="background:red;height:243px;width:100%;overflow:hidden">
<li> Lorem ipsum dolor sit amet 1</li>
<li> Lorem ipsum dolor sit amet 2</li>
<li> Lorem ipsum dolor sit amet 3</li>
<li> Lorem ipsum dolor sit amet 4</li>
<li> Lorem ipsum dolor sit amet 5</li>
<li> Lorem ipsum dolor sit amet 6</li>
<li> Lorem ipsum dolor sit amet 7</li>
<li> Lorem ipsum dolor sit amet 8</li>
<li> Lorem ipsum dolor sit amet 9</li>
<li> Lorem ipsum dolor sit amet 10</li>
<li> Lorem ipsum dolor sit amet 11</li>
<li> Lorem ipsum dolor sit amet 12</li>
<li> Lorem ipsum dolor sit amet 13</li>
<li> Lorem ipsum dolor sit amet 14</li>
<ul>
Related
I am currently working on a table view in my Angular application I want to make a sticky header to provide better user experience. To achieve that in Chrome and Mozilla I used the following CSS code:
div.sticky-table-head {
overflow-y: auto;
overflow-x: auto;
height: 100%;
width: 100%;
}
.scroll{
margin-left: auto;
margin-right: auto;
}
.scroll th {
position: sticky;
top: 0;
background: lightblue;
}
.scroll td {
text-align: center;
padding: 5px;
background: lightgreen;
}
HTML:
<div>
<table class="scroll">
<thead>
<th>
<strong>ID</strong>
</th>
<th>
Column 1
</th>
<th>
Longer column 2
</th>
<th>
Column 3 that is longer
</th>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>Data</td>
<td>DataDataDataData</td>
<td>DataDataDataDataDataDataDataData</td>
</tr>
...
</tbody>
</table>
</div>
I need to achieve the same effect on IE 11 without using any scripts or jQuery, only Angular mechanichs. Pure CSS and HTML would be the best.
Here is JSFiddle presenting current solution: https://jsfiddle.net/bn5L1fhm/
Is there any way that I can solve my problem without changing too much of my code?
IE doesn't support position: sticky and as far as I know, there is no standard way to achieve this with only CSS. You need script to achieve this in IE 11. We can only use position: fixed and listen for the scroll event of the page and use JavaScript to change the value of the position and top properties according to the current position of the viewport. The code used is like below:
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
.header {
height: 50px;
background-color: #ddcbaf;
text-align: center;
padding-top: 20px;
}
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #BFFFF3;
text-align: center;
}
.sticky {
top: 0;
position: fixed;
}
.container {
padding: 0 20px;
color: #989898;
}
<div class="header">
Title
</div>
<div class="menu">Home</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>
And the closest approach with your situation I found is the solutin in this answer, you could also refer to it.
I have string which 10558 characters long contains HTML Markup like:
<html>
<body>
.......
.......
.......
</body>
</html>
I am fetching that using AJAX call.
What I want is, to show that HTML markup in a element on MVC page,
I tried with 200 characters string which works fine but when it comes to 10558 characters then the window gets hanged.
What is the best way to show the large HTML markup in div?
(You said you're getting the HTML from an AJAX call - as opposed to rendering it server-side using Razor).
If you want to show the markup so that human users can "see" the HTML syntax, then set .textContent:
var htmlFromAjax = ...
var e = document.createElement("pre");
e.textContent = htmlFromAjax;
document.body.appendChild( e );
If you actually want to render the HTML as HTML inside the document, then using innerHTML is acceptable for this task - assuming you fully-trust the source of the AJAX response not to return malicious HTML that might contain scripts (and regardless, you should set a Content-Security-Policy on your document so browsers won't execute any added scripts anyway):
var htmlFromAjax = ...
var div = document.createElement("div");
e.innerHTML = htmlFromAjax;
document.body.appendChild( e );
This is 10K - nothing special
If you want to see the markup, replace all < with <
<div id="Inner">
<h1>Lorem Ipsum</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<hr>
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod nulla sit amet feugiat facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis felis magna, faucibus non blandit id, luctus quis ante. Ut posuere felis neque,
ut semper turpis rhoncus et. Vivamus convallis erat sed nisl dignissim posuere. Morbi hendrerit mattis quam at scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer congue ligula nec arcu
venenatis consectetur. Suspendisse id quam finibus, semper lorem sit amet, elementum augue. Praesent facilisis volutpat nisi, at vehicula arcu imperdiet ut. Cras viverra sit amet nulla ut porta. Suspendisse tempus accumsan ligula quis gravida.
</p>
<p>
Proin non faucibus ligula. Donec aliquam dapibus tellus, eget feugiat eros laoreet vel. Ut convallis, magna a luctus sodales, massa nisl cursus justo, eget ornare dolor purus nec ligula. In hac habitasse platea dictumst. Cras non porta dui. Vivamus at
iaculis eros. Integer vestibulum risus et nisi congue, eu auctor diam consectetur. Duis hendrerit tristique quam quis vehicula.
</p>
<p>
Nulla placerat scelerisque tellus, eget tempor purus vehicula eget. Nunc dictum ipsum a laoreet fermentum. Sed id nulla ut sapien tincidunt faucibus. Sed pretium placerat lorem vitae pharetra. Curabitur libero est, euismod molestie est sit amet, dapibus
accumsan libero. Aliquam eget facilisis ante. Fusce et nibh at nisl semper egestas ut at augue. Sed quam augue, tristique et rutrum ut, consectetur sed dolor. In ultricies odio eget erat pharetra vestibulum. Donec blandit, tortor eget molestie
sollicitudin, odio quam feugiat arcu, sed ullamcorper purus felis et felis. Nullam mattis consectetur orci, egestas feugiat orci tristique eu. Nunc convallis felis id ex ornare, sed vestibulum mi tempor. Donec sodales eros sit amet nibh tempus
tristique.
</p>
<p>
Morbi non sapien nibh. Curabitur vel velit eget lectus consectetur imperdiet. Proin suscipit nulla mauris, vel mattis sem porttitor quis. Ut sit amet convallis arcu, non eleifend felis. Phasellus porta scelerisque lacus, vel consectetur nunc convallis
eget. Pellentesque pellentesque lobortis nisl et porta. Aenean fermentum et enim ac volutpat. Suspendisse aliquet, mi ut ullamcorper elementum, orci ligula vehicula lacus, lobortis lacinia lacus mi ut augue. Aliquam varius nec sapien fermentum
sollicitudin. Aliquam auctor odio et est ultricies bibendum in vel elit.
</p>
<p>
Phasellus a consequat lectus. Aenean nisi eros, fringilla id libero at, elementum rhoncus magna. Donec ullamcorper blandit nunc non dapibus. Aenean ornare commodo lorem at convallis. Nam eros eros, volutpat non scelerisque eu, blandit ac elit. Nulla facilisi.
Curabitur id dignissim elit, ultricies vulputate risus.
</p>
<p>
Nunc ac orci a elit rutrum semper. Vestibulum in commodo erat. Nam iaculis congue euismod. Phasellus laoreet nibh non mauris condimentum vulputate. Donec eget diam porta, eleifend leo vitae, pellentesque turpis. Quisque suscipit dictum nibh pellentesque
sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Integer neque felis, dictum eget neque eget, rutrum vestibulum sapien. Sed erat elit, convallis in sem et, efficitur cursus lacus. Etiam tempor leo sapien, eu placerat arcu lobortis ac. Donec dapibus ullamcorper lectus ac facilisis. Vestibulum facilisis,
odio ac mollis sollicitudin, nibh massa pharetra odio, vitae pharetra metus nibh quis urna. Nulla nunc risus, dictum id placerat quis, accumsan feugiat augue. Aliquam quis efficitur tortor. Quisque varius felis eros, id consectetur enim porta
quis.
</p>
<p>
Nam id purus vitae nulla placerat commodo. Cras faucibus vehicula lectus ac pharetra. Aenean id elit ut risus ultrices ullamcorper sit amet convallis dui. Donec facilisis, leo quis ultricies fermentum, massa urna sagittis turpis, non tempus erat diam
eget enim. Morbi mauris leo, pulvinar eu aliquam eget, lacinia sit amet mauris. Donec blandit mollis nunc nec maximus. Donec at lacinia ligula, a euismod ex. Nunc accumsan venenatis ipsum id sodales. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Pellentesque eu viverra urna. Praesent ullamcorper aliquam lacus ac vestibulum. Donec efficitur efficitur purus, id venenatis nisl laoreet eu. Ut elit urna, faucibus in elit ac, scelerisque aliquam augue. Etiam blandit magna
ut lectus porta feugiat nec pharetra arcu. Fusce massa turpis, eleifend volutpat erat sed, iaculis interdum nisl. Morbi lobortis tincidunt ex, id elementum nulla sollicitudin nec.
</p>
<p>
Praesent interdum risus ligula, sed volutpat lacus aliquam sit amet. Quisque in dapibus augue. Maecenas ultricies, ipsum sit amet congue suscipit, neque mi vehicula mi, et auctor sapien diam vitae purus. Proin vitae tincidunt odio, at placerat tellus.
Aenean fermentum libero vel nulla convallis egestas. Suspendisse porttitor orci ex, quis dapibus nibh accumsan sit amet. Curabitur imperdiet nec odio a feugiat. Suspendisse dui risus, dapibus id arcu vitae, varius hendrerit ipsum. Quisque vestibulum
imperdiet venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis laoreet sapien vel lacus molestie tempus. Phasellus eget feugiat tellus. Etiam tristique neque a aliquam commodo.
</p>
<p>
Quisque ut velit laoreet, gravida dolor eget, congue risus. Vestibulum eget tortor at nisi blandit malesuada. Suspendisse mollis nunc ipsum, non fringilla lacus accumsan eu. Nullam vehicula mauris augue, non imperdiet lacus vestibulum a. Phasellus lacinia
scelerisque nulla eu tempus. Cras varius augue turpis, sed hendrerit enim dignissim eget. Morbi elementum ante vel odio rhoncus molestie.
</p>
<p>
Suspendisse sem metus, vulputate non justo eget, consectetur egestas enim. Aliquam erat volutpat. Maecenas ac pretium lectus, non porttitor est. Duis quis suscipit arcu. Ut eget volutpat metus. Vivamus eget turpis aliquam, luctus est vitae, porttitor
arcu. Nunc quis turpis id dui hendrerit convallis. Sed dictum pharetra est, eget malesuada ex vestibulum vel. Donec sit amet lacus a odio lobortis pretium sed ac ex. Suspendisse a scelerisque nisi, in convallis nibh. Ut ullamcorper, quam et
aliquet dictum, dolor urna auctor metus, in varius odio urna in lorem. Pellentesque in felis sollicitudin, fringilla libero non, feugiat magna.
</p>
<p>
Morbi consectetur ultricies nisl, ut commodo nunc. Vestibulum ultrices efficitur justo, vulputate fermentum risus vehicula id. Fusce in quam in elit ullamcorper convallis vitae et tellus. Maecenas at sollicitudin enim, nec iaculis enim. Phasellus tempus
eros vitae mi feugiat, sit amet euismod mauris pharetra. Nam condimentum in mauris sit amet commodo. Donec lacinia, lectus eget rhoncus rutrum, augue orci gravida nibh, ut bibendum felis orci non eros. Nam hendrerit, tellus vitae tempus elementum,
nibh urna ultrices neque, vitae tempor nulla risus quis enim. Suspendisse potenti. Cras convallis quis leo ac commodo. Donec eu nisi interdum, molestie urna eget, porta arcu. Quisque varius, nunc at consectetur vehicula, velit ligula tempor
dolor, vitae vulputate odio diam id odio.
</p>
<p>
Curabitur finibus odio erat, quis semper nibh tempor ut. Vestibulum congue id nibh sed rhoncus. Nulla eleifend lacus nisi. Aliquam in magna laoreet, ornare est faucibus, egestas quam. Fusce pretium mi non metus dapibus tempor a sed orci. Ut tempor nulla
dui. Aenean commodo nunc nulla, sed accumsan libero mattis eget. Nunc finibus facilisis egestas. Praesent arcu nulla, rutrum sit amet arcu sed, sodales sodales velit. Fusce et magna justo. Aliquam tortor purus, convallis eget tempus quis, venenatis
vitae turpis. Cras volutpat fringilla leo, nec blandit erat dapibus hendrerit. Curabitur tristique dolor non bibendum hendrerit.
</p>
<p>
Integer in justo ut lectus elementum tempor eget at tellus. Nunc pretium tincidunt enim, et consectetur sapien tincidunt a. Praesent sed fermentum odio. Integer pulvinar purus tortor, finibus maximus nunc efficitur vel. Suspendisse potenti. Praesent vel
arcu ut nisi laoreet ultricies. Nunc at molestie velit, a molestie elit. Quisque efficitur sed justo id imperdiet. Etiam pulvinar gravida purus ac pellentesque. Pellentesque a diam lorem.
</p>
<p>
In hac habitasse platea dictumst. Morbi porta leo quis nibh tristique malesuada. Nullam nisl urna, viverra vulputate ultricies quis, placerat eu urna. Nunc ac sollicitudin mi. Nam gravida orci id tortor finibus, nec varius enim luctus. Etiam neque ex,
condimentum a risus sit amet, convallis feugiat dui. Quisque gravida mauris sem, sed accumsan tellus volutpat vel. Fusce pellentesque porttitor interdum. In rutrum posuere risus at semper. Donec vel dui sed ipsum euismod vulputate.
</p>
<p>
Vestibulum vehicula nisi non urna blandit, non euismod tortor sagittis. Ut tincidunt iaculis bibendum. Vestibulum vel nulla nunc. Etiam lobortis orci non facilisis pellentesque. Praesent commodo mi eu egestas cursus. Integer tincidunt hendrerit magna,
vel convallis odio rhoncus facilisis. Praesent at posuere risus. Praesent massa orci, congue vel justo porttitor, blandit ullamcorper mi. Nulla eu laoreet dolor, vitae varius elit. Vivamus sagittis nisi dolor, tincidunt convallis quam eleifend
a.
</p>
<p>
Proin ligula leo, finibus eget hendrerit iaculis, lobortis sit amet urna. Aenean eget dignissim orci. Maecenas tincidunt, quam id laoreet hendrerit, lectus eros dapibus velit, sed pretium quam nisl quis urna. Ut vitae lorem sit amet augue elementum semper
vel at lorem. Vivamus vitae molestie ante. In suscipit posuere ullamcorper. Donec viverra congue mauris, at dignissim eros facilisis nec. Curabitur tristique velit id nulla malesuada, eu gravida est fringilla. Nullam feugiat scelerisque porta.
</p>
<p>
Nullam quis ullamcorper ante. Mauris non diam leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non semper elit. Cras sed elit elementum, vehicula velit volutpat, lobortis mi. Cras tincidunt consequat scelerisque. Sed accumsan dictum
ante, vel porttitor augue luctus quis. Donec risus justo, congue quis laoreet eu, finibus eu quam. Morbi in felis elit. Sed ac nulla gravida orci aliquam.
</p>
</div>
<div id="generated">Generated 18 paragraphs, 1471 words, 10000 bytes of Lorem Ipsum</div>
</div>
</div>
<hr>
<div class="boxed" style="overflow:visible !important;"><a style="text-decoration:none" href="mailto:help#lipsum.com">help#lipsum.com</a><br><a style="text-decoration:none" target="_blank" href="/privacy.pdf">Privacy Policy</a><a href="http://citenpl.internal.epo.org/wf/web/citenpl/citenpl.html?_url=https%3A//www.lipsum.com/privacy.pdf"
class="btncitenpl citenpl" name="MIKELink" title="Cite this document: https://www.lipsum.com/privacy.pdf">CiteNPL<span class="doc">DOCS</span></a></div>
</div>
I'm trying to make my first web page from memory after completing FCC HTML basics. Why do i keep getting warnings, saying (p element is not allowed here, same for b, head, and most other tags. I'm doing it exactly as ive been shown. This still displays, but the yellow on my Pycharm has me uneasy.
<!DOCTYPE html>
<html>
<head>
<title>This is my website</title>
</head>
<main>
<b>
<h1>This is my Header</h1>
<h2>This is where I describe my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros aliquet, convallis nulla vel, imperdiet mi. Fusce eu tellus nunc. Praesent consectetur in tortor nec eleifend. Nulla nisl neque, pretium sit amet faucibus sollicitudin, tincidunt et enim. Curabitur ipsum nisi, malesuada nec nisi eget, hendrerit ullamcorper ante. Sed pulvinar efficitur porttitor. Aliquam eleifend dapibus ipsum, dictum vestibulum lorem pellentesque eget. Aliquam efficitur nisl id sapien pulvinar interdum. Etiam molestie vulputate sapien a porttitor.
Nullam suscipit pellentesque augue. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur neque arcu, dignissim non massa in, pellentesque vehicula massa. Quisque imperdiet odio ligula, eu ornare diam blandit eu. Maecenas ac massa eu mi tempor mattis. Donec imperdiet eros justo, eu semper ex commodo sit amet. Quisque finibus velit vitae nibh consequat vulputate. Mauris venenatis egestas mauris sit amet viverra. Vestibulum venenatis iaculis lectus in placerat. Integer in ipsum nibh. Fusce vitae euismod dolor, a mollis lorem.
Maecenas feugiat accumsan ipsum, non lobortis arcu imperdiet id. Fusce pharetra dui et ultrices imperdiet. Nam sed ex ipsum. Cras at tellus lobortis, molestie leo et, pharetra neque. Nullam pharetra urna quis porta ullamcorper. Nam tempus nisl a arcu suscipit dignissim. Sed condimentum, orci ac dignissim pellentesque, nisi ante pulvinar nulla, non posuere elit ligula et erat. Maecenas eget est et arcu efficitur lacinia. Sed et nunc vel diam tincidunt laoreet. Sed ut lorem ac nulla ultrices porttitor ut vel est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu enim fringilla, vestibulum lectus vel, vestibulum erat. Vestibulum quis efficitur massa. Morbi ac turpis vestibulum, consectetur quam gravida, tincidunt leo. Vivamus molestie neque nec nibh ullamcorper aliquet. Pellentesque at nunc felis.</p>
</b>
</main>
<main></main> is not a supported HTML tag. It should be <body></body>.
update
You are about the “main” tag. However, I do see what may be your issue. It does not appear that your closes the “html” tag and you still need to add the “body” tags.
<!DOCTYPE html>
<html>
<head>
<title>This is my website</title>
</head>
<body>
<main>
<b>
<h1>This is my Header</h1>
<h2>This is where I describe my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros aliquet, convallis nulla vel, imperdiet mi. Fusce eu tellus nunc. Praesent consectetur in tortor nec eleifend. Nulla nisl neque, pretium sit amet faucibus sollicitudin, tincidunt et enim. Curabitur ipsum nisi, malesuada nec nisi eget, hendrerit ullamcorper ante. Sed pulvinar efficitur porttitor. Aliquam eleifend dapibus ipsum, dictum vestibulum lorem pellentesque eget. Aliquam efficitur nisl id sapien pulvinar interdum. Etiam molestie vulputate sapien a porttitor.
Nullam suscipit pellentesque augue. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur neque arcu, dignissim non massa in, pellentesque vehicula massa. Quisque imperdiet odio ligula, eu ornare diam blandit eu. Maecenas ac massa eu mi tempor mattis. Donec imperdiet eros justo, eu semper ex commodo sit amet. Quisque finibus velit vitae nibh consequat vulputate. Mauris venenatis egestas mauris sit amet viverra. Vestibulum venenatis iaculis lectus in placerat. Integer in ipsum nibh. Fusce vitae euismod dolor, a mollis lorem.
Maecenas feugiat accumsan ipsum, non lobortis arcu imperdiet id. Fusce pharetra dui et ultrices imperdiet. Nam sed ex ipsum. Cras at tellus lobortis, molestie leo et, pharetra neque. Nullam pharetra urna quis porta ullamcorper. Nam tempus nisl a arcu suscipit dignissim. Sed condimentum, orci ac dignissim pellentesque, nisi ante pulvinar nulla, non posuere elit ligula et erat. Maecenas eget est et arcu efficitur lacinia. Sed et nunc vel diam tincidunt laoreet. Sed ut lorem ac nulla ultrices porttitor ut vel est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu enim fringilla, vestibulum lectus vel, vestibulum erat. Vestibulum quis efficitur massa. Morbi ac turpis vestibulum, consectetur quam gravida, tincidunt leo. Vivamus molestie neque nec nibh ullamcorper aliquet. Pellentesque at nunc felis.</p>
</b>
</main>
</body>
</html>
I took this image from another post on here: https://i.imgur.com/cx3jXPu.jpg
I want the sidebar to have 100% height even when the sidebar items don't fit the height of the div
I've done float: left to the sidebar, so the content of the page that is more than the height of the sidebar is coming under the sidebar. Like this:https://imgur.com/a/7yyJU
So, basically, I want the sidebar to extend to the height of the page without having content underneath it if that makes sense.
Here is an approach, where you can just fix the sidebar to the window using the CSS property position:fixed, this will set its position relative to the browser window, by setting top:0px;bottom:0px;left:0px it will be sticking to the left window and it will be full height always. Then we need to add a margin of 210px to offset the content of the website so that it does not overlap the sidebar.
Note: I have used and additional CSS property called box-sizing: border-box, what this CSS property does is, it includes the border and padding of the element into the total height of the element, this is used because without it the border will cause a scrollbar when there is no content.
Let me know if the above code fixes your issue!
html,
body {
margin: 0px;
height: auto;
width: 100%;
}
.sidebar {
width: 200px;
float: left;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
box-sizing: border-box;
}
.content {
margin-left: 210px;
}
<div class="sidebar">this is the fixed sidebar</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus, pulvinar convallis ligula congue non.
Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis suscipit. Mauris sit amet ultrices
urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt ut quam ornare luctus. Suspendisse
sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque metus. In pulvinar, lacus in placerat
placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi non imperdiet. Integer dictum ipsum nec
nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel ligula consectetur eleifend. Proin non posuere
libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum sapien at imperdiet dictum. Phasellus congue
et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas eget convallis diam, non condimentum arcu.
Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus, ut mattis magna gravida. Aenean commodo
velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis sapien orci, eu mollis sapien sollicitudin
a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id tortor viverra, tristique massa non, consectetur
velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis nisl tincidunt et. Donec a neque scelerisque,
pellentesque dui sed, feugiat tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus,
pulvinar convallis ligula congue non. Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis
suscipit. Mauris sit amet ultrices urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt
ut quam ornare luctus. Suspendisse sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque
metus. In pulvinar, lacus in placerat placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi
non imperdiet. Integer dictum ipsum nec nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel
ligula consectetur eleifend. Proin non posuere libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum
sapien at imperdiet dictum. Phasellus congue et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas
eget convallis diam, non condimentum arcu. Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus,
ut mattis magna gravida. Aenean commodo velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis
sapien orci, eu mollis sapien sollicitudin a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id
tortor viverra, tristique massa non, consectetur velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis
nisl tincidunt et. Donec a neque scelerisque, pellentesque dui sed, feugiat tortor.
</div>
give both the div float left and specific width.
And give them min-height: 100vh
I've been trying to find a solution to this, but I dont know if maybe Im not wording it correctly because I can't seem to find an answer.
I have a page with a 'quick links' button which is designed to float against the right hand side of the screen while scrolling.
I have used the following to get the effect (the right attriubte is to hide the menu which shows when you click on the element.)
#quickLinks {
position: fixed;
display: block;
top: 50%;
z-index: 2;
right: -250px;
}
This is all working pretty fine, but I've found that im struggling to accomodate when a scroll bar is present or not.
So ive added a bit of 'padding' to the right attribute to stick out a little when there is a scroll bar (which my page generally has), but since there is no scroll bar visible on an ipad, for instance, there is that padded gap.
Ive noticed that using 'absolute' rather than fixed seems to get the hugging effect right, but then I lose the floating scroll.
Any ideas or suggestions would be greatly appreciated. :)
thanks!
This seems like you have some other conflict in your CSS causing the issue. You might want to post your CSS file to help debug. Doing a simple fiddle like this in all browsers produces the same result - the fixed div moves slightly to the left when a scroll bar is present. To see the difference, remove some of the Lorem Ipsum text.
.right {
background: blue;
padding: 20px;
position: fixed;
right: 0;
top: 100px
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
</div>
<div class="right">
I'm floating on the right!
</div>
https://jsfiddle.net/uy1tgdew/1/