3

How can I position 3 images like this with CSS?

enter image description here

I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);

html {
  height: 100%;
  box-sizing: border-box;
}

body {
    width: 1500px;
    text-align: center;
    font-family: arial;
    margin: 0 auto;
}

header ul {
   display: flex;
   list-style-type: none;
   justify-content: space-around;
   padding-bottom: 10px;
   align-items: center;
   border-bottom: 2px solid black;
   font-family: 'Source Code Pro';
}

footer ul {
  display: inline-block;
  list-style-type: none;
  align-items: center;
  font-family: 'Source Code Pro';

}

.logo {
    font-family: 'Source Code Pro';
    font-size: 40px;
    padding-top: 20px;
    font-weight: lighter;

}

/* Website nav code */
#top-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Shop nav code */
#bottom-nav {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin-top: 50px;
  padding-bottom: 10px;
  align-items: center;
  font-family: 'Crimson Text';
}

#bottom-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

#bottom-nav ul li {
    display: inline-block;
    padding: 15px 20px 0 20px;
}

nav ul {
    list-style-type: none;
}

.info {
    display: none;
    color: #fff;
    left : 0;
    top : 45%;
    right : 0;
    text-align : center;
    position: absolute;
}

/* Images code */

/* Footer code */
#footer {
    background: black;
    text-align: center;
    color: white;
  width:100%;
  float:left;
 }

  .wrap {

    position:relative;
    margin:0 auto;
    width:900px;
      height: 200px;
   }

  .wrap ul {
    list-style-type: none;
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Gullible</title>
    <link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
    <link href="normalize.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&amp;sensor=false"></script>
  </head>
  <body>
    <header>
      <nav id="top-nav">
        <h1 class="logo"><a href="index.html">Gullible</a></h1>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="shop.html">Shop</a></li>
          <li><a href="visit.html">Visit</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <nav id="bottom-nav">
      <ul>
        <li><a href="shop.html">Men</a></li>
        <li><a href="women.html">Women</a></li>
        <li><a href="denim.html">Denim</a></li>
        <li><a href="suits.html">Suits</a></li>
        <li><a href="dresses.html">Dresses</a></li>
        <li><a href="accessories.html">Accessories</a></li>
      </ul>
    </nav>
    <div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    <div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
    <div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
  </div>
    <div id="" class="pic"><img src=""/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
    <div id="footer">
      <div class="wrap"><strong>FIND US ON</strong>
         <ul>
           <li><a href="">Twitter</a></li>
           <li><a href="">Facebook</a></li>
           <li><a href="">Pintrest</a></li>
           <li><a href="">Instagram</a></li>
         </ul>
       </div>
       <div class="wrap"><strong>NAVIGATION</strong>
         <ul>
           <li><a href="">Home</a></li>
           <li><a href="">Shop</a></li>
           <li><a href="">Visit</a></li>
           <li><a href="">Newsletter</a></li>
         </ul>
       </div>
     </div>
  </body>
</html>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
LCAD
  • 88
  • 8

4 Answers4

3

Use CSS flexbox.

Very simple, using a nested flex container.

.outer-flex-container {
 display: flex;
}

.inner-flex-container {
 display: flex;
 flex-direction: column;
 margin-left: 5px;
}
<div class="outer-flex-container">

    <div class="image">
     <img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
    </div>

    <div class="inner-flex-container">

        <div class="image">
         <img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
        </div>
  
        <div class="image">
         <img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
        </div>

    </div><!-- END .inner-flex-container -->

</div><!-- END .outer-flex-container -->

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

Check the below code, hope it helps.. Note the style is inline, you can put it wherever you want. The best place is in the external CSS file but again it's your wish:-

<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">

      <div class="overlay" style="float:left;width:30%;">
      Left Hand Side Pic
      <img src=""/></div>
      <div id="right-side" style="float:left;width:70%;">
      <div id="RightPicAbove" class="info" style="background:red;">
        Left Hand Side Above Pic
      </div>
      <div id="RightPicBelow" class="info" style="background:green;">
        Rigth Hand Side Below Pic 
      </div>
      </div>
</body>
</html>
Erick Kamamba
  • 268
  • 1
  • 4
1

I think what you want to be using is called floats. If you float your #hoodie picture to the left and then put your #jacket pics inside a containing div (lets call it .jackets for simplicity's sake) then float that to the right, you should get the desired effect. See my jsfiddle.

Btw you're missing an enclosing div tag on your #jacket element. 

.jackets {
  float: right;
}

#hoodie {
  float: left;
  width: 50%;
}

