I have a single page application, and don't want to have a global scrollbar on the page. Instead of that, I want to have a scrollbar on a specific element, like this:
In other words, I want element 3 to take all the available place, and if its too big, display a scrollbar on this element.
The solution I found is to set a max-height on element 3, computed in javascript as follows : window.height - element1.height - element2.height - element4.height.
The problem is that this becomes complex when the page contains a lot of elements.
Is there a way to do this in pure CSS?
Flexbox can do this easily. Need to tell the overall layout to stick to a certain height, achieved here with height: 100vh on the body. Then setting with the flex-shrink: 1 on the div you want to scroll will allow it to collapse and scroll.
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
.element {
flex-shrink: 0;
}
.element1 {
background: red;
height: 10vh;
}
.element2 {
background: blue;
height: 10vh;
}
.element3 {
background: yellow;
flex-shrink: 1; /* this one must shrink to allow an overflow to occur */
overflow-y: scroll; /* scroll on overflow */
}
.element4 {
background: green;
height: 20vh;
}
<body>
<div class="element element1">ELEMENT 1</div>
<div class="element element2">ELEMENT 2</div>
<div class="element element3">
ELEMENT 3
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor quis ipsum ac vestibulum. Integer porttitor ornare dui id accumsan. Ut viverra diam ac nibh luctus, sit amet lobortis diam lobortis. Donec aliquam dolor nec eleifend ultricies. Donec commodo, lacus et bibendum scelerisque, dui libero condimentum ante, iaculis consectetur nisl velit ut ligula. Maecenas nec mattis eros. Donec cursus augue eu erat pulvinar, a tempus justo rhoncus.</p>
<p>Aliquam id vestibulum elit, sit amet facilisis ex. Nulla pellentesque laoreet augue at fringilla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec imperdiet rhoncus augue quis condimentum. Donec sed neque mi. Maecenas eget sagittis dui. Morbi a finibus leo. Nam id laoreet dui. Pellentesque lectus lorem, ullamcorper vitae convallis vel, finibus ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam venenatis elit vel metus cursus malesuada nec vel velit. Donec ac placerat ipsum, aliquet gravida tortor. Nulla lobortis commodo pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Pellentesque sed neque vitae risus iaculis commodo. Integer vel posuere tortor. Mauris finibus ornare velit ut bibendum. Nunc a fermentum leo, sit amet sagittis libero. Sed rutrum neque eu turpis scelerisque malesuada. Sed accumsan, massa vitae pharetra eleifend, arcu dui dapibus enim, sed pellentesque quam sem eget augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="element element4">ELEMENT 4</div>
</body>
Related
I've been trying to style an absolutely-positioned, reactive modal window that can pop up with a potentially large amount of content.
However, I can't seem to get the content part of the modal window to become vertically scroll-able. I've played around with all sorts of div layouts and overflow CSS settings, but can't figure out a way to get the result I need.
Specifically, I need ONLY the "modal-content" div of the modal window to be vertically scroll-able, and for the scrollbar NOT to extend up into the "modal-head" div. The modal-content div should also take up all available vertical space, while modal-head only takes up however much space is necessary for the title and button.
JSFiddle:
https://jsfiddle.net/xe7p5uzv/12/
HTML:
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>
<div>
Regular page content here. Malesuada ac nam curabitur ullamcorper dictumst varius neque a curae est a sed odio in eu ullamcorper aliquet faucibus dis turpis eros in laoreet malesuada sit non vitae. Dis orci iaculis mauris penatibus a fringilla in dis diam habitasse pharetra scelerisque vehicula netus. Eu non nascetur enim litora sem ad suscipit vel enim ad non consequat adipiscing ultrices senectus a a sodales tellus pretium. A fermentum ullamcorper a proin vestibulum suspendisse sed a purus a vestibulum a nostra condimentum consectetur. Fames at at nam a ultrices parturient adipiscing mus pretium consequat ornare ultrices ullamcorper condimentum vestibulum vestibulum a augue vestibulum sem urna laoreet fringilla inceptos.
</div>
CSS:
html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
}
Any ideas on how to accomplish this?
html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
h1{font-size: 14px}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
display: flex;
flex-wrap: wrap;
overflow: hidden
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
height: 100px
}
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>
Trying to alter an image to display alongside another div containing text and have been at it for hours to no avail. The image is supposed to show in line with the other div but refuses to do so:
<div id="leftimg">
<img src ="SLL/student.jpg"/>
</div>
First attempt:
#leftimg {
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
}
Second attempt:
#leftimg {
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Third attempt:
#leftimg {
width: 500px;
height: 500px;
}
It looks like you're selecting the div element in your CSS, instead of the image. If you'd like to apply those rules to the image inside the div you'll need to follow the div's ID with img like this:
#leftimg img{
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
. . .
}
Here's a full example:
#leftimg img{
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
/* Added to make the text wrap around the image
feel free to ignore if that's not how you want
it to work */
float:left;
padding:10px;
}
/* Added to clear the float used above - if you leave
out my stuff above, then leave this out too */
#leftimg:after{
content:'';
clear:both;
}
<div>
<div id="leftimg">
<img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
</div>
<h3>Student Letting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
<p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>
But if you want to have multiple images inserted into a page with this style you really should use a class instead of an ID, like this:
.leftimg img{ /* Notice how we use the class selector instead */
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
/* Added to make the text wrap around the image
feel free to ignore if that's not how you want
it to work */
float:left;
padding:10px;
}
/* Added to clear the float used above - if you leave
out my stuff above, then leave this out too */
.leftimg:after{ /* And again here we use the class selector instead */
content:'';
clear:both;
}
<div>
<div class="leftimg"> <!-- Notice id is changed to class -->
<img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
</div>
<h3>Student Letting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
<p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>
Doing it with a CSS class would let you have several images on the same page using the same styling, without having to repeat your code. If you're only going to have one image it may be more beneficial to leave it as an ID though. It just depends on how you're going to be using this.
Give the image element an id and set the width/heigth of it:
HMTL:
<img id="img" src ="SLL/student.jpg"/>
And in your CSS File
#img{
width: 500px;
height: 500px;
}
Or set a background to the div
#leftimg {
background-image: url("SLL/student.jpg");
}
You can do it like this:
#leftimg img {
width: 500px;
height: 500px;
}
Try this
#leftimg img {
width: 500px;
height: 400px
}
If you want to change dimensions of your image, change to image itself, not the to image wrapper
try
img{
width:100%;
display: table-cell; /* to give the img full height */
}
I'm working on a page that has a header, 2 sidebars, a content area and a footer in the content area. Is it possible to keep the content area and footer inside the viewport so the only scrolling is the content area (with the footer fixed to the bottom) using flexbox.
Here's an example of what I'm trying to accomplish:
http://jsfiddle.net/5qqqfbnc/1/
Notice how the page scrolls. What I'm looking for is just the blue area scrolling (with the yellow footer always in view). I'd still like to maintain the window flexibility and hopefully accomplish this without javascript.
HTML:
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div class="left-sidebar">Left Sidebar</div>
<div class="center">
<div class="work-area">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id justo libero. Aenean est libero, venenatis vitae pulvinar nec, ultrices id nulla. Morbi ante turpis, faucibus id eros sed, pharetra efficitur eros. Etiam porttitor pretium tempus. Quisque ac tortor vitae risus tristique tempus quis id ante. Pellentesque maximus leo vel dolor dignissim tempus. Nam fringilla, augue a euismod aliquam, lorem velit placerat dui, non efficitur justo urna in ante. Aliquam vehicula vel sem sit amet feugiat. Proin ex leo, auctor ac elit in, malesuada vestibulum orci. Duis eget porta urna. Mauris lacinia vestibulum augue, non volutpat justo accumsan sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur malesuada quam nulla, et viverra orci luctus vel.</p>
<p>Donec ut sem sit amet lacus rhoncus pretium. Morbi varius sit amet lorem et tempus. Fusce ipsum neque, rhoncus nec urna sed, posuere faucibus urna. Donec sit amet placerat nunc, pretium facilisis mauris. Nulla facilisi. Sed id libero mi. Praesent in auctor nisi, id euismod dui. Proin suscipit lacus turpis, eu vulputate dolor condimentum sit amet. Mauris in accumsan lacus. Nunc a sem magna. Curabitur imperdiet magna tincidunt erat consequat scelerisque.</p>
<p>Ut ac dolor nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet turpis nisl. Mauris eget nulla at augue varius iaculis tincidunt id sem. Proin arcu nunc, vulputate eget sodales et, iaculis a quam. Morbi ex orci, commodo at posuere sed, facilisis eu purus. Nunc id neque nisi. In egestas nisl nec mi molestie tincidunt. Aliquam dictum, arcu et fringilla faucibus, ex nisi sollicitudin nisl, in egestas leo diam eu leo.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
<p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
<p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
</div>
<div class="settings">Settings Bar</div>
</div>
<div class="right-sidebar">Right Sidebar</div>
</div>
</div>
CSS:
body, html {
margin: 0;
width: 100%;
height: 100%;
display: flex;
}
div {
display: flex;
flex-grow: 1;
}
p {
margin: 0;
padding: 1em 0;
display: block;
color: #fff;
box-sizing: border-box;
}
.wrapper {
background: blue;
flex-grow: 1;
flex-direction: column;
}
.header {
background: red;
min-height: 50px;
flex-grow: 0;
width: 100%;
padding: 1em;
box-sizing: border-box;
}
.left-sidebar, .right-sidebar {
background: green;
width: 100px;
flex-grow: 0;
padding: 1em;
box-sizing: border-box;
}
.center {
flex-direction: column;
overflow: auto;
}
.settings {
background: yellow;
flex-grow: 0;
min-height: 30px;
padding: 1em;
box-sizing: border-box;
}
.work-area {
flex-direction: column;
}
Does this work? http://jsfiddle.net/amwill/5qqqfbnc/3/
Here's what I added:
body, html { overflow: hidden; }
.header {
position: absolute;
top: 0px;
}
.center {
position: relative;
top: 50px;
height: 100vh;
}
.settings {
position: fixed; //sticky footer
bottom: 0;
width: 80%; //whatever width it needs to be
}
I hope someone can help. I've set my body height property to 100% which is fine when all the content is on the screen at one time. However when i need to scroll (when minimizing the window) the body color disappears, leaving just the color i set for the HTML background.
Does anybody know a solution?
html {
background-color: #07ade0;
}
body {
background-color: #7968ae;
width: 900px;
margin-left: auto;
margin-right: auto;
font: 20px verdana, "sans serif", tahoma;
}
If your body is set to height: 100%, then it will be 100% of the window, which is not ideal since the background on longer pages will get cut off, as you mentioned. Take off the height property and you should be set.
You can also set height: 100% on both html, body and then create a container within your body. Then move your html styles to body, and your body styles to the new container.
This is preferred, since it is not generally considered best practice to set a pixel width on your body element.
HTML
<body>
<div id="container">Your well-endowed content goes here.</div>
</body>
CSS
html, body {
height: 100%;
}
body {
background: #07ade0;
}
#container {
background: #7968ae;
width: 900px;
margin-left: auto;
margin-right: auto;
font: 20px verdana, "sans serif", tahoma;
overflow: hidden;
}
See DEMO.
Try changing height to min-height on your body element. This will make the body element to be 100% is the content is too short to fill the whole thing, and grow when the content is larger than the browser.
The accepted answer does not solve the issue when there is no content on the page then the column will not be visible at all.
The solution that finally worked is introduction of a wrapper and adding display: table;
My solution not only covers the column with background color when there IS a content, but also when there is none.
http://jsfiddle.net/h83gtmbc/6/
html, body {
height: 100%;
}
body {
background: #07ade0;
padding: 0;
margin: 0;
}
#wrapper {
height: 100%;
}
#container {
background: #7968ae;
width: 900px;
margin-left: auto;
margin-right: auto;
font: 20px verdana, "sans serif", tahoma;
overflow: hidden;
height: 100%;
display: table;
}
<div id="wrapper">
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam malesuada lectus in ornare. Nam et turpis magna, eget hendrerit nisi. Sed tincidunt felis pulvinar neque hendrerit eu sollicitudin nulla iaculis. Praesent convallis mattis magna, et tempor sapien euismod molestie. Praesent metus nisl, varius in vulputate vel, vestibulum at eros. In hac habitasse platea dictumst. Vivamus vitae turpis lectus. Praesent at tortor sit amet est lacinia porta. Duis sit amet nunc sem. Nam vel sapien a ligula vulputate sollicitudin sed at eros. Nam non urna felis. Ut quis euismod ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam felis lectus, vestibulum et fringilla in, elementum ut libero. Integer rutrum nibh a nulla pulvinar nec fermentum justo dapibus.
Integer ut massa ut diam accumsan pulvinar vitae ut metus. Nullam consectetur porttitor nunc, ac malesuada erat rhoncus a. Morbi laoreet vehicula lacinia. Aliquam pellentesque lacus non tellus fringilla at condimentum est condimentum. Sed consequat venenatis dui id egestas. Aliquam suscipit cursus odio non dictum. Mauris ipsum sapien, luctus quis pretium ac, suscipit sit amet neque. Mauris iaculis rutrum dui in lobortis.
Donec sem enim, tempor non cursus at, aliquam pretium ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in suscipit neque. Vivamus ac augue pulvinar augue condimentum iaculis. Quisque vel augue dolor. Mauris sollicitudin porttitor tristique. Duis consectetur volutpat egestas. Donec quis tortor justo, ac accumsan ligula. Morbi sit amet magna diam. Mauris lectus ante, cursus nec bibendum ac, mattis ultricies nulla. Aliquam dui odio, elementum quis faucibus ac, tristique vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Pellentesque velit velit, dapibus imperdiet ullamcorper in, dapibus sed libero. Cras dapibus, dui in tincidunt feugiat, lacus tellus suscipit urna, nec fermentum ipsum massa eu quam. Sed nisl quam, dictum eget tempus id, ullamcorper quis libero. Suspendisse rutrum pretium tellus ac semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque imperdiet dui quis dui euismod aliquet. Etiam sit amet semper dolor. Donec et mattis tellus. Proin ac mi risus. Aenean sit amet nunc scelerisque neque egestas adipiscing non eu diam.
Quisque feugiat scelerisque commodo. Sed tellus nulla, fermentum a rutrum ut, vulputate et turpis. Proin at libero quis metus pellentesque dapibus. Proin nec pretium orci. Pellentesque bibendum mollis lacus vel faucibus. Integer malesuada, dolor quis iaculis laoreet, velit mi mattis turpis, vestibulum lacinia augue felis ac erat. Etiam tristique turpis sit amet nibh adipiscing vel bibendum metus vulputate. Integer mattis nulla metus, vitae viverra nisl.</div>
</div>
see that when you remove the contents - the column still stretching full-height
I have a two column layout (using the CSS multi-column layout module) and I'd like to have an image at the top of the second column. It seems like I have to place the image myself so that it's in the place in the text where the break will be.
The problem is I want the columns to be evenly filled as well.
Is there any way to solve this without JavaScript? This uses a div instead of an image but the idea is to place the red block at the top of its column.
.col-2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
width:800px;
}
.block {
width:100%;
height:100px;
background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.
Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.
Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
<div class="block"></div>
</div>
The CSS3 spec has a "column-break" style, but it has only been implemented in Webkit. It would do exactly what you are looking for, but only in Safari and Chrome sadly.
You would need to have your column breaking element fall within the normal flow of your content, and add the following style:
div.block {
width: 100px; /* this shouldn't be more than your column width */
height: 100px;
-webkit-column-break-before: always;
}
Example (View in Safari/Chrome)
http://css-infos.net/property/-webkit-column-break-before
http://www.w3.org/TR/css3-multicol/#column-breaks
You can wrap the two divs in another div and have the .block div before the .col-2 div in your markup.
Example for you here.
If I understand what you are trying to do (make the div or image span the full with of all the columns) the way to do this with CSS is to specify column-span: all; on the element (img or div) you want to span across the full width. This is currently only supported in Opera however, and only in an internal build (hopefully we will have a public release with it included soon).
Without using column-span you will have to rely on script or move the mark up to be outside of the element you apply column-count on.