I've been trying to make a website with an image and a div next to each other, and make them responsive so it goes under the div when the screen size changes. It's been working so far, but whenever the image goes under the div, the size changes drastically and gets really weird.
Here's the code used
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size:contain;
position: relative;
max-width: 100%;
}
.menuBar{
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color:rgba(230,199,177,255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size:contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<body>
<div class = "top-container"></div>
<div class = "menuBar" id = "menuBar"> MenuBar</div>
<div class = "mainContent">
<div class="flex-container">
<div class = "flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum.
Vestibulum sodales mauris ut tempor posuere. Nulla orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi. Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue.
Quisque rutrum laoreet urna eget posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem id metus auctor, sit amet ullamcorper mauris fringilla.
In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit.
</h3>
</div>
<div class = "flex2">2</div>
</div>
</body>
<script src="index.js"></script>
<!-- rgb(255, 209, 218); -->
Define a height or min-height to the image container. I also used flex instead of width to have a better result on wrap
body {
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.top-container {
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > * {
flex:300px; /* added this */
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
min-height: 300px; /* added this */
margin: 10px;
text-align: center;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
the problem is the height of your element,
by default all html elements get height:auto; and it means take as much as your children need
so your second box has nothing but a '2' inside of it, that's why it only gets 18px height!
if this is true, then how it is working fine on wider devices?
That's flexbox's magic!
by default the align-items property of flex has stretch value, which means if the flex item has no explicit height, it should stretch and fill the parent's height, your first item has some text in it, right? so first item grows as much as necessary for his text and this causes your flexbox to grow up and wrap the children inside of it and align-items property forces your second box to grow and get the height, so it will get enough height to be visible on larger devices...
how to fix this??
you can use min-height or max-height or both!
or
you can use #media for smaller devices and set height for your second element to make it bigger
or
you can use an img tag instead of background and set specific height for it and use object-fit to maintain your image's aspect ratio
or
you can use padding or <br /> to make your second division big enough to make it's background visible
currently these are all options I can think of, if any better solution came to my mind, I'll let you know
Related
I have a flex child, inside a scrollable flex column. I want it to set its width to 100% of the scrollable flex column's parent.
It's because I want to have a notifications bar, and it automatically opens if a new notification arrives, and currently the contents of the scrollable flex are jumping around (every item is flex).
Let me demonstrate:
div {
display: flex;
}
.row {
flex-direction: row;
}
.col {
flex-direction: column;
}
.target-width {
height: 100%;
width: 500px;
height: 500px;
}
.scrollable {
overflow: scroll;
height: 100%;
flex: 1;
}
.content {
background: yellow;
width: 100%;
height: 100%;
}
.notifications {
background: blue;
height: 100%;
flex-basis: 200px;
}
<div class='row target-width'>
<div class='col scrollable'>
<div class='col content'>content</div>
</div>
<div class='col notifications'></div>
</div>
At the above example I would expect content to have width of 500px, even though its direct parent scrollable has a width of 300px.
Let's assume that every width, and height is unknown, the above are just for demonstration. So all we know is we want to set content's width as width of target-width. Not knowing exactly the width of target-width, is there a way to make that work?
I think I understand your need and I'm not really sure if it can be done only with css.
Here is a JS code that can solve your problem. Please keep in mind that my solution maybe is not the best one, but I think It's a starting point.
Put this code into Head:
<script type="text/javascript">
function setContentWidth() {
var elementTW = document.querySelector('.target-width');
var styleTW = window.getComputedStyle(elementTW);
var widthTW = styleTW.width;
document.querySelector(".content").setAttribute("style","width:" + parseInt(widthTW) +"px" );
}
window.onload = setContentWidth;
</script>
Edited my answer to fit the question. Now content receive the parent width.
Tell me if this solve your problem or you need further assistance.
I am not sure if it is the solution to what you are looking for. I have applied some changes to the code to reproduce what I think I understand you want to achieve. Could you review it and tell me if it is the result you are looking for?
div {
display: flex;
box-sizing: border-box;
}
.row {
flex-direction: row;
}
.col {
flex-direction: column;
}
.target-width {
/*width:500px;*/
width: 100%;
height: 100vh;
position:relative;
}
.scrollable {
overflow-y:hidden;
overflow-x: auto;
height: 100%;
width:100%;
flex: 1;
}
.content {
background: yellow;
width: 100vw;
height: 100%;
}
.notifications {
background: blue;
opacity:.5;
height: 100vh;
width: 100px;
position:absolute;
z-index:1;
right:0;
}
<div class='row target-width'>
<div class='col scrollable'>
<div class='col content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam quis erat ut rhoncus. Nunc non sollicitudin eros. Vivamus sollicitudin, orci vitae congue rutrum, lacus nulla blandit dolor, nec egestas est est eu est. Donec mi metus, tempor quis ante quis, viverra ornare nulla. Aliquam fringilla pharetra nisi, ac bibendum tortor rhoncus auctor. Sed quam elit, finibus vel dignissim rhoncus, viverra ut risus. Sed placerat, massa et vehicula feugiat, ex augue pulvinar tortor, eget sodales sem libero non metus. Fusce laoreet sollicitudin erat a posuere. Mauris at sem metus. Sed posuere quam bibendum malesuada auctor. Ut pulvinar eros quis massa molestie, sed tempus urna ultrices. Vivamus arcu turpis, porta ut vehicula at, dapibus vitae massa.
Nulla facilisi. Curabitur a dignissim purus. Morbi rhoncus sit amet mauris sed viverra. Sed eget justo eget dui commodo vehicula. Pellentesque convallis ultricies quam, ac maximus purus mollis vitae. Nam ut erat erat. Ut ultrices quam magna, vel efficitur massa finibus nec. Maecenas turpis tellus, tempus ut iaculis quis, elementum rhoncus nunc. Quisque egestas condimentum nunc, non feugiat erat malesuada eu. Donec in justo ullamcorper, molestie justo ac, elementum leo. Morbi ultricies et sapien sit amet bibendum. Sed ornare eget lectus vel tempor. Suspendisse sodales ipsum in tincidunt dictum. Duis placerat ligula ac sem imperdiet sollicitudin.
Pellentesque ex risus, rutrum vel mi sed, egestas faucibus nisl. Mauris rutrum sem justo, eget posuere neque aliquam non. Sed molestie neque mauris, quis gravida turpis rutrum eget. Duis eu mauris vitae arcu suscipit sagittis. Duis aliquam tortor quis massa placerat vestibulum. Fusce eu purus non eros ornare aliquam a accumsan turpis. Maecenas eu nunc dignissim, ornare diam et, malesuada est.
Donec eu commodo libero. Donec fermentum metus in quam lobortis, ut eleifend felis posuere. Donec sed leo malesuada, viverra tellus sit amet, egestas leo. Cras tempus, ex et tincidunt varius, magna mauris dignissim ex, in mattis dui erat eu arcu. Praesent tristique faucibus massa eget malesuada. Aliquam vitae enim quam. Phasellus maximus ullamcorper leo, auctor luctus ipsum volutpat quis. Ut nec neque non felis bibendum ultricies. Cras leo odio, condimentum et eros at, feugiat lacinia sem. Sed odio sem, lobortis sed enim vitae, bibendum faucibus velit. Ut eget diam consequat, imperdiet sem at, hendrerit ligula. Mauris egestas consequat magna, gravida fermentum leo malesuada pellentesque. Sed non pellentesque purus, at congue arcu.<br/></div>
</div>
<div class='col notifications'>
</div>
</div>
I've been trying to get a background picture to actually be in the back and not in the front.
I've tried with z-index, positioning en making divs in divs. But nothing really worked out.
The Screenshot of the issue.:
https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b
The above picture needs to be in the background so the box thing can go up in front.
The HTML code:
<div id="image">
<img src="DSC_0043.png" width="800" height="800">
<div id="content">
<div id="tabbox">-
<div class="tab">
Here follows like the actual content, which you of course don't need to know. it's just a bunch of text etc.
The CSS code:
#image{
position: relative;
z-index: 2;
}
#content{
width: 75%;
background-color: black;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}
Using pure CSS, you can implement a background image even without a separate img tag.
Try using background-image:
#content {
/* Your CSS here... */
background-image: url("DSC_0043.png"),
}
EDIT:
If you want to repeat that image, you can specify background-repeat:
#content {
background-image: url("DSC_0043.png"),
background-repeat: repeat, /* Put no-repeat for non-repeating image */
}
if you want that image goes behind everything else, you should try with background-size: cover;
I didn't understand your problem very well, I hope that this will help you.
A slight rework of your code, you can accomplish this with css.
I used an image from google to show this but to explain I have two divs nested.
The parent div content sets the background image and adjusts the positioning of itself.
The child div box has the text and it's own width and height.
The css background-image: url ("path/to/image") and background-repeat: no-repeat make this possible. Feel free to manipulate the example I gave to add to your understanding.
#content {
width: 100%;
height: 100%;
background-image: url('https://images-na.ssl-images-amazon.com/images/I/61xo5qJF0nL._SY355_.jpg');
background-repeat: no-repeat;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}
#box{
width: 350px;
height: 150px;
color: purple;
}
<div id="content">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan turpis diam, non dictum dui mollis eu. Aliquam erat volutpat. Phasellus faucibus bibendum felis a posuere. Maecenas sit amet neque a sem mattis ornare sed vel mauris. Mauris vel semper nisl. Aliquam erat volutpat. Suspendisse potenti. Proin vulputate bibendum nulla, sit amet placerat arcu viverra in. Duis ultricies risus quis venenatis hendrerit. Sed elit lorem, suscipit at odio in, mollis dignissim dolor. Nulla a sem nec dolor consequat sodales. Nullam risus velit, venenatis nec quam in, tincidunt maximus velit. Cras lacus ex, pellentesque vel sapien quis, condimentum vulputate sapien. Maecenas at pellentesque lacus. Mauris ac ligula quam. Integer leo est, vulputate sed pulvinar ut, consequat vel risus.
Phasellus lectus neque, rutrum sit amet nisi eget, imperdiet scelerisque mauris. Nam elementum pretium sem ut sollicitudin. Cras in finibus eros. Aliquam sit amet metus vitae tellus vehicula pretium. Etiam vestibulum congue luctus. In quis auctor mi, sit amet tempor metus. Sed ex massa, porta a magna et, molestie vestibulum ipsum.
Sed congue, ligula non fringilla scelerisque, risus massa fermentum tortor, ornare feugiat justo massa molestie nisi. Ut id efficitur lacus. Duis ullamcorper mi nec tristique fermentum. Donec pellentesque vel massa et commodo. Integer semper gravida vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at urna hendrerit, blandit ligula nec, dapibus erat. Aliquam ullamcorper orci nec quam euismod, sed mollis purus volutpat.
Proin at velit ut nunc mattis sodales a id ante. Aliquam a lacinia odio. Vivamus vel vulputate magna. Duis iaculis scelerisque tincidunt. Sed cursus leo vitae libero efficitur venenatis. Fusce suscipit dui nibh, nec tristique sem sodales ut. Quisque ac blandit lorem, pretium ullamcorper orci. Vivamus posuere ligula neque, at laoreet nibh semper consectetur. Duis suscipit sollicitudin quam sed volutpat. Proin tellus neque, porta id rutrum nec, posuere at nibh. Fusce venenatis efficitur metus, quis feugiat metus imperdiet et.
Sed aliquam viverra finibus. Vestibulum gravida a tortor et tempus. Aliquam at tortor purus. Maecenas malesuada magna justo. Aenean elementum sagittis aliquam. Donec lobortis id orci id pharetra. In non purus vitae erat fermentum condimentum non nec metus.</div>
</div>
I am trying to do a sticky header with position: sticky style.
The problem with position sticky is it wont work, if the parent container has some overflow set. But, in my case, I have a horizontal scroll. Since, I am putting a scroll for parent container ( overflow-x), the sticky is not working.
JSBin Link
.sticky {
position: sticky;
top: 10px;
z-index: 1;
}
In the example given you can see that, first block sticky is not working (because I have set overflow-x). But, it is working for the second item.
So, my question is how to make position sticky work with overflow-x set for parent.
as you probably know, setting position:sticky;top:10px on an element means that at first it is considered with position:relative and then after 10px with position:fixed ;
you need to set a height for the scrollable content. at least this is the only solution i know when you want position:sticky to work with overflow
hope it helps
OBS : check it in Firefox because in Chrome it doesn't work ( position:sticky -> This is an experimental API that should not be used in production code. i suggest you find another solution. like position:fixed and use JQ to position the headers relative to their containers )
html, body {
overflow: initial;
background: none;
}
body {
box-sizing: border-box;
margin: 0 150px;
font-family: 'Source Sans Pro', sans-serif;
}
.sticky {
position:sticky;
top: 10px;
z-index: 1;
}
[data-lorem] {
margin-top: 2em;
line-height: 1.5;
text-align: justify;
background: #eee;
border-radius: 5px;
padding: 15px;
}
[data-lorem] .sticky {
background: #3A5E8C;
padding: 15px 10px;
color: white;
border-radius: 5px;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
[data-lorem] h2 {
float: left;
margin: 0;
}
[data-lorem] img {
float: right;
margin-top: 5px;
}
.nosupport {
color: darkred;
font-weight: bold;
display: none;
text-align: center;
}
<div data-lorem="p" style="
overflow-x: scroll;height:80vh;
">
<div class="content_area" style="
width: 1000px;
">
<span class="sticky"><h2>No</h2><img src="http://www.html5rocks.com/static/images/share.png" title="Just an example"></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div></div>
<div data-lorem="p">
<span class="sticky"><h2>JavaScript</h2></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div>
I have been given the following markup that cannot change.
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
So the goal is to get the html to render as per the following snippet:
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
}
.container > .description {
max-width: 100%;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}
<div class="container">
<h3>Some Header the is in the wrong place</h3>
<div class="image">
<img src="some image"/>
</div>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Note in the above snippet I have moved the <h3> tag to the top inside the container and everything is fine and dandy. However I cannot change this in my scenario.
I can use jQuery/JavaScript to do it, but I really don't want to, and would like to use CSS only.
I have tried using a flexbox approach to get it to re order but then I cannot get the text to wrap around the bottom of the image, e.g.
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
order: 4;
}
.container > .specials-info {
order: 2;
}
.container > .description {
max-width: 60%;
text-align: left;
order: 3;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
order: 1;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
In summary is there a way to achieve Snippet 1 with out altering the original HTML and without using JavaScript?
Edit 1
Just to clarify a bit in the image below on the left is Snippet 1. It is what I want to end up with (but the markup is different in that the <h3> tag is higher). On the right is Snippet 2, as close as I can get without editing the markup (which I cannot do) / using JavaScript (I can do but would rather use CSS only).
Note that I have used a flexbox to reorder the items, but at that point I cannot use a float on the image container.
Edit 2
A bit more clarification(apologies)
The header(h3) must sit at the top and take 100% of the width. (no wrapping by just padding the image down).
The Image will be 45% of the width but will change in height depending on diffent use cases.
The Content of description will be x no of p tags with varying content.
You can achieve this pretty easily with just using the float property on the image container and some margin-top. I won't go through line-by-line with what CSS properties I've changed, but here is a JSFiddle that doesn't change your HTML and achieves the layout you want. It has the added benefit of far fewer lines of CSS than using flex.
Note: Since I don't know what size your image actually is, I chose an explicit size based on your what your image looked like.
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container .image {
margin-top: 70px;
}
.container > .image {
float: right;
width: 300px; /* just an example size */
height: 150px; /* just an example size */
background: grey; /* This is just to show you where the image would be */
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
font-weight: 600;
font-size: 20px;
white-space: nowrap;
}
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Used some CSS hacks to achieve the first layout in Flexbox.
Flexbox does not allow wrapping of text around the images, since it takes its own row or column.
Give the parent container position: relative and the child item image position: absolute and align with the top and left values.
You can adjust the width from the 2nd paragraph to last to occupy 100% width.
.container {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
display: flex;
flex-flow: row wrap;
max-width: 700px;
padding: 15px;
position: relative;
text-align: left;
}
.container > .image {
max-width: 40%;
min-height: 100px;
min-width: 40%;
order: 4;
position: absolute;
right: 0;
top: 100px;
}
.container > .specials-info {
order: 2;
}
.container > .description {
order: 3;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
font-size: 20px;
font-weight: 600;
order: 1;
text-align: left;
width: 100%;
}
.container > hr {
display: none;
}
.container > .image > img {
max-width: 100%;
object-fit: cover;
object-position: center center;
}
.description > p:not(:first-child) {
width: 100%;
}
.description > p:first-child {
max-width: 60%;
}
<div class="container">
<div class="image">
<img src="http://placehold.it/200x200" />
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Use this margin-top for .image class in snippet1
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
margin-top:72px;
}
So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a JSFiddle.
HTML
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">
Lorem ipsum dolor sit amet.
</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.collapse {
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
left: 0;
right: 0;
z-index: -9999;
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
z-index: 9999;
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.
The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
The z-index in content doesn't work, because content isn't positioned.
Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.
All these problems need to be solved before the page looks like you want.
In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.
body,
h1,
p {
margin: 0
}
.nav {
margin-bottom: 20px;
margin-left: 0;
background-color: #fff;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0px 5px 5px #888888;
border-top: 1px solid #ccccff;
z-index:2; /* added */
}
.collapse {
background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
top: 60px; /* added */
left: 0;
right: 0;
z-index: 0; /* changed */
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
position: relative; /* added */
top: 460px; /* added */
z-index: 1; /* changed */
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
<!-- Navigation -->
<div class="nav">
This is the nav bar
</div>
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
</div>
</div>