Please help me out here, I've created this jsfiddle to make it clear.
http://jsfiddle.net/yvesvanlaer/2r3Cp/
The first letter is also different in a deeper level
I only want it to be on the first P (not in the blockquote).
Thank you so much.
<div about="/news/lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" typeof="sioc:Item foaf:Document" class="ds-1col node node-news view-mode-full clearfix">
<div class="field field-name-title field-type-ds field-label-hidden">
<div class="field-items">
<div class="field-item even" property="dc:title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>
Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
</p>
<blockquote>
<p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</blockquote>
</div>
</div>
</div>
</div>
You need only the immediate descendant of .field-item, so add that in there with >:
.view-mode-full .field-name-body .field-item > p:first-child:first-letter {
float: left;
font-size: 36px;
line-height: 36px;
padding-right: 4px;
font-style: normal;
}
JSFiddle
Related
I'm trying to separate children of a container div into left/right columns, with no vertical whitespace below or above the children items.
I'll explain the setup and provide a picture of the desired result, and then I’ll explain every solution I’ve tried and why each solution doesn’t seem to work.
The Setup
I have a container with children <div>s that have a class of either .left or .right. Here's the code (I am bound to this HTML structure):
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
I need the children to display in two columns. If the child has class .left it goes in the left column. If it has .right it goes in the right column.
I need the children to fill up their respective column starting from the top, with no white-space above or below each child.
Each child's height is determined by its text contents, so I cannot set a fixed height for each child.
Here is the desired result (styling added for emphasis):
Desired Outcome Visual:
And a reminder, I'm bound by (1) the previous HTML structure and (2) height of child <div> cannot be fixed.
Here's what I've tried, along with why it didn't work:
Option 1: CSS Float
I set each child’s width to 50% and display to inline-block, and apply a float:left to the .left children and float: right to the .right children.
This almost works, except if the first two children have a .right class. You can see the second .right child floats to take up the remaining 50% left of the first .right child.
.container > div {color: white; border-bottom: 3px solid white;}
.container {
overflow: auto;
}
.col {
width: 50%;
}
.right {
background: #999;
float: right;
}
.left {
background: #000;
float: left;
}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Option 2: CSS-Grid
I apply some CSS grid options. After much research and trial and error, the closest I could come up with is this:
.container {
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: column;
}
.right {
background: #999;
grid-column-start: 2;
}
.left {
background: #000;
grid-column-start: 1;
}
.container > div {color: white; border-bottom: 3px solid white;}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Again, this comes very close and even solves the problem pointed out in option 1. BUT you’ll see when a .left child has a larger height than a .right child, it causes the .right child to add white-space to fill the row.
Option 3: Desandro Masonry
I tried the Desandro Masonry option, but the children are output in their static order, with no respect to left/right. And I’ve not found a clear option in the library that allows to tap into a class and assign it into a column based on .right or .left class.
var msnry = new Masonry( '.container', {
itemSelector: '.col',
});
.container {
display: grid;
}
.col {
width: 50%;
}
.container > div {color: white; border-bottom: 3px solid white;}
.right {
background: #999;
}
.left {
background: #000;
}
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Option 4: Flexbox
I tried a number of Flexbox combinations, and I couldn’t get any to work. My research suggests FlexBox wouldn’t do what I needed anyway. But maybe I’m missing something?
Option 5: CSS Column-Count property
Just for kicks, I messed around with the CSS Column-Count property, but there’s no way to assign children to a left/right column.
===
At this point I’m stuck. I’ve tried so many variations and read so many stacks today that my brain is pooped.
I would be very grateful for any ideas that will achieve the desired outcome. It's probably that I'm just missing something in one of the solutions I've already tried.
Thanks for your time!
If you are allowed to use a little JS (and I assume you are since one of your trials included a jquery library) you can calculate the vertical position of each element, position each element absolutely, and at the end set the height of container if its relative positioning is important.
let leftH = 0;
let rightH = 0;
const els = document.querySelectorAll('.container > *');
els.forEach(el => {
if (el.getAttribute('class').includes('left')) {
el.style.top = leftH + 'px';
leftH += el.offsetHeight;
} else {
el.style.top = rightH + 'px';
rightH += el.offsetHeight;
}
});
document.querySelector('.container').style.height = ((leftH > rightH) ? leftH : rightH) + 'px';
.container {
width: 100vw;
position relative;
}
.container>* {
width: 50%;
border: 1px solid;
position: absolute;
}
.right {
margin-left: 50%;
}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
I faced with a problem with the vertical cards position in accordance with the design (image attached). Firstly I tried position it with the flexbox property but seems it's not the right way because it is just move element to the next line in a "natural flow" but I don't need such behaviour. The most closest solution was to set column-count: 2 property to the news__items class in parent container but I can't control the order in this case. I feel like display: grid can help here but can't figure out how to implement it yet. Note: images have the same height and width.
Here is the html and css markup:
.news__items {
column-count: 2;
}
<div class="news__items">
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h2 class="news__primary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">MFF in the News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
</div>
What is the best approach to implement such grids?
Try this solution.
.news__items {
display: table;
}
.news__item {
width: 50%;
float: left;
}
I'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
I have standard 3 column layout with similar img in left and right column. When I resize page, right image becomes smaller but left not. And middle container overflow left image.
Css for image resizing:
img {
display: block;
max-width: 100%;
height: auto;
}
My full code is:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div style="position:fixed;">
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" /></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div style="position:fixed;">
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
But why?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.bg_img
{
background: url('https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png')no-repeat center center;
display: block;
width: 20px;
height: 20px;
background-size: contain;
float: left;
position: fixed;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div>
</div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove position:fixed style from the div.
I have tried your code and removed your img tag styles and replaced it with the default img-fluid class of bootstrap-4 and it's working fantastic.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
.sticky {
position: sticky;
position: -webkit-sticky !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
display: flex;
}
.stick_img{
position: sticky;
position: -webkit-sticky !important;
top: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col sticky">
<div>
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" class="img-fluid stick_img" /></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col sticky">
<div>
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" class="img-fluid stick_img" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this whole code, Hopefully it'll work
remove position:fixed; style for your code.
I was wondering; how can i display div's over an image slider. Right now the div falls behind the slider. Z-index is not helping and i also tried a position: absolute but that messes up even more. Here is my example: http://gelijkanders.com/nieuw/template-devotion/
HTML:
<div id="header">
<img src="assets/images/header1.png" />
<img src="assets/images/header2.png" />
</div>
<div class="wrapper">
<div class="container">
<div id="headlight-left">
<img src="assets/images/casablanca.png"/>
<h1>Casa Blanca</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
<a class="button" href="#">Lees meer</a>
</div>
<div id="headlight-center">
<img src="assets/images/sealicious.png"/>
<h1>Casa Blanca</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
<a class="button" href="#">Lees meer</a>
</div>
<div id="headlight-right">
<img src="assets/images/cielo.png"/>
<h1>Casa Blanca</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
<a class="button" href="#">Lees meer</a>
</div>
<div id="content">
<h1>We are W Travel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.</p>
</div>
and the css:
#header {
height:464px;
width:1920px;
position:relative;
overflow:hidden;
z-index:-99;
}
#headlight-left {
background:url(images/headlights-bg.png);
background-repeat:repeat-y;
width:289px;
height:464px;
float:left;
padding:15px;
position:relative;
margin-top:-138px;
z-index:99999;
}
#content {
width:648px;
padding:20px;
position:relative;
top:20px;
float:left;
display:block;
}
I hope this makes any sense and you are able the to see my problem because i know it's somehow possible. Anyway thanks in advance!!
I don't know if I understand, but if the problem is that the slider is over the container, the solution is simple, remove overflow:hidden; to .container{}
Is this what you are looking for
http://jsfiddle.net/cancerian73/zdBRk/
.container {
width:1024px;
margin:0 auto;
position:relative;
/*overflow:hidden;*/
padding:20px;
}
Do you want it to overlap or start after the jquery cycle banner?