how to get 3 images to fit in one line

Question

I'm trying to get images to fit side by side on a page, however it is not working out. As you can see, there are 2 columns, however when I add another image, would should create the 3rd column, it adds to the first. Halp!

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://i.imgur.com/3ay8hjS.jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #fff;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

.neighborhoood-guides {
    background-color: #fff;
    padding-left: 1px;
    padding-right: 1px;
    
}
 
.clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#fff;
}
 
.menu {
    width:1000px;
    margin:0px auto;
}
 
.menu li {
    margin:0px;
    list-style:none;
}
 
.menu a {
    transition:all linear 0.15s;
    color:black;
    text-transform: uppercase;
   font-family: 'Shift', sans-serif;
}
 
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:deepskyblue;
}
 
.menu .arrow {
    font-size:11px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:11px;
    font-weight:bold;
}
 
.menu > ul > li > a {
    padding:9px 9px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
 
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#fff;
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#fff;
}
 
.sub-menu li {
    display:block;
    font-size:11px;
    font-weight:bold;
}
 
.sub-menu li a {
    padding:10px 30px;
    display:inline;
}

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
      <title>iTravelAway - Destinations</title>
  </head>

  <body>
    
        <div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li>
                <a href="#">Useful Information<span class="arrow">&#9660;</span></a>
                <ul class="sub-menu">
                    <li><a href="#">Travel Insurance</a></li>
                </ul>
            </li>
            <li class ="current-item"><a href="destinations.html">Destinations</a></li>
            <li><a href="#">Airlines</a></li>
            <li><a href="#">Cruiselines</a></li>
            <li><a href="#">Hotels</a></li>
            <li><a href="#">Weddings & Honeymoons</a></li>
        </ul>
    </nav>
</div>
    <div class="jumbotron">
    </div> 
          <div class ="neighborhood-guides">
    <div class ="container">
<h2></h2>
        <h2></h2>
    <center><div class="row">
    <div class="col-md-4">
    <div class="Thumbnail">
    <img src="http://i.imgur.com/6mrToqb.jpg">
        <h3><font face="minecraft">Bermuda</font></h3>
       <p><font face="minecraft">Description</font></p>
        <h2></h2>
       <img src="http://i.imgur.com/eu38Pjt.jpg">
            <h3><font face="minecraft">Dominican Republic</font></h3>
            <p><font face="minecraft">Description</font></p>
        <h2></h2>
    </div>
    </div>
    <div class="col-md-4">
         <img src="http://i.imgur.com/iYueold.jpg">
     <h3><font face="minecraft">Mexico</font></h3>
 <p><font face="minecraft">Description</font></p>
        <h2></h2>
        <img src="http://i.imgur.com/8dn74Ao.jpg">
     <h3><font face="minecraft">Bahamas</font></h3>
 <p><font face="minecraft">Description</font></p>
   </div>
    </div>
    <div class="col-md-4">
    <div class="Thumbnail">
    <image src="http://i.imgur.com/ekLNRWw.png">
    </div>
    </div>
        </div>
        </div>
        </div>
        </center>
    
 

   <center><div class="learn-more">
   <div class="container">
  <div class="row">
       <div class="col-md-4">
   <h3></h3>
   <p></p>
       </div>
    <div class ="col-md-4">
   <h3></h3>
   <p></p>
    </div>
    <div class ="col-md-4">
   <h3></h3>
   <p></p>
              </center>
    </div>
     </div>
   </div>
 </div>
  </body>
</html>

please try and shorten the code snippets to what is actually relevant to your question: this is a lot to sort through. Creating a demo (like a jsfiddle) would also be helpful. — Andrea, Sep 08 '15 at 20:48
....also `` and `` have been deprecated and should no longer be used, — Paulie_D, Sep 08 '15 at 20:54
As far as I can tell, you aren't applying any CSS to the flags (if that's what you're trying to get into columns). Did you post the wrong CSS? Or have you not tried to style the columns yet? — Andrea, Sep 08 '15 at 20:56
I haven't tried styling it with CSS yet. I'm just trying to make the bottom flag in the first column go into its own 3rd column (with HTML). — matthew kap, Sep 08 '15 at 20:57
@matthewkap you'll need CSS to style those flags into columns. Take a look at the "float" property - that should get you pretty far in what you need done. — Andrea, Sep 08 '15 at 21:03
possible duplicate of [How to float 3 divs side by side using CSS](http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) — TylerH, Sep 08 '15 at 21:05
Also see http://stackoverflow.com/questions/3619233/div-side-by-side-without-float — TylerH, Sep 08 '15 at 21:05
Basically your html code (and, trust me, I don't mean any offense) is an absolute mess. Empty tags, some tags not closed. Probably if you spend some time formatting the code, or, even better, making it new from scratch it may work just fine. Use proper tabs when working on html so you can easily detect container lvl's. — Alvaro Menéndez, Sep 08 '15 at 21:09
if you just inspect the code snippet with chrome developer tool (or smillar with firefox and ie) you can see you have a `row` parent with 2 `col-md-4` containers while last one is outside the `row` class parent — Alvaro Menéndez, Sep 08 '15 at 21:12

WEB PERSON · Answer 1 · 2015-09-08T21:18:17.557

you are using the columns and rows completely wrong here. Am i correct in guessing that you want each row to have 3 flags inside it? If so, your layout should be as follows

    <div class="row">
    <div class="col-md-4">
        <div class="Thumbnail">
            <img src="http://i.imgur.com/6mrToqb.jpg">
            <h3><font face="minecraft">.......</font></h3>
            <p><font face="minecraft">........</font></p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="Thumbnail">
            <img src="http://i.imgur.com/eu38Pjt.jpg">
            <h3><font face="minecraft">.......</font></h3>
            <p><font face="minecraft">........</font></p>
        </div>
    </div>    

    <div class="col-md-4">
        <div class="Thumbnail">
            <img src="http://i.imgur.com/iYueold.jpg">
            <h3><font face="minecraft">.......</font></h3>
            <p><font face="minecraft">........</font></p>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="Thumbnail">
            <img src="http://i.imgur.com/8dn74Ao.jpg">
            <h3><font face="minecraft">.......</font></h3>
            <p><font face="minecraft">........</font></p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="Thumbnail">
            <img src="http://i.imgur.com/ekLNRWw.png">
            <h3><font face="minecraft">.......</font></h3>
            <p><font face="minecraft">........</font></p>
        </div>
    </div>    

</div>

this will also leave space in the second row for another image to be added with a div that spans the remaining 4 columns

score 0 · Accepted Answer · answered Sep 08 '15 at 21:15

You close the last div too fast. In your code you have an error near the last column. You have:

   <div class="col-md-4">
         <img src="http://i.imgur.com/iYueold.jpg">
     <h3><font face="minecraft">Mexico</font></h3>
 <p><font face="minecraft">Description</font></p>
        <h2></h2>
        <img src="http://i.imgur.com/8dn74Ao.jpg">
     <h3><font face="minecraft">Bahamas</font></h3>
 <p><font face="minecraft">Description</font></p>
   </div>
    </div><!-- Closes Row --> 
    <div class="col-md-4">
    <div class="Thumbnail">
    <image src="http://i.imgur.com/ekLNRWw.png">
    </div>
    </div>

Which should be:

   <div class="col-md-4">
         <img src="http://i.imgur.com/iYueold.jpg">
     <h3><font face="minecraft">Mexico</font></h3>
 <p><font face="minecraft">Description</font></p>
        <h2></h2>
        <img src="http://i.imgur.com/8dn74Ao.jpg">
     <h3><font face="minecraft">Bahamas</font></h3>
 <p><font face="minecraft">Description</font></p>
   </div>
    <div class="col-md-4">
    <div class="Thumbnail">
    <image src="http://i.imgur.com/ekLNRWw.png">
    </div>
    </div>
   </div><!-- Closes Row -->

how to get 3 images to fit in one line

2 Answers2