CODEWITHSUNDEEP
html
mameesh
mameesh

Reputation: 3761

2 headers lined up with 2 images side by side

I have the following HTML structure currently:

 <div id="image" style="margin: 20px;">
        <h5>
          <span>DriverName1</span>
          <span>DriverName2</span>
        </h5>
        <img src=/>
        <img src= />
    </div>

I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.

Upvotes: 0

Views: 48

Answers (1)

Geeky
Geeky

Reputation: 7498

you can consider using display:flex for this

check the following snippet

div{
  display:flex;
 }
.image {
  display: flex;
  flex-direction: column;
  border:1px solid;
  margin-left:10px;
}
img {
  width: 100px;
  height: 100px;
}
<div id="image" style="margin: 20px;">
  <section class="image">
    <header>DriverName1</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
  </section>
  <section class="image">
    <header>DriverName2</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
  </section>
</div>

Non-flex solution

div * {
  display: inline-block;
}
.image {
  border: 1px solid;
  margin-left: 10px;
}
img {
  width: 100px;
  height: 100px;
  display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
  <section class="image">
    <header>DriverName1</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
  </section>
  <section class="image">
    <header>DriverName2</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
  </section>
</div>

Hope this helps

Upvotes: 1

Related Questions