#jacket {
  float: right;
}

#jacket1 {
  float: right;
  clear: both;
}
catch22
  • 391
  • 1
  • 3
  • 13
1

Try this

<div id="jacket" class="pics">
            <div class="imgcont">
                <img src="http://i.imgur.com/47iFqA1.jpg" />
                <div class="overlay"></div>
                <div class="info">
                    <p class="text"></p>
                </div>
            </div>
            <div class="imgcont">
                <div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg" />
                    <div class="overlay"></div>
                    <div class="info">
                        <p class="text"></p>
                    </div>
                </div>
                <div id="hoodie" class="pic">
                    <img src="http://i.imgur.com/YJMNEtS.jpg" />
                    <div class="overlay"></div>
                    <div class="info">
                        <p class="text"></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="" class="pic"><img src="" />
            <div class="overlay"></div>
            <div class="info">
                <p class="text"></p>
            </div>
        </div>
        <div id="footer">
            <div class="wrap"><strong>FIND US ON</strong>
                <ul>
                    <li><a href="">Twitter</a></li>
                    <li><a href="">Facebook</a></li>
                    <li><a href="">Pintrest</a></li>
                    <li><a href="">Instagram</a></li>
                </ul>
            </div>
            <div class="wrap"><strong>NAVIGATION</strong>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Shop</a></li>
                    <li><a href="">Visit</a></li>
                    <li><a href="">Newsletter</a></li>
                </ul>
            </div>
        </div>

and css

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
    @import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
    html {
        height: 100%;
        box-sizing: border-box;
    }

    body {
        width: 1500px;
        text-align: center;
        font-family: arial;
        margin: 0 auto;
    }

    header ul {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        padding-bottom: 10px;
        align-items: center;
        border-bottom: 2px solid black;
        font-family: 'Source Code Pro';
    }

    footer ul {
        display: inline-block;
        list-style-type: none;
        align-items: center;
        font-family: 'Source Code Pro';
    }

    .logo {
        font-family: 'Source Code Pro';
        font-size: 40px;
        padding-top: 20px;
        font-weight: lighter;
    }
    /* Website nav code */

    #top-nav ul {
        list-style-type: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
    /* Shop nav code */

    #bottom-nav {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        margin-top: 50px;
        padding-bottom: 10px;
        align-items: center;
        font-family: 'Crimson Text';
    }

    #bottom-nav ul {
        list-style-type: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    #bottom-nav ul li {
        display: inline-block;
        padding: 15px 20px 0 20px;
    }

    nav ul {
        list-style-type: none;
    }

    .info {
        display: none;
        color: #fff;
        left: 0;
        top: 45%;
        right: 0;
        text-align: center;
        position: absolute;
    }
    /* Images code */
    /* Footer code */

    #footer {
        background: black;
        text-align: center;
        color: white;
        width: 100%;
        float: left;
    }

    .wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 200px;
    }

    .wrap ul {
        list-style-type: none;
    }

    .imgcont {
        display: inline-block;
    }
user3589690
  • 120
  • 8
  • 1
    you should explain your code. Code only answers encourage copy and pasting without reinforcing the principles you're trying to help explain. – catch22 Mar 03 '16 at 01:20
  • Well one of my methods included grouping the 2 smaller images with a div tag, leaving the large image separate, and then adding an inline-block element to the large image. That method ended up with one of the small images on the side of the large one, but the 2nd small image ended up on top of the large image. – LCAD Mar 03 '16 at 01:29
  • I see that your code did not include any CSS at all, but changing around the placements of the divs to create the layout. I'm going to take a look and meddle around to see how that result happens. – LCAD Mar 03 '16 at 01:32
  • @catch22 noted! thanks for the suggestion and it makes sense. LCAD i have added two container divs with class .imgcont. Placed the large image in the left .imgcont div and the small two images in the right .imgcont div. I have used inline block css property on .imgcont which places them side by side. You can also use float:left ( which required clearfix). – user3589690 Mar 03 '16 at 02:33