I've built a gallery layout. Each <div class="gallery"> section fills the viewport. Here's how it looks without a sticky header. The layout works as expected using this method.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
Next, I've added a sticky header, like so.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
header {
position: sticky;
top: 0;
}
.gallery {
display: flex;
height: calc(100vh - 120px);
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
To account for the sticky header, I've added height: calc(100vh - 120px); to .gallery. This works for the first .gallery parent, but something funky is happening with the last parent .gallery. As you can see, the footer overlaps.
EDIT
If you inspect <figure> on the sticky header example, you'll notice that it's correctly calculating the height. For example, at a resolution of 1366x768, the height of <figure> measures 648px in height (768px - 120px). However, the <a> and <img> elements show a height of 768px.
How can I fix this?
As per my edit, the problem lies with the the <a> and <img> elements not being contained with the <figure> element. I've resolved this by adding height: 100%; to .gallery figure a and .gallery figure img.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
img {
height: auto;
max-width: 100%;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure a,
.gallery figure img {
display: block;
height: 100%; /* Fills the height of <figure> */
}
.gallery figure img {
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
Related
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 1 year ago.
So am new to learning/using the "display: flex" property.
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
Here are 4 boxes of a certain size but if I insert one more, the size gets smaller as it tries to fit the 5th box in the same line, how to get the 5th box in the next line?
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
I want the images to automatically go on to the next line when it reaches the end of the main container, I have tried reducing the width as well, it didn't work.
It's probably something very simple but I can't really seem to find the way, also am not fully accustomed with all the flexbox properties
change width of .imagebox {} accordingly
*{
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.imagebox {
position: relative;
margin: 15px;
width: 20%;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
You can use the flex-wrap property:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
Flexbox doesn't play nicely with absolutely-positioned children. By taking the images out of the normal flow, they no longer take part in the flexbox calculations. The remaining imagebox element is not wide enough to trigger wrapping.
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.imagebox {
flex: 0 0 calc((100% - 45px) / 4);
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
I'm trying to have 3 figures side by side, each containing an image (that has a link in it), and a caption that's centered on the top of the image.
So far, I've got this:
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div>
<figure style="float:left;">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
But when I try to add a third (or fourth, for that matter) image, the whole thing malfunctions.
I've tried using style="float:right; on the third image, which leads to it being below the other 2 figures on another line(of course, after reducing the width of figure first).
Essentially what I want the end result to be is to be able to put any number of images (3 and 4 for my use, but generalizing the solution will help people with the same problem) side by side, while each image has some text over it (hence the figure and figcaption CSS rules, which display the figcaption above the picture)
.flex{display: flex;}
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div class="flex">
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
For 3-4 image you can provide width to the element. But you can show a defined number of images using width. To show n number of image you can show as table and use css property overflaw:scroll.
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
firstly remove float and use display: flex;, it is very useful and highly recommended one.
and change the code to like this
#container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 20%;
display: block;
align-items: center;
justify-content: center;
border: 1px solid;
}
.link {
text-decoration: none;
color: #000;
}
.image-container {
display: inline-block;
width: 100%;
}
.caption {
text-align: center;
}
<div id="container">
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" class="image-container">
</a>
</div>
</div>
In the following example I am trying to create a div that contains any number of other divs which are centered and contain four divs per row (with the last row containing however many are left if the total number of images is not divisible by four).
However, it's causing there to be a small (about 3 pixels) spacing below each row of images. Is there any way to make the images so they have no spacing above/below each row?
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Just for good measure, here's a screenshot showing the gap I'm referring to:
You can fix this by adding vertical-align: top; to your images.
CSS
.image img {
vertical-align: top;
}
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Browser automatically adds some space between lines of (what it considers) text. You can resolve it simply by adding font-size: 0 to the images' wrapper.
I have boxes which size is 33.33% that is why 3 boxes are making 100% totaly.when I added fourth div and my 4th div is slipping whenever I putted .clearfix my problem is over..but I want to put clearfix every each 3rd div
thanks.
ok.. #AndreiGheorghiu my codes;
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
copy this code more than one and see the result
.parent>.child:nth-child(3n) {
clear: both;
}
UPDATE, after question being completed:
Your clearfix is working fine. Here:
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
Second update, after seeing the live page. Your problem is you are floating elements of uneven heights.
Updated again, after seeing the live example. Please not I added a custom class (.makeColumns) to your col-md-12 container. I also added this to CSS:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
You can see it working here:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
.ref-box {
position: relative;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<div class="section references" id="references">
<div class="row">
<div class="col-md-12 makeColumns">
<h2 class="head"><i class="fa fa-code"></i> References</h2>
<!-- <p>
This page will be designed soon. for now click here to see his references
</p>-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/ElZero/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/ElZero/thumbnail.jpg" alt="El Zero" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">El Zero</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Singolo/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/Singolo/thumbnail.jpg" alt="Singolo" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Singolo</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="http://cv.firatabak.com/works/Facebook/thumbnail.jpg" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
</div>
</div>
</div>
you can write css for that like given bellow
div:nth-child(3n+3) {
clear: both;
}
Alternatively, you can use overflow: hidden;
Sup guys. I can't make bew page with blocks to be in the same way as they are meant to be. I have problem with this high block, called "Bags". I tried flex-box, I tried float. Maybe someone can help me in placing everything in the way it was meant to be.
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure
{
position: relative;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
<main>
<figure class="huge">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="normal">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="wide">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="high">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="normal">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="big">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
Images:
Model
Result
Try the code below instead the one you are trying.
CSS:
figcaption {
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure {
position: relative;
padding: 5em;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
HTML:
<main>
<figure>
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure>
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure>
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure>
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
and if you want to increase the size of the image, you can do it and then increase the padding in the css.