Three column each row HTML

Question

I am trying to create something like this:

And I want to know how I exactly I can create a thumb like this. Note that I am using WP and I am not using Bootstrap. So how can I correct my codes to make it look exactly like the image above and it must responsive.

Here's codes:

<h3>Includes the following:</h3>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

JSFIDDLE: https://jsfiddle.net/p8gkjszg/ Any idea? Thanks!

35% * 3 = 105%, how do you expect three to fit on one line? Also your image needs to be width:100% otherwise this won't be reposnsive — Pete, Commented Jan 5, 2016 at 9:36
@Rodel: If you are not using Bootstrap then why are there <button class="btn btn-primary"> in your code? Anyway, see here for a demo which you can learn from -- jsfiddle.net/abhitalks/1o4ah2kx — Abhitalks, Commented Jan 5, 2016 at 9:57

Sagar Kodte · Accepted Answer · 2016-01-05 09:42:07Z

ul li {
    display: inline-flex;
    margin-left: 20px;
    width: 150px;
    margin-bottom: 50px;
}
ul li img {
    width: 100%;
    height: 150px;
}
h4 {
    position: relative;
    top: 135px;
    right: 130px;
    font-size: 12px;
}
ul li a {
    position: relative;
    top: 162px;
    right: 125px;
}

<h3>Includes the following:</h3>

<ul><li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
</ul>

<ul>
<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
  </ul>

Have you tested this? It seems like you've used fixed values which won't be responsive. — Polyducks, Commented Jan 5, 2016 at 9:45
because of snippet i have to put fix value for it. That's why it's showing properly in snippet. you can use your own values or use media queries for reponsive — Sagar Kodte, Commented Jan 5, 2016 at 9:48
hey i made another answer for it and its fully responsive with bootstrap. Paste it in your code and see. Here is not working even its in bootstrap i don't know why? — Sagar Kodte, Commented Jan 5, 2016 at 10:23

Samyappa · Accepted Answer · 2016-01-05 10:01:44Z

0

<!DOCTYPE html>
<html>
    <body>
    <table border="1">
    <colgroup span="3">
    <col width="50"></col>
    <col width="100"></col>
    <col width="150"></col>
    </colgroup>
    <tr>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
    </tr>
    <tr>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
    </tr>
    </table>
    </body>
</html>

answered Jan 5, 2016 at 10:01

Samyappa

5332 silver badges11 bronze badges

Tables? What year is it?
– Polyducks
Commented Jan 5, 2016 at 10:34

Add a comment |

Polyducks · Accepted Answer · 2016-01-05 10:08:01Z

0

You need to make your divs a third of your total width to float in three rows, like so:

<div style="width:33.33333%; float: left;">
</div>

To add margins between your content, subtract that value from the width (remember, margins appear on both sides, so the number you subtract from your width will be double the margin).

<div style="width:30.33333%; float: left; margin: 1.5%;">
</div>

If you have access to your stylesheet, you could use the nth-of-type css selector to remove left margins on every 3n-1 and right margins on every 3n items, making them flush to the sides.

#yourselectorhere:nth-of-type(3n-1){
    margin-left: 0;
}
#yourselectorhere:nth-of-type(3n){
    margin-left: 0;
}

Please note that for the above to work you should wrap your boxed items in a div to separate them from the things you don't wish to be in the floated items (i.e. your header or other body content). If you give this wrapping div an ID, it'll also make it much easier to select your content using CSS.

Also:

box-sizing: border-box;

To prevent any unnecessary overflow from the border or padding of your boxes, I'd recommend using the style "box-sizing: border-box". This will restrict all your content to stay within the floated div without adding to the width of the box. (Additional padding and borders will be included within the 33.333% width of the div instead of adding their sizes onto the 33.333%).

Further, your content within the floating divs must have a percentage width, not a fixed pixel size. For example, your images must be 100% width, not 300px.

edited Jan 5, 2016 at 10:08

answered Jan 5, 2016 at 9:44

Polyducks

2132 silver badges13 bronze badges

and how about the border around the it?
– user5072259
Commented Jan 5, 2016 at 9:49
@RodelGarcia I'd recommend reading up on CSS at w3schools, which is a great start in CSS w3schools.com/css/default.asp. To answer your question, 'border:1px solid #555' - and you'll want to add 'box-sizing: border-box' to prevent that adding extra width to your floated content.
– Polyducks
Commented Jan 5, 2016 at 9:52
doesnt work for me. I messed up. jsfiddle.net/8d3ne4us can you try to fix it on JSFIDDLE for me. Also is it responsive?
– user5072259
Commented Jan 5, 2016 at 9:58
There are a few mistakes in your html - like ' being used interchangably with " which causes the page to fail. I've reworked it and changed the image widths to 100%. jsfiddle.net/4evo1rwk
– Polyducks
Commented Jan 5, 2016 at 10:06
@RodelGarcia also note that without the nth-of-type your margins will add up. To get three in a row you can reduce the width until it fits or use the nth-of-type rule which will require further manipulation on page resize using media queries if you wish to change how many columns are visible as the page changes.
– Polyducks
Commented Jan 5, 2016 at 10:10

Add a comment |

Sagar Kodte · Accepted Answer · 2016-01-05 10:21:10Z

use it. It's responsive with Bootstrap. I don't know what happening with this snippet but code is working properly with fully responsive.

 img{
	width:100%;
	}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Includes the following:</h3>

<div class="col-md-4 ">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>


</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-12">

<div class="col-md-4 ">


<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>
</div>
</div>

nmanikiran · Accepted Answer · 2016-01-05 10:38:19Z

  img {
    width: 100%;
  }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h3 class="text-center">Includes the following:</h3>
<div class="clearfix">
    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png " width="300 ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>
</div>

Tushar · Accepted Answer · 2016-01-05 10:56:41Z

Here is your require code

    
  <div>
    <h3>Includes the following:</h3>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 30%;float:left; margin-left:3px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>
    </div>

Collectives™ on Stack Overflow

Three column each row HTML

6 Answers 6

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Related