I am trying to create a grid sort of style of images and having a box underneath. Is there an easier way to achieve this look?
I am trying to replicate the layout shown in this image
At the moment this is where I am at with positioning:
Screenshot of what I have now
I want the far right image to be at the right margin, and also have a bit of spacing between the images.
My HTML so far:
<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="review1">
<img src="images/ramenzundo.jpg" alt="ramenzundo" width="300" height="300" />
<img src="images/charlierabbit.jpg" alt="charlie" width="300" height="300" />
<img src="images/ichiran.jpg" alt="ichiran" width="300" height="300" />
</div>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
<div class="reviews4">
<img src="images/downandout.jpg" alt="down" width="300" height="300" />
<img src="images/speedos.jpg" alt="speedo" width="300" height="300" />
<img src="images/tinygiant.jpg" alt="tiny" width="300" height="300" />
</div>
</section>
My CSS:
#trending {
float:left;
width:960px;
height:1000px;
background-color:#fdded9;
}
#trending h{
position:absolute;
font-size: 30px;
font-family: 'Economica', sans-serif;
color:white;
background-color: black;
}
.review1 {
padding-top:50px;
margin-right: 30px;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}
Something like this? just make sure you know what kind of structure you are looking for then build around that.
Here each row have a container <div class="rowContainer"> contain 3 images, for each image use <div class="review1">. For content below image use:
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
#trending {
margin-top: 100px;
}
.review1 {
border: 1px solid red;
text-align: center;
display: inline-block;
margin: 15px;
}
.rowContainer {
display: flex;
align-items: center;
justify-content: center;
}
<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="rowContainer">
<div class="review1">
<img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
<div class="rowContainer">
<div class="review1">
<img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
</section>
Try this full code:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style type="text/css">
body{
font-family: 'Economica', sans-serif;
}
.heading{
position:absolute;
font-size: 30px;
color:white;
background-color: black;
}
#trending {
margin: 0 auto;
width:960px;
height:1000px;
background-color:#fdded9;
clear: both;
}
.grid-container{
clear: both;
padding-top: 70px;
}
.grid {
border: 4px solid #444;
overflow: hidden;
float: left;
width: 250px;
margin: 15px 27px;
text-align: center;
}
.grid a{
overflow: hidden;
color: #000;
text-decoration: none;
}
.grid p{
margin: 0;
padding: 20px 0px;
background-color: #C3D7CC;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<section id="trending">
<h1 class="heading"> TRENDING REVIEWS </h1>
<div class="grid-container">
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="down" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="speedo" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="tiny" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
</div>
</section>
</body>
</html>
Given that you are new to HTML and CSS - know that this is still one of the hardest things to do well. The question isn't really about images either. Making a 'grid' layout of elements is what you are doing. An image is and element - just like a div - but in this case - your elements are inside a parent.
Ensuring your markup is as great as it can be, is the first step:
<ul class='thing-list'>
<li class='thing'>
<a class='link' href='#'>
<figure>
<img src='https://placehold.it/800x1000' alt='thing poster'>
</figure>
<h1 class='title'>Title</h1>
<div class='rating'>
xxx
</div>
</a>
</li>
</ul>
This would live in some parent element for layout management.
Grids are almost always a list of something being spit out by an array of data, so you should actually use a list - maybe even an 'ordered' one. <ol>
Once you have solid markup - you have many choices of how to get a grid going. Most of what you choose will depend on what browsers you have to support.
Use a site like this: https://caniuse.com/#search=grid to check for browser compatibility for any CSS stuff.
You can make the list items display: inline-block; and they will lineup and break to the next line.
You could use a table layout (put the info into a table element)
You can use floats to align then next to each other (make sure to clearfix their parent - or overflow: hidden; it in the short term)
You can use CSS grid (look that up)
Or you can use flexbox, which is what I suggest. The only downside to this, is that you'll likely want to use a preprocessor and autoprefixer to ensure you don't have to write the tricky browser prefixes by hand. (this is not really a downside - but might be scary if you haven't used one.) I suggest codekit for beginners - or use the autoprefixer built into codepen for practice.
I HIGHLY recommend you try ALL the ways I mentioned - so you can learn the quirks of each.
Example: https://jsfiddle.net/sheriffderek/0egLgmge/
This is a great guide to help you with the specifics: https://css-tricks.com/snippets/css/a-guide-to-flexbox
ul {
list-style: none;
margin: 0;
padding: 0;
}
figure {
margin: 0;
}
figure img { /* make img's in figures responsive to their parent */
display: block;
width: 100%;
height: auto;
}
.thing-list {
display: flex;
flex-direct: row;
flex-wrap: wrap;
justify-content: space-between;
}
.thing-list .thing {
flex-basis: 30%;
background: rgba(0,0,0,.1);
margin-bottom: 30px;
}
.thing-list .thing .link {
display: block; /* this has children that are block - so it HAS to be block */
}
.thing-list .thing figure {
/* */
}
.thing-list .thing .title {
margin: 0;
padding: 10px;
font-size: 16px;
background: lightgreen;
color: white;
}
.thing-list .thing .rating {
padding: 10px; /* you can use flexbox for these stars too */
}
For different screen sizes - you'll need to use #media queries to change the style rules based on screen size.
You're also going to need this: https://www.paulirish.com/2012/box-sizing-border-box-ftw/
Related
How can I adjust the code so that there is no space between each image and also how to keep them from overlapping. I tried to add another image but one ended up overlapping it. I have tried looking it up but no matter what I try it just doesn't work.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.text {
text-align: center;
}
<!--IMAGES-->
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg" height="300px" width="300px" alt="" />
</div>
</div>
You could use flexbox
<div class="row_flex">
<div class="column_flex">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
height="300px" width="300px" alt="" />
</div>
And the CSS
.row_flex {
display: flex;
justify-content: center;
}
I have changed your class names by adding the word "flex" as it looks like you're using something like Zurb foundation or bootstrap, where you wouldn't want to change the properties of "row" and "column" as the rest of your site will likely depend on them.
If you want images to be a little repsonsive I would suggest the following:
.column {
padding: 5px;
/* flex: 1;
flex-basis: 33%; */
max-width: calc(33vw - 10px);
display: flex;
}
.column img {
max-width: inherit;
}
/* .row::after {
content:"";
// display: table;
clear: both;
} */
.text {
text-align: center;
}
.row {
display: flex;
justify-content: center;
}
<div id="app"></div>
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
alt="" />
</div>
Depending on whether or not you want this to run for other people you could make your own image on paint where you combine all 3 of the other images and then create an indirect path by guiding it to your images file. There are better methods if you want to be able to give the code to other people or have it work for other people on a browser involving more difficult code but if this is just going to be displayed on your computer and will not go to the public, I think that this would be much easier than coding the solution. That is, unless you are using bootstrap or another adapter.
I'm having trouble with image sizing in my gallery, I have been reading multiple threads and yt videos but can't seem to figure it out myself
image of the problem:
* {
box-sizing: border-box;
}
.gallery {
border: 1px solid #ccc;
}
.gallery img {
width: 100%;
height: auto;
}
.des {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
<h1>Veckans deals!</h1>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
There is no way where you can make them all stretch while using float, without setting a fixed height to all images. You have three options.
Set a fixed height on the image and use object-fit: cover to make it look like it's stretching, while in fact it's covering it
Use flexbox with flex-grow: 1 on the image (see this example, recommended!)
Adjust all images to have the same width and height, if they can be made uniform.
I am sure that the images have different resolution.
First 2 images have the same resolution, 3:2 for example.
Last 2 images have the same resolution, 2:1 for example, but differs than first 2 images.
Please try to fix the resolutions of images all the same.
Your images are not the same height/width, just like the ones I found you when I made you a snippet. So decide on which direction is important and use vh/vw and auto
More here
* {
box-sizing: border-box;
}
.gallery {
border: 1px solid #ccc;
}
.gallery img {
width: auto;
height: 15vh;
}
.des {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
<h1>Veckans deals!</h1>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!
My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
What I would recommend is to make use of flexbox container for the elements.
With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:
display: flex;
align-items: self;
justify-content: center;
Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.
This can be seen in the following, with a border added to showcase the area that the .container element occupies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="container">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Hope this helps! :)
html
<div class="content">
<div>
<img src="facebook.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="twitter.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="instagram.png" alt="" width="75" height="75" />
</div>
</div>
css
.content {
text-align:center;
}
Maybe you can edit the css file, remove the float:left; :
.contain {
max-width:960px;
text-align:center;
}
.social {
position:relative;
display: inline-block;
padding: 10px;
}
<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.
.contain {
max-width: 960px;
text-align: center;
}
.social {
display: inline-block;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Keeping your current code, simply remove the flex: left: (JSFiddle example):
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
padding: 10px;
}
If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):
.contain {
display: flex;
justify-content: center;
}
.social {
padding: 10px;
}
There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.
I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :
Image1 Image2 Image3
Image4 Image5 Image6
Image7 Image8 Image9
<html>
<head>
<title>Display Images</title>
</head>
<body>
{% for image in images %}
<div>
<img src={{ self.item_.images }}>
</div>
{% endfor %}
</body>
<html>
All the images there after aligns in the same order. First row with three images, then automatically break, then next row.
Please help.
Best Regards
Simply float every image left...then clear after every third image in order to force the next three to a new line.
You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.
Demo Fiddle
CSS
img{
float:left;
}
img:nth-child(3n+1){
clear:left;
}
Is this what you want?
DEMO
HTML
<div class='container'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>
CSS
.container{
display:block;
width:400px;
}
.container img{
float:left;
padding:1px;
}
Image1 (fll) Image2 (fll) Image3 (fll)
(clear)Image4 (fll) Image5 (fll) Image6 (fll)
(clear)Image7 (fll) Image8 (fll) Image9 (fll)
Where :
fll - float: left
clear - clear: both
Do you want your images to have a fixed size?
If not:
<html>
<head>
<style>
img {
width: 33%;
height: 100px;
float: left;
}
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>
If yes: (You might need to consider a fixed container width.)
<html>
<head>
<style>
.main-container {
width: 900px;
margin: 0 auto;
}
img {
width: 300px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="main-container">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</div>
</body>
</html>
Floating allows the images to fill a row. Fixed with of images and the container makes it possible to determine how many images there will be in the row.
If you want to follow responsive design, you could add break point to your page so that in smaller screen sizes your grid of images depends on available space.
Normally you will want to have fixed size for your images that is their actual size. Otherwise the displayed quality of the images might be bad.
You can find the idea here
Then I customize it for you.
<!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:500px;
}
div.img
{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
Having some trouble trying to put together a page where images are placed properly. Screen shot attached of what I currently have in place now. What I am trying to get to would look like the first row of images (1-5) all the way down the page with every other row opposite, if that makes sense. Images 1-8 are set up correctly but 9-10 are on row 3 rather than on row 2 where I would like them. Image 11 should be left side and 12-15 should be right side. And so on..
Current css –
#grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden; }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
#project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }
Current markup –
<div id="grid">
<div id="grid-inner">
<div class="item large">
<span>ONE</span>
<img src="" width="420" height="260" alt="ONE" />
</div>
<div class="item small">
<span>TWO</span>
<img src="" width="210" height="125" alt="TWO" />
</div>
<div class="item small">
<span>THREE</span>
<img src="" width="210" height="125" alt="THREE" />
</div>
<div class="item small">
<span>FOUR</span>
<img src="" width="210" height="125" alt="FOUR" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="FIVE" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SIX" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SEVEN" />
</div>
<div class="item large">
<span></span>
<img src="" width="420" height="260" alt="EIGHT" />
</div>
Any help or suggestions on this would be appreciated.
Thanks in advance!
CSS floats don't reposition the elements vertically. They only float horizontally.
If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).
Check out the interface here. Let me know if you need revisions.
EXACTLY WHAT WAS ASKED FOR - http://jsfiddle.net/rxLTG/
HTML
<div class="wrap">
<div class="row">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
</div>
<div class="row">
<img class="sm" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="lg" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
</div>
</div>
CSS
.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}
JS
$(function () {
$('.row:odd').addClass('odd');
});
A better way would be like this - http://jsfiddle.net/rxLTG/2/
HTML
<div class="wrap">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
<img class="lg2" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="sm" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
<img class="lg" src="" alt="11" />
<img class="sm" src="" alt="12" />
<img class="sm" src="" alt="13" />
<img class="sm" src="" alt="14" />
<img class="sm" src="" alt="15" />
<img class="lg2" src="" alt="16" />
<img class="sm" src="" alt="17" />
<img class="sm" src="" alt="18" />
<img class="sm" src="" alt="19" />
<img class="sm" src="" alt="20" />
</div>
CSS
.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}
Theres no need to define each row inside a div, because they will automatically fit and wrap round.
Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.
Every fifth number will then be a large image, (1,6,11,16,21 etc). If you want it to work javascript free, then use this solution. If you want to keep your original numbering system, then use the solution above.
You can just look at it as a grid. More markup, but reusable and responsive too.
For the example, you can handle this grid layout with a single class that takes the half of it's container.
first row :
- 1 column of 1/2 : has 1 large image
- 1 column of 1/2 : has 4 columns (1/2 each, and each containing a small image)
Second row : just reverse the first 1/2 columns
Columns are floated, so the col 4 and 5 will stack under 1 and 2... Your images, have to be at the right aspect ratio too.
And finally, since you're floating elements, clearfix the group.
Hope it helps.
/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after {
content: '';
display: table
}
.wrap:after {
clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img {
width:100%;
height: auto;
vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {
float: left;
width: 50%;
}
/* demo purpose only */
img {
width: 100%;
height: 100px;
}
img.lg { height: 200px; }
<div class="wrap">
<!-- one half of the wrapper -->
<div class="col-1-2">
<img class="lg" src="" alt="1" />
</div>
<!-- one half of the wrapper -->
<div class="col-1-2">
<!-- one half of the columns :: 1/4 -->
<div class="col-1-2">
<img class="" src="" alt="2" />
</div>
<div class="col-1-2">
<img class="" src="" alt="3" />
</div>
<div class="col-1-2">
<img class="" src="" alt="4" />
</div>
<div class="col-1-2">
<img class="" src="" alt="5" />
</div>
</div>
<!-- then reverse -->
<div class="col-1-2">
<div class="col-1-2">
<img class="" src="" alt="6" />
</div>
<div class="col-1-2">
<img class="" src="" alt="7" />
</div>
<div class="col-1-2">
<img class="" src="" alt="8" />
</div>
<div class="col-1-2">
<img class="" src="" alt="9" />
</div>
</div>
<div class="col-1-2">
<img class="lg" src="" alt="10" />
</div>
</div>