screenshot of the problem
So I've have this irritating problem when smaller div doesn't follow the taller div. Is there a solution for this problem?
.right { float:right;}
.left { float: left; }
.row:after {
content:"";
display:block;
clear:both;
}
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
display:table-cell instead of float:
.right, .left { display:table-cell; border:1px solid; }
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
Related
Why do inline-block elements not align on vertical top itself? If I have same content in all the blocks it is good, but Ii reduce content in one, it loses it alignment. In the code - there are four divs with class para1 & css defined. 2nd, 3rd & 4th div are ok, but 1st is moved below, as content is less in it. I can get it ok with position or using float but need to understand why it is like this?
.para1 {
width: 24%;
height: 200px;
border: 2px solid red;
display: inline-block;
}
<div>
<div class="para1">
<p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor
luctus.</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
</div>
Because the default vertical alignment of inline elements is baseline. Change it to something like middle or top and they align as I think you'd want them to.
.para1 {
width: 24%;
height: 200px;
border: 2px solid red;
display: inline-block;
vertical-align: top;
}
<div>
<div class="para1">
<p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor
luctus.
</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
<div class="para1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>
</div>
</div>
I have created a couple of blocks with css and html here. It reveals some additional texts when hovering over the block.
My issues is that the first block in each row automatically scrolls on hover when it is partially displayed.
How can I fix this?
I forgot to say that I'm testing this on google chrome Version 66.0
Here is the css and html coding
ul.category-blocks {
display:block;
margin:0;
padding:0;
}
ul.category-blocks > li {
position:relative;
display:block;
list-style:none;
width:calc(33% - 10px);
padding:0 0 calc(33% - 10px) 0;
margin:0 5px 10px 5px;
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background-color:orange;
background-position:center;
background-size:100% 100%;
overflow:hidden;
border:1px solid #ff5601;
transition:background 0.3s ease-in-out;
}
ul.category-blocks > li:hover {
background-size:105% 105%;
}
ul.category-blocks > li > div {
position:absolute;
background:rgba(249,91,0,0.7);
color:#fff;
left:0;right:0;
bottom:0;
}
ul.category-blocks > li:hover > div {
transition:background 1s ease-in-out;
background:rgba(249,91,0,0.9);
}
ul.category-blocks > li > div > h2 {
text-align:center;
font-size:20px;
font-weight:700;
}
ul.category-blocks > li > div > p {
margin:0;
padding:0 10px;
max-height:0;
font-size:12px;
text-align:justify;
transition:all 0.5s ease-in-out;
}
ul.category-blocks > li:hover > div > p {
max-height:600px;
margin-bottom:20px;
}
ul.category-blocks > li > div > p a.shop-button {
display:block;
padding:5px 10px;
margin:10px auto 0 auto;
text-align:center;
width:100px;
border:1px solid #fff;
color:#fff;
}
ul.category-blocks > li > div > p a.shop-button:hover {
background:#fff;
color:#ff5601;
}
<ul class="category-blocks">
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
</ul>
<div style="clear:both;"></div>
Try this code
ul.category-blocks {
display:block;
margin:0;
padding:0;
}
ul.category-blocks > li {
position:relative;
list-style:none;
width:calc(33% - 10px);
padding:0 0 calc(33% - 10px) 0;
margin:0 5px 10px 5px;
float:left;
overflow:hidden;
border:1px solid #ff5601;
transition:500ms all;
background-color:orange;
}
ul.category-blocks > li > div {
position:absolute;
background:rgba(249,91,0,0.7);
color:#fff;
left:0;right:0;
bottom: 54px;
transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transition: 500ms all;
}
ul.category-blocks > li > div > h2 {
text-align:center;
font-size:20px;
font-weight:700;
}
ul.category-blocks > li > div > p {
margin:0;
padding:0 10px;
font-size:12px;
text-align:justify;
transition:500ms all;
}
ul.category-blocks > li:hover > div
{
transform: translateY(54px);
-webkit-transform: translateY(54px);
-moz-transform: translateY(54px);
-ms-transform: translateY(54px);
-o-transform: translateY(54px);
}
<ul class="category-blocks">
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
<li>
<div>
<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
</div>
</li>
</ul>
<div style="clear:both;"></div>
As you can see in this jsfiddle , I have a navbar and a sticky header per div. Now if i click on my anchors I get scrolled down to the right position, but the header overlaps the text of the div.
I want the header to be positioned above the div when scrolling down, this can be accomplished by setting
.header {
margin-bottom: 40px;
}
If I do that I get an offset, which I don't want at all, as you can see here:
Margin bottom
Is there any way to accomplish avoiding the overlapping and having no margin?
Thank you in advance!
I already tried offsetting it with adding padding-top to the anchor, as suggested in answers of this question, but this did not work either (still overlapping)
Check this snippet:
.navbar {
position: fixed;
height: 40px;
background: green;
top: 0;
width: 100%;
z-index: 5;
}
.nav_holder{
position:absolute;
top:40px;
}
.content {
margin-top: 60px;
}
.one, .two, .three {
height: 1000px;
padding-top:40px;
}
.header {
position: sticky;
top: 40px;
background: white;
}
<div class="navbar">
NAVBAR
</div>
<div class="content">
<div class="nav_holder">
one
two
three
</div>
<div id="one" class="header">
header one
</div>
<div class="one">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<div id="two" class="header">
header two
</div>
<div class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<br/>
<div id="three" class="header">
header three
</div>
<div class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
</div>
Hope it helps
My site works perfectly in Chrome in FF but IE is ignoring my Media Queries entirely and messing with my float: left elements. The elements are 9 images set up in table (but I'm using floats for responsiveness) of 3 rows and 3 columns. The first row shows up correctly but the second row is messed up, bumping the third photo onto its own row, like this:
PHOTO PHOTO PHOTO
PHOTO PHOTO
PHOTO
PHOTO PHOTO PHOTO
When it should be:
PHOTO PHOTO PHOTO
PHOTO PHOTO PHOTO
PHOTO PHOTO PHOTO
Again, this is ONLY happening in IE, I'm using IE 10 and 11 for testing.
Here's my css:
#teambiowrap
{
width: 100%;
clear: both;
}
#teambio
{
width: 28%;
float: left;
padding: 2.5%;
margin-bottom: 10px;
text-align: justify;
}
.bioimg
{
width: 99%;
max-width: 800px;
min-width: 100px;
}
#media screen and (max-width:800px) {
#teambio {
float: none;
width: 90%;
padding: 5%;
}
}
And HTML:
<div id="teambiowrap">
<h3>meet our team</h3>
<div id="teambio">
<img class="bioimg" src="Images/bioexample.png"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/chris.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/andy.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/tim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/dave.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/jim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/jess.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/amanda.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/victor.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
</div>
First of all, replace the #teambio with a .teambio class in your html and css. Then, repost your issue, if it still persists
<body>
<div class="teambiowrap">
<h3>meet our team</h3>
<div class="teambio">
<img class="bioimg" src="Images/bioexample.png"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/chris.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/andy.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/tim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/dave.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/jim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/jess.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/amanda.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="teambio">
<img class="bioimg" src="Images/victor.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div class="clear"></div>
</div>
</body>
<script type="text/javascript" src="js/respond.js"></script>
mediaqueries is not support same page IE browser. this time css extrenal file use but no change your css. Also, you should note that using respond.js could cause a delay in which you see the non-media query styles before the media query styles are parsed and applied. The recommendation is that you put respond.js in the header to avoid this as much as possible, although, it's also good to keep your js files in the footer so up to you.and use id replace in class.
respond js:https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2
http://pinterest.com/ have a intresting structures of blocks. How I can make the same?
Now I have this code:
li {
float:left;
margin-right:10px;
}
And I get this result:
http://imageshack.us/photo/my-images/339/49022374.png
But, I need this:
http://imageshack.us/photo/my-images/197/86816998.png
Why involving JS?
All you need is a number of floated column divs with inner divs
here is a simple fiddle
HTML
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velitmentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagitti
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis l
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ant
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis li
</div>
</div>
CSS
.col {
width:20%;
float:left;
}
.col div {
margin:10px;
padding:5px;
border:1px solid black;
}