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
Related
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>
I have an image I'm including in my page's footer. It is a small logo (using a placeholder iamge now). I'd like it to be halfway off of the bottom of the page so when you hover your mouse it peeks its head up all cute like. But I'm unable to style it to have it half off the bottom of the page, instead the full image is always visible, and all of the other contents on the webpage appear to be moving up and down when I hover instead. Hard to make out but this is what it looks like to go from having the mouse hovered, to not hovered:
1
2
Right now the styling on it is only:
position: relative; top:75px; left:2%
Is this what you need?
body{
padding: 0;
margin: 0;
}
.content{
width: 100vw;
max-width: 100%;
background: #4527a0;
height: auto;
position: relative;
text-align: center;
}
.inner_content{
max-width: 960px;
text-align: left;
display: inline-block;
height: auto;
color: white;
line-height: 16px;
}
.imagecontent{
position: absolute;
display: block;
z-index: 100;
margin: 0;
padding: 0;
left: 1%;
bottom:0%;
width:120px;
height: 170px;
background: #cddc39;
transform:translateY(85px);
transition:all 380ms;
margin-top: -170px;
}
.imagecontent:hover{
transform:translateY(0px);
}
footer{
width: 100%;
display: inline-block;
vertical-align: top;
background-color: #afb42b;
height: 200px;
position:relative;
overflow: hidden;
}
<div class="content">
<div class="inner_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla magna, ullamcorper eu metus quis, consequat facilisis nisi. Nullam rhoncus purus sed orci fermentum, et dictum dui consectetur. Duis imperdiet ultricies scelerisque. Aliquam erat volutpat. Praesent congue ex vel pulvinar porta. Fusce rutrum ut odio vitae placerat. Fusce lobortis nec tortor et egestas. Phasellus lorem ligula, finibus ut est eget, interdum interdum ipsum. Vestibulum sed facilisis ipsum, sed lacinia neque.
Suspendisse aliquam magna mauris, in tempus leo consequat in. Morbi blandit turpis nec enim vulputate elementum. Cras magna libero, sodales vitae odio quis, pretium tempus quam. Quisque at purus sed felis viverra scelerisque et sollicitudin turpis. Sed vitae arcu eu massa efficitur blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sed erat faucibus, lacinia tortor quis, rhoncus odio. Proin laoreet justo ac magna blandit, id sollicitudin orci pellentesque. Curabitur ac augue eu nulla lobortis tincidunt. Praesent sed sollicitudin orci. In feugiat, ligula posuere commodo maximus, orci nibh elementum ante, ullamcorper consequat diam justo et risus. Aliquam vitae ultrices leo, sed ultrices enim. Morbi quis aliquam est. Morbi in arcu nisl. Curabitur volutpat aliquam eros a tristique.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam nec ex arcu. Donec sit amet sodales dolor, vitae porttitor nibh. Phasellus mauris tellus, bibendum non scelerisque et, ultrices sed nunc. Morbi tempor neque a massa feugiat, non tristique urna feugiat. Sed at metus hendrerit, feugiat augue eu, pretium urna. Suspendisse ut luctus ex. Aliquam dapibus nisl quis mi porta cursus. Nam placerat lacus in eros auctor pharetra. Phasellus at pulvinar eros, viverra ullamcorper erat. Nullam ac quam erat. Vivamus neque dolor, pulvinar sed lacus id, bibendum varius mauris. Donec ornare dolor sagittis, lobortis erat in, ullamcorper sapien. Nam pellentesque consequat ante eu sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elit metus, dictum quis lectus et, hendrerit hendrerit felis.
Aliquam congue tortor quis enim porttitor, venenatis condimentum enim faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget facilisis ipsum, ut imperdiet metus. Praesent ornare lacinia eros, ut semper eros porttitor nec. Aenean condimentum egestas nisi ac placerat. Integer vulputate ultrices egestas. Donec maximus quam arcu, sed lobortis tellus consectetur id. Mauris accumsan libero eu diam interdum condimentum. Mauris cursus ligula in rutrum vestibulum. Donec sed varius eros, ut convallis dolor. Sed arcu sem, iaculis eleifend nunc sed, tincidunt hendrerit elit. Nullam sed imperdiet arcu. Nunc enim ante, pretium non eros id, porttitor vulputate sem. Nullam nec scelerisque sapien, id congue sapien. Ut pulvinar ac felis vitae lobortis. Aenean bibendum vulputate aliquam.
<footer>
<div class="imagecontent"> </div>
</footer>
</div>
</div>
I'm trying to lay out my site in this way:
The image div will contain a variable-sized image, and the image should be vertically and horizontally aligned. The text div will contain a lot of text.
This could easily be done with a table, but I'm trying to make this responsive so that once the site is too small horizontally that the textDiv will no longer float next to imageDiv and will then fall underneath.
The problem I'm having is that the the divs will just take up the required space of their content. How do I ensure that these two will remain the same size when they are floated next to each other?
Once the divs no longer float next to each other them being the same size wouldn't make sense anymore so that functionality would no longer be required.
I found Flex as a possible solution but it isn't well supported. I should mention that their widths will be set to a percentage of the parentDivs width.
You can achieve this using:
Absolute positioning with padding
Flex layout
.parentDiv {border: 4px solid black;}
.imageDiv {border: 4px solid tomato;}
.textDiv {border: 4px solid skyblue;}
.imageDiv img { max-width: 100%; }
#media (min-width: 768px) {
#first .imageDiv { width: 50%; max-width: 50%; box-sizing: border-box; }
#first .parentDiv { position: relative; min-height: 150px; }
#first .parentDiv > div { padding-left: 50%; }
#first .imageDiv { position: absolute; top: 0; left: 0; }
#second .parentDiv { display: flex; }
#second .imageDiv, #second .textDiv { flex-basis: 50%; }
}
<h2>Using absolute positioning and padding</h2>
<div id="first">
<div class="parentDiv"><div>
<div class="imageDiv">
<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.
Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.
Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.
Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.
Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus.
</div>
</div></div>
</div>
<h2>Using flex layout</h2>
<p><b>Firefox specific problem:</b> the width of the image interfere with <code>flex-basis</code> of <code>imageDiv</code>.
<br>Give the width of the image in percentage.</p>
<div id="second">
<div class="parentDiv">
<div class="imageDiv">
<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.
Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.
Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.
Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.
Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus.
</div>
</div>
</div>
The image div will contain a variable-sized image, and the image
should be vertically and horizontally aligned. The text div will
contain a lot of text.
This could easily be done with a table, but I'm trying to make this
responsive so that once the site is too small horizontally that the
textDiv will no longer float next to imageDiv and will then fall
underneath.
If it is easily done with a table layout for you, then just use a table layout. Make it responsive by adding an appropriate media query and change the layout. By table layout I mean display: table (not the table element).
It will be as easy as:
#parent { display: table; }
#parent > div { display: table-cell; width: 50%; vertical-align: middle; }
Do take care to have a max-width specified on the image to keep it within bounds:
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
The vertical-align and text-align will help you control the alignment of the image.
The problem I'm having is that the the divs will just take up the
required space of their content. How do I ensure that these two will
remain the same size when they are floated next to each other?
Fixing the width with the display: table-cell will take care of that.
Once the divs no longer float next to each other them being the same
size wouldn't make sense anymore so that functionality would no longer
be required.
Just add a media query for the break point that you need and simply reset the display back to block:
#media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#parent { border: 1px solid #00f; width: 75%; margin: 0 auto; display: table; }
#parent > div {
border: 1px solid #f00;
display: table-cell; width: 50%;
vertical-align: middle;
}
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
#media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
<div id="parent">
<div id="imgWrap">
<img src="//lorempixel.com/240/120" />
</div>
<div id="contentWrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat.
</p>
</div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/29vLq11o/3/
I'm not sure I completely understand your question, but you can set the width of each to 50% and then float them left. They will retain their size side-by-side until the screen becomes to small:
.image {
float:left;
width:50%;
}
.image img {
display:block;
max-width:100%;
}
.text {
float:left;
width:50%;
}
http://jsfiddle.net/rhn76m5z/3/
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 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.