Page Layout - Having picture tiles in 3 columns

I've read the post A clean CSS3 3-column layout, where to start?, but I'm still experiencing problems with having a photo grid layout with 3 columns with the middle column a horizontal line. However, I get the pictures laid out horizontally in left column and in the right column it is laid out more like a grid 2 x 2, but the picture sizes vary.

So, basically, I want to have 4 pictures in the left column laid as 2 x 2 all even sizes and the same for the right column in a compatible way (and if possible to add a column title as well).

My attempted approach is:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Picture World</title>
        <link rel="stylesheet" type="text/css" href="style.css" >    
      </head>

      <body>

    <div id="header">   
     <header>

        <div id="header-left"><img src="/images/portal/logo.png" alt="logo" width="350" height="150"></div>
        <div id="header-right"><a href="/contactus">Contact Us</a></div>
        <div style="clear: both"></div>   

    </header>

    </div>

        <h1>
            Welcome!  
        </h1>
    </div>

    <div id="nav">

        <div id="leftmenu">

            <p><a href="/home">Home</a></p>

            <p><a href="/aboutus">About Us</a></p>

            <p><a href="/ebook">E-Book</a></p>

            <p><a href="/emagazine">E-Magazine</a></p>

            <p><a href="/links">Links</a></p>

        </div>
    </div>

    <div id="leftmainsection">

    <div class="img">
      <a href="/ebook/001.pdf"> <img src="images/books/001.jpg" alt="Book 1"></a>
      <div class="desc">Author 1</div>
    </div>

    <div class="img">
      <a href="/ebook/002.pdf"> <img src="images/books/002.jpg" alt="Book 2"></a>
      <div class="desc">Author 2</div>
    </div>

    <div class="img">
      <a href="/ebook/003.pdf"> <img src="images/books/003.jpg" alt="Book 3"></a>
      <div class="desc">Author 3</div>
    </div>

    <div class="img">
      <a href="/ebook/004.pdf"> <img src="images/books/004.jpg" alt="Book 4"></a>
      <div class="desc">Author 4</div>
    </div>


      <div id="horizontal">
      </div>

      <div id="rightmainsection">


      <div class="img">
      <a href="/emagazine/001.pdf"> <img src="images/magazines/d001.jpg" alt="Book 1"></a>
      <div class="desc">Mag 1</div>
      </div>

      <div class="img">
      <a href="/emagazine/002.pdf"> <img src="images/magazines/d002.jpg" alt="Book 2"></a>
      <div class="desc">Mag 2</div>
      </div>

      <div class="img">
      <a href="/emagazine/003.pdf"> <img src="images/magazines/d003.jpg" alt="Book 3"></a>
      <div class="desc">Mag 3</div>
     </div>

      <div class="img">
      <a href="/emagazine/004.pdf"> <img src="images/magazines/d004.jpg" alt="Book 4"></a>
      <div class="desc">Mag 4</div>
      </div>

      </div>

      <div id="footer">

        <footer>
            <div id="footer-left">Copyright &copy; 2016 PWC Ltd</div>
            <div id="footer-right"><a href="/contactus">Contact Us</a></div>
            <div style="clear: both"></div>   

        </footer>

    </div>


      </div>


      </body>
    </html>

And my CSS is:

    body {
        background: white;  
    }

    .content {
        padding: 25px;
    }


    #header-left {
        float: left;
    }

    #header-right {
        float: right;
    }

    #header-centre {
        overflow: hidden;
    }


    #header {
        background-color:white;
        color:black;
        /* text-align:center; */
        padding:5px;
    }

    #nav {
        line-height:30px;
        background-color:white;
        height:400px;
        width:100px;
        float:left;
        padding:5px; 
    }

    .sidemenu {
        width: 25%;
        background-color: white;
        border: 1px solid black;
    }


    #leftbodysection {
        width:50px;
        float:left;
        padding:10px; 
    }
    #rightbodysection {
        width:50px;
        float:right;
        padding:10px; 
    }
    #footer {
        background-color:blue;
        color:white;
        clear:both;
        text-align:center;
        padding:5px; 
    }


    #footer-left {
        float: left;
    }

    #footer-right {
        float: right;
    }

    #footer-centre {
        overflow: hidden;
    }

    #horizontal {
        line-height:30px;
        background-color:white;
        height:400px;
        width:20px;
        float:left;
        padding:5px; 
    }

    hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    }


    div.img {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
    }   

    div.img:hover {
        border: 1px solid #777;
    }

    div.img img {
        width: 100%;
        height: 100%;
    }

    div.desc {
        padding: 15px;
        text-align: center;
    }

How can I solve this please?

Answers


The easiest way example:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="jumbotron.css" rel="stylesheet">
  </head>


    <body>
        <div class="container">
        <div class="column-center"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        <div class="column-left"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        <div class="column-right"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        </div>
    </body>
</html>

CSS

.column-left{ 
    float: left; 
    width: 33%; 

    }
.column-right{ 
    float: right;
    width: 33%;

    }
.column-center{ 
    display: inline-block;
    width: 33%;

    }

Two simple ways to achieve this:

1- A Simple Flex Grid of Images (33.3% width):

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around; /* Safari 6.1+ */    
    justify-content: space-around;
}

.container div {
  -webkit-flex: 0 0 calc(33.3% - 20px); /* Safari 6.1+ */
  -ms-flex: 0 0 calc(33.3% - 20px); /* IE 10 */ 
  flex: 0 0 calc(33.3% - 20px);  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 10px;
  text-align: center;
}

.container img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
<div class="container">
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

Need Your Help

Headless authentication with Azure AD (user/pass combination)

asp.net azure authentication asp.net-web-api adal

I'm following the guide and example provided by Microsoft here and I'm able to get the demo working, with the authentication happening in a console app, then making a request to a Web API with the

Return a Value Using Another Function with Golang?

function go error-handling

In Go, is it possible to return using a function only?