This question already has answers here:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 6 years ago.
I've created a text, and added some left floated boxes to it. But for some reason, they behave differently. The first box breaks the line before it, but the second one doesn't. I don't understand, why. JSFiddle: https://jsfiddle.net/qt9q7dn4/
(thie green colored texts are the words after the red boxes)
CSS:
div {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 5px;
}
.after {
color: lime;
font-weight: bold;
}
HTML:
<p>Lorem
<div></div>
<span class="after">ipsum</span>
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis,
<div></div>
<span class="after">vitae
</span> facilisis nibh. Integer eu eros
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Move the divs outside the paragraphs and close the paragraphs.
<div></div>
<p>Lorem <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>
<div></div>
<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Fiddle
Related
I have an issue with css grid
<div class="container">
<div class="q1">
<h4>Short Text</h2>
</div>
<div class="a1">
<p>LONG TEXT</p>
</div>
</div>
The LONG TEXT is going outside the div, I would like to keep it inside (it doesn't matter the height of the column). My css is:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
So the idea is having 2 columns of the same width and with the height defined by the LONG TEXT in the second one. Now the text is going outside the container.
You did not close your first div. In the Short Text you opened h4 but closing tag is h2. Fix these typo first. Here is the working code below. I have added q1 and a1 classes to check whether the text is inside the div or not.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
.q1 {
background: gray;
}
.a1 {
background: darkgray;
}
<div class="container">
<div class="q1">
<h4>Short Text</h4>
</div>
<div class="a1">
<p>LONG TEXT dsfsdfsd sdf sdfsdf sdfs dsdf sdfsdf dsf sdfsdf sdfs dfsdfsdf s</p>
</div>
</div>
I have just copy/pasted your code here and fixed one <h4> tag and one <div> tag. The div problem was that your <div class="container"> had no </div> to match it. The "Short Text" <h4> tag had a closing tag, but it was of the wrong type (h2). It looked like: <h4>Short Text</h2> and I changed it to: <h4>Short Text</h4>.
Additionally, I supplied sample text in each section to show the long and short sections more clearly.
Other than that, the code in this snippet is identical to yours. I didn't do anything to the CSS, but it seems that even with long text and short text, nothing is overflowing the containing div.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: #ffe8d6;
filter: brightness(90%);
padding: 5px;
}
<div class="container">
<div class="q1">
<h4>Short Text</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Fames ac turpis egestas maecenas pharetra
convallis posuere. Quam nulla porttitor
massa id neque aliquam vestibulum morbi
blandit. Ligula ullamcorper malesuada proin
libero. Donec adipiscing tristique risus nec
feugiat.
</p>
</div>
<div class="a1">
<h4>Long Text</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Nec sagittis aliquam malesuada bibendum arcu
vitae elementum. Tempor nec feugiat nisl
pretium. Libero justo laoreet sit amet. Ut
ornare lectus sit amet est. Ipsum dolor sit
amet consectetur. Et netus et malesuada
fames ac turpis. Tellus rutrum tellus
pellentesque eu tincidunt tortor aliquam. Et
ultrices neque ornare aenean euismod
elementum. Eu ultrices vitae auctor eu augue
ut lectus arcu bibendum. Velit sed
ullamcorper morbi tincidunt ornare.
Pellentesque habitant morbi tristique
senectus et netus. Mattis molestie a iaculis
at erat pellentesque adipiscing commodo
elit. Sit amet purus gravida quis blandit
turpis cursus in hac. Eget duis at tellus at
urna condimentum. Nunc mattis enim ut tellus
elementum sagittis. Dignissim enim sit amet
venenatis urna. Mauris cursus mattis
molestie a iaculis at erat. Malesuada nunc
vel risus commodo viverra.
</p>
<p>
In metus vulputate eu scelerisque felis
imperdiet proin fermentum. Tellus id
interdum velit laoreet id donec. Cras
adipiscing enim eu turpis egestas. Eget
nullam non nisi est sit amet facilisis.
Tristique nulla aliquet enim tortor at
auctor. Eu non diam phasellus vestibulum
lorem sed risus. Odio aenean sed adipiscing
diam donec adipiscing tristique. Fermentum
et sollicitudin ac orci phasellus egestas.
Placerat orci nulla pellentesque dignissim
enim sit amet venenatis urna. Donec pretium
vulputate sapien nec sagittis aliquam
malesuada bibendum arcu. Diam vel quam
elementum pulvinar etiam non quam. Aliquam
sem et tortor consequat id porta nibh
venenatis. Hac habitasse platea dictumst
vestibulum rhoncus est. Amet consectetur
adipiscing elit pellentesque habitant morbi
tristique senectus. Urna molestie at
elementum eu. Donec et odio pellentesque
diam volutpat commodo. Nibh sed pulvinar
proin gravida hendrerit lectus a.
</p>
<p>
Amet consectetur adipiscing elit duis
tristique sollicitudin nibh sit. Risus at
ultrices mi tempus imperdiet nulla
malesuada. Et pharetra pharetra massa massa
ultricies mi. Quam nulla porttitor massa id
neque aliquam vestibulum. Donec ac odio
tempor orci dapibus ultrices in iaculis.
Pharetra vel turpis nunc eget lorem dolor
sed viverra ipsum. Arcu non sodales neque
sodales ut. Vitae nunc sed velit dignissim
sodales ut eu sem integer. Cursus risus at
ultrices mi tempus imperdiet. Enim neque
volutpat ac tincidunt vitae semper quis.
Rhoncus urna neque viverra justo. Mattis
rhoncus urna neque viverra justo nec
ultrices.
</p>
<p>
Pellentesque adipiscing commodo elit at
imperdiet. Donec ac odio tempor orci dapibus
ultrices in iaculis nunc. Lacus vestibulum
sed arcu non odio. Elit ullamcorper
dignissim cras tincidunt. Aliquet sagittis
id consectetur purus. Nunc sed velit
dignissim sodales. Amet mattis vulputate
enim nulla aliquet porttitor lacus luctus.
Donec enim diam vulputate ut pharetra sit
amet aliquam. Purus in massa tempor nec
feugiat nisl pretium. Lacus laoreet non
curabitur gravida arcu ac tortor dignissim
convallis. Turpis massa sed elementum tempus
egestas sed sed risus pretium. Ut enim
blandit volutpat maecenas volutpat blandit
aliquam etiam.
</p>
<p>
Fermentum odio eu feugiat pretium nibh ipsum
consequat nisl. Euismod elementum nisi quis
eleifend quam adipiscing vitae proin. Id
neque aliquam vestibulum morbi blandit
cursus risus at ultrices. Libero nunc
consequat interdum varius sit amet.
Facilisis volutpat est velit egestas dui.
Ornare suspendisse sed nisi lacus sed
viverra tellus in. Rhoncus est pellentesque
elit ullamcorper. Eleifend quam adipiscing
vitae proin sagittis nisl rhoncus mattis
rhoncus. Pharetra sit amet aliquam id diam
maecenas ultricies. Tincidunt nunc pulvinar
sapien et ligula ullamcorper. Sed risus
ultricies tristique nulla aliquet enim
tortor at. Erat pellentesque adipiscing
commodo elit at imperdiet dui accumsan sit.
Eget nunc scelerisque viverra mauris.
</p>
</div>
</div>
How can I make the green box anchor to the bottom of the yellow box and act as a single sticky element without surrounding them in a div?
I'm fighting some existing code and I cannot just surround them both in a sticky container.
Here's a code example where this is not happening: https://codepen.io/whole_kernel/pen/PoPzQqE
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
div.sticky-sibling {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: green;
padding: 10px;
padding-left 50px;
font-size: 20px;
}
</style>
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<div class="sticky-sibling">This one should be anchored to the bottom of the element above it</div>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. </p>```
You can do that with the help of JS in two ways:
Using jQuery you can move the two elements and wrap them with one
div that is fixed.
Using jQuery you can measure the height of the
first fixed div then give this value to be the top property for
the second one.
How would I prevent the line indent for the first paragraph in a section?
This is very common for many academic formats.
Sample Output
Introduction
For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.
For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.
For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.
Right now, I have the following code in my CSS
p {
text-indent: 50px;
}
You may want to use the css pseudo-class 'first-of-type'
p:first-of-type {
text-indent: 0;
}
As the css selector implies the styling will only apply to the first p element.
You can use CSS Adjacent sibling combinator like this:
p + p {
text-indent: 50px;
}
Run the code to see the result
p + p {
text-indent: 50px;
}
<h1>Introduction</h1>
<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>
You are correct, don't indent the first line of the first paragraph. To attract the eye, use an initial cap (increases readership around 15%).
However, in best-practices typography, you should only use one or the other: 1) a space between paragraphs (not a whole space, mind you) and no indent
OR 2) no space between paragraphs and but indent the first line.
* {
margin: 0;
padding: 0;
}
h3 {
font-family: Georgia;
font-size: 1.5rem;
line-height: 1.3rem;
font-weight: normal;
margin: 2.0rem 0;
}
p {
font-family: Georgia;
font-size: 1.0rem;
line-height: 1.3rem;
}
.space-noindent p {
margin-bottom: 0.8rem;
}
.nospace-indent p:nth-child(1n+2) {
text-indent: 1.5rem;
}
.space-noindent p:nth-of-type(1):first-letter{
font-size: 2.5rem;
}
<div class="space-noindent">
<h3>Space, no indent:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
<h3>No space, indent:</h3>
<div class="nospace-indent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
I'm trying to build a website template where the main #content div is 75% the width of the screen, and centered on the page, but I also want to occasionally have sections that span the full width of the viewport. The way I've accomplished this is by applying a class of .full-width on these sections that overrides the margins of the #content div by setting the width to 100vw, as well as some other properties that you can see in the CSS below.
The problem is that, when enough content is on the page that vertical scrollbars appear, the width of the scrollbars is included in the calculation of the viewport width, so content gets hidden behind the scrollbars.
Is there a way around this problem, or a completely different and better way to do what I'm trying to accomplish?
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
You can have the full-width by default and when for #content > p use width: 75% (Now you won't need to set vw, the width will auto-adjust)
Note that setting width 75% for the whole #content and then having full-width divs in between makes things needlessly complex - though hacky solutions using negative margins and positioning can be done.
See demo below:
#content > p{
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100%;
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use max-height:100%, which ofcourse works.
The problem is when I cannot use 100%, for example, in the given jsfiddle, I have an header which takes some x pixel height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.
JSFiddle - FUpsA
Edit:
I like to mention that the Header should not be a part of the scrolling content, hence using overflow:auto on the parent div is not an option.
According your reply on my comment i suggest to use css calc:
html
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div id="mainTextCont" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
css
#mainTextCont{
height: calc(100% - 75px);
}
fiddle
Please add overflow:hidden; to your parent div and for child div set height less than parent div ie height:210px
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000; overflow:hidden;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; height:210px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
Overflow is for the parent and describes how to wrap the child contents.
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;overflow:auto;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum...
</div>
</div>
Updated Answer:
add overflow:hidden; in parent div sorry I did not notice that you don't want to change height.. now its as per your requirement.
Like this:
<div style="width:300px;overflow:hidden; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.
</div>
</div>
One of my colleagues came up with a very interesting solution and I was simply amazed! The solution is compatible with IE 5.5+ and its purely CSS.
He used the property of containers with postion:relative which modifies the scope of their child elements with position:absolute. more information about that at css-tricks
This is a sample structure of the solution, refer the fiddle for more details
<div id='parent' style='position:relative'>
<div id='header' style='height:75px'>
<!-- Header -->
</div>
<div id='child' style='position:absolute; top:75px;bottom:0px; overflow:auto'>
<!-- Content-->
</div>
</div>
Note that the height is set only for the static content and not for the dynamic content
JSFiddle - FUpsA - Solution
The problem is that the header takes up space. When you combine the headers height with 100% of the parent (percentages are based on the parent element) it is going to be over 100% of course.
What you should do is make the headers height one percentage and the text part other percentage.
For example:
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div style="height: 20%;">
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:70%">
...
</div>
</div>