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>
Related
I would like to figure out how to get a series of images to be vertically aligned on the page so people can scroll left to right and view them. I have tried 'vertical-align: middle'as well as adjusting the top % to no avail, here's the current set-up
.page {
position: absolute;
width: 2400px;
vertical-align: middle;
}
.column {
float: left;
width: 400px;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
You may use the table-layout , so you get a single line and can use vertical-align:middle from the parent container .
here is an example without float and okay for browsers as old as FF 1 or IE8 . today, grid and flex can do a similar job in that case. Play snippet in full page to check out vertical-align behavior
body {
margin: 0;
padding: 0;
}
.page {
overflow-x: auto;
overflow-y: hidden;
height: 100vh;
box-sizing: border-box;
}
.row {
display: table;
height: 100%;
}
.column {
padding: 5px;
display: table-cell;
vertical-align: middle;
}
.column img {
width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
with flex it could be :
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items:center;
min-height:100vh;
box-sizing:border-box;
}
.column {
padding: 5px;
min-width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
I'm trying to recreate a chat using images as the messages. The images are of different widths and are in a parent div with a fixed width of 500px. The images are however bigger than 500px, which means that if I scale them down with "max-width: 80%", they do scale down but all to the same width. How can I keep the different widths while scaling them down? Can I achieve that with flexbox? Or with table?
Edit: This is roughly what it should look like:
Here's the snippet of the situation:
.wrapper {
margin: 0 auto;
margin-top: 20px;
width: 500px;
}
.chat {
border: 2px solid #b7b7b7;
}
.chat .chat-header {
width: 496px;
margin-bottom: -2.5px;
position: relative;
}
.chat .chat-history {
padding: 2%;
overflow-y: scroll;
height: 700px;
overflow-x: hidden;
}
.message {
max-width: 80%;
height: auto;
padding: 2px;
}
.float-right {
float: right;
}
<div class="wrapper">
<div class="chat">
<div class="chat-header">
<img class="chat-header" src="https://via.placeholder.com/1280x212"/>
</div>
<div class="chat-history">
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/736x143" width="736" height="143" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/530x384" width="530" height="384"/>
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/591x140" width="591" height="140" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/546x152" width="546" height="152" />
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/561x101" width="561" height="101" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/698x124" width="698" height="124" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/840x203" width="840" height="203" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/824x141" width="824" height="141" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/770x141" width="770" height="141" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/748x139" width="748" height="139" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/725x85" width="725" height="85" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/812x197" width="812" height="197" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/859x189" width="859" height="189" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/740x140" width="740" height="140" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/596x125" width="596" height="125" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/857x109" width="857" height="109" />
</div>
</div>
</div>
</div>
Use several :nth-child(expr) presets with different max-width. expr should be some formula with n so you get repeated patterns of image scaling or some patterns that look random.
Example:
.message-container:nth-child(2n) .message {
max-width: 60%;
}
.message-container:nth-child(2n+1) .message {
max-width: 50%;
}
.message-container:nth-child(3n+2) .message {
max-width: 40%;
}
Set message-container class to divs inside chat-history or use .chat-history > div instead.
https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child
I have the following code :
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 100px;
}
.pageMainContentRight {
width: 600px;
float: right;
margin-right: 90px;
text-align: justify;
}
.pageMainContentRight a{
color:#000000;
and code :
<div id="pageMainContent">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px"><img alt="" src="image1.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:40px"><img alt="" src="image2.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div><br />
<div class="pageMainContentLeft" style="width:100px; height:150px; padding-top:30px"><img alt="" src="image3.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; text-align:justify;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:34px"><img alt="" src="image4.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; margin-top:-20px"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>Text </span></p>More Text.</div><br />
</div>
Inside the div pageMainContent I want to display 4 pictures with text underneath (in the shape of a box). What is the correct layout in each of the four divs ?
(its left picture then text underneath then horiztonal to that picture its right picture with text underneath - drop a few spaces and repeat for 2 more boxes)
P-----------------------P
T-----------------------T
P-----------------------P
T-----------------------T
P - Picture
T - Text
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="image1.png" />
<div style="width:100px;"><p>Text Here</p></div>
</div>
Also do something similar for the right div. I however recommend you restructure your code to make things easier for you.
<div class="sectionContainer">
<div class="entry" >
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
<div class="entry">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
</div>
If you divide you code into sections, you will have more control of the code.
In my code, divs with sectionContainer class will display as rows because you will not define any floating for it in you css. So by definition, div elements are block elements and they will show as blocks, that is one on top of another.
For class entry, define a float to the left in your css and they will all be aligned from the left.
Make sure the width of .sectionContainer class is wide enough to accommodate two .entry items.
The main issue you had was that you mixed up which things should be left content and right content. I made a very basic method of making a box. You can format it as you wish
<div class="pageMainContentLeft">
<img alt="image1" src="image1.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image2" src="image2.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft">
<img alt="image3" src="image3.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image4" src="image4.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<style>
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 200px;
}
.pageMainContentRight {
width: 200px;
float: right;
}
</style>
So I have that html code with images+title:
<div class="container">
<div class="box"><img src="image1.jpg" class="thumb"><p>Title 1</p></div>
<div class="box"><img src="image2.jpg" class="thumb"><p>Title 2</p></div>
<div class="box"><img src="image3.jpg" class="thumb"><p>Title 3</p></div>
<div class="box"><img src="image4.jpg" class="thumb"><p>Title 4</p></div>
...
<div class="box"><img src="image49.jpg" class="thumb"><p>Title</p></div>
<div class="box"><img src="image50.jpg" class="thumb"><p>Title</p></div>
</div>
And css:
.container {
width:80%;
margin: 0 auto;
}
.box {
display:inline-block;
width:150px;
margin-right:5px;
float:left;
}
With that code I have more "white" space on right, I want to have these pictures in the center for different browser size without setting up width for container.
Is it possible with css?
add to your container class text-align: center; and remove float:left; from box class.
That's what you call a centered, widthless float.
#outer {
/* This is just so you can see that they're centered */
width: 400px;
border: 1px solid black;
overflow: hidden;
}
.centered {
position: relative;
float: left;
left: 50%;
/* This and below is just because I have them stacked */
height: 100px;
padding-bottom: 10px;
clear: left;
}
.centered div {
position: relative;
float: left;
left: -50%;
}
<div id="outer">
<div class="centered">
<div>
<img src="http://placehold.it/200x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/300x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
</div>
</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>