HTML Element Style How to - Create Image Panel with Floats

Question

We would like to know how to create Image Panel with Floats.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.tab-content {<!--from   w  w  w.j  av a  2  s. co  m-->
  padding: 0px;
  background-color: yellow;
  overflow: auto;
}

.team {
  float: left;
  margin: 0 5px 5px 0;
}

.team img {
  display: block;
}
</style>
</head>
<body>
  <div class="tab-content" id="tabs1">
    <div id="team_A" class="team">
      <img src="http://placehold.it/350x150">
    </div>
    <div id="team_B" class="team">
      <img src="http://placehold.it/350x150">
    </div>
    <div id="team_C" class="team">
      <img src="http://placehold.it/350x150">
    </div>
    <div id="team_D" class="team">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: