Newbie here.
I am trying to create a page of 12 equal-sized images in a 3 Column * 4 Row layout.
I am having a problem with unwanted space appearing between each row. I am currently using <br>, which I know is incorrect, but I don't know the correct way to do it. As I understand it, tables are now considered a poor method?
I currently have CSS :
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: black;
}
.centerDiv {
width: 60%;
height:200px;
margin: 0 auto;
background-color:#FFA500;
}
.pic {
border-left: 0px solid black;
border-right: 0px solid black;
float: left;
/* height: 300px; */
/* width: 300px; */
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 0px #111;
box-shadow: 0px 0px 0px #111;
}
And my HTML :
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>JimithyH</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div class="tilt pic">
<div class="imgContain">
<img src="tree-0-0.jpg" alt="">
</div>
</div>
<div class="tilt pic">
<img src="tree-0-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-0-2.jpg" alt="">
</div>
<br clear="all">
<div class="tilt pic">
<img src="tree-1-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-1-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-1-2.jpg" alt="">
</div>
<br/ clear="all">
<div class="tilt pic">
<img src="tree-2-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-2-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-2-2.jpg" alt="">
</div>
<br clear="all">
<div class="tilt pic">
<img src="tree-3-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-3-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-3-2.jpg" alt="">
</div>
</body>
</html>
So it looks like the comments beat me to it but all you need is to set the width of an image to 33.333%, that way the browser will automatically start a newline when it runs out of space. Personally i'd like to have some padding around the image so my CSS for an image like yours would be:
img {
width: 30%;
padding: 1%;
}
Seems you are missing to define the width of the tag that encloses the tag.
You need to split the body width 100% for every three and so each should have 33% (just round off).
so you can mention in css as
#tilt pic
{
width : 33%;
margin-left : 2px; // as per your requirement
}
This will surely works for you.
Related
Having an issue where i have two columns a left and right that will not go the 100% to the bottom where it should meet with the about dealer section. I have a left column and a center column and a right column. The center is the one that is filled with content and the right and left column should flow along with it without any content in it.
I have researched this for the last two day and have tried a ton of different things found on stack overflow and other sites, the big difference was setting the html, body{ height: 100%} to 100% along with using the vh on the columns. this works somewhat and am looking for a little help on what I'm doing wrong
I can't figure out why it only goes down 740px and stops.
I can post all the code but there is a lot of it so for now ill just give the parts I'm talking about.
If there is more information/code needed please let me know so i can present it.
Here is the site hosted for viewing Site Here
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="frontDoor.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="leftColumn"></div>
<div class="centerBox">
<div class="slideShow">
Slide Show
</div>
<div class="autoSearch">
auto Search
</div>
<div class="recList">
<span><b>Recent</b></span>Listings
</div>
<div class="recImg">
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200"/>
<img src="images/honda.png" alt="car" width="200"/>
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="srchSell">
<div class="srchBut">
<button class="button but1">SEARCH</button>
</div>
<div class="sellBut">
<button class="button but2">SELL</button>
</div>
</div>
<div class="recBlog">
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200"/>
</div>
</div>
<div class="autoNews">
Auto news
<hr class="style-six">
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
</div>
</div>
<div class="rightColumn"></div>
</div>
</body>
</html>
Here is the CSS
html {height: 100%;}
body{
background-color: #222222;
font-family: 'PT Sans Narrow', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 960px;/*1688px*/
height: 100%;
background-color:#b3ffb3;
}
.rightColumn{
float: left;
width: 70px;
height: 100%;
border: 1px sold gray;
background-color:#fff;
}
/* This is the center column */
.centerBox{
float:left;
width: 820px;
height: 100%;
border: 1px sold gray;
background-color:#fff;
overflow: hidden;
}
The simplest way is to wrap the three columns in a container DIV (.wrap_3 in my snippet below) and apply display: flex and height: 100% to that container. Also html and body need height: 100% for that height setting to work.
html,
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
body {
background-color: #222222;
font-family: 'PT Sans Narrow', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 960px;
/*1688px*/
height: 100%;
background-color: #b3ffb3;
}
.wrap_3 {
display: flex;
height: 100%;
}
.leftColumn {
width: 70px;
border: 1px sold gray;
background-color: #fb7;
}
.rightColumn {
width: 70px;
border: 1px sold gray;
background-color: #b8f;
}
.centerBox {
width: 820px;
border: 1px sold gray;
background-color: #fff;
overflow: hidden;
}
<div class="wrap_3">
<div class="leftColumn"></div>
<div class="centerBox">
<div class="slideShow">
Slide Show
</div>
<div class="autoSearch">
auto Search
</div>
<div class="recList">
<span><b>Recent</b></span>Listings
</div>
<div class="recImg">
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="srchSell">
<div class="srchBut">
<button class="button but1">SEARCH</button>
</div>
<div class="sellBut">
<button class="button but2">SELL</button>
</div>
</div>
<div class="recBlog">
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
<div class="blogImg">
<img src="images/honda.png" alt="car" width="200" />
</div>
</div>
<div class="autoNews">
Auto news
<hr class="style-six">
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
<div class="news">
<img src="images/honda.png" alt="car" width="150" />
</div>
</div>
</div>
<div class="rightColumn"></div>
</div>
I am very new to HTML and CSS. I am creating a page I will insert it into my Wordpress website thoughtprojekt.com. I tried every where else to achieve what I am trying to but couldn't.
There is a header that I coded is below which is fine.
p.h1{
padding-top:75px;
padding-bottom: 25px;
}
a.header{
text-transform: uppercase;
text-align: center;
font-weight: normal;
text-decoration: none;
display:block;
color: #000000;
font-size:50px;
font-family: 'Lato Light', sans-serif;
line-height:50px;
letter-spacing:15px;
}
</style>
</head>
<p class ="h1" align="center"> <body><a class="header" href="http://thoughtprojekt.com">Thought Projekt</font></a>
Now I want to place 64px x 64px (30 images) starting exactly in the center and right below "Thought Projekt". There should be only 5 images in a row with 6 rows in total. I have tried padding but as the images also have hyperlinks it leaves clickable blank spaces.
Can someone please guide me as to how should I start placing the images?
Thanks
You can use divs to set limits, for a row width.
And, for float the items, where you put the images...
Example
html
<div class="row">
<div class="image"><img src="#" alt="Image"/></div>
</div>
css
.row {
max-width: 340px;
}
.image{
width: 64px;
height: 64px;
float: left;
}
What I would suggest is that you need to make a whole div where all the images will go in. Withing that div, you will place 6 div's one below the other and within each div, you place each image next to each other.
The HTML code will look like this:
<head>
<link type="text/css" rel="stylesheet" href="images.css">
</head>
<body>
<div class="container">
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
</div>
</body>
Then for CSS:
//This is the images.css file located in the same folder with html file
.container .row img{
float: left; //Each image will be next ot each other
width: 64px;
height: 64px;
}
.row{
display: block;
height: 64px;
}
.container{
width: 320px;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: auto 0px;
float: right;
}
I believe this is what you are asking for. Hope it helps!
PS: Are you new to stackoverflow? Welcome! :)
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.
I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/
Here is an image to make it clear what I want to achieve:
Here is my code:
HTML
<div class="mainInfo">
<div class="gallery">
<!-----this is the first image I want to be the large preview--->
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
<!--END OF MAIN INFO-->
</div>
CSS
.mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;
/* .............Gallery section........... */
.gallery {
float: left;
}
.gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
}
.displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
}
/* .............Gallery section END........... */
Organize
You need to organize your HTML for layout.
Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.
Use CSS to define constraints.
Let's try adding appropriate widths to your images and fixing the margins.
Updated CSS
.gallery {
float: left;
}
.gallery img {
width:80px;
height: 80px;
margin: 10px;
}
.displayImage {
text-align: center;
padding-bottom: 20px;
}
.displayImage img {
width: 400px;
height: auto;
margin: 0 auto;
}
Updated HTML
<div class="gallery">
<div class="displayImage">
<img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage">
</div>
<a href="#">
<img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
<a href="#">
<img src="http://images.summitpost.org/original/134465.jpg" alt="">
</a>
<a href="#">
<img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
</a>
<a href="#">
<img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
</div>
Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.
Here's a example of it all: http://codepen.io/anon/pen/LjgdF
Do something like this,then you can position first images as per your wish.
Something you will get in Fiddle
<div class="mainInfo">
<div class="gallery">
<div class="bigpic">
<img src="../assets/images/gallery/gallery3.png" alt="">
</div>
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
</div>
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>