CODEWITHSUNDEEP
htmlcss
bill lcinton
bill lcinton

Reputation: 61

Multiple divs on the same line

I have this totally gnarly fansite about The Rolling Stones. There is an image gallery on it, where we post the LP covers of all of the Stones' albums. Each image is held within a div to instruct the reader that, if clicked, they will be redirected to the full size image

These divs automatically take up their own lines instead of sitting next to each other. How would someone go about that?

here's the code

<a href="selftitled.html"><div class="imgWrap">
<img src="images/albums/selftitled.jpg" width="250" 
height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="12x5.html"><div class="imgWrap"><img src="images/albums/12x5.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="now.html"><div class="imgWrap"><img src="images/albums/now.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>

Upvotes: 5

Views: 14421

Answers (3)

luk492
luk492

Reputation: 368

And the third answer, put each div in a column of a table in the same row.

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        <a href="selftitled.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/selftitled.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>

          </div>
        </a>
      </td>
      <td>
        <a href="12x5.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/12x5.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>
          </div>
        </a>
      </td>
      <td>
        <a href="12x5.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/12x5.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>
          </div>
        </a>
      </td>
    </tr>
  </table>
</body>

</html>

Upvotes: -1

BurningLights
BurningLights

Reputation: 2397

Divs by default are block elements, which take up the entire width of the page. To make them take up only the space they need, you can add to your imgWrap class:

display: inline-block

which will cause them to be able to display on the same line. I would suggest that this is a better solution than floating, since floating removes the elements from normal document flow and can cause other display issues. Other content won't necessarily flow around it properly. Displaying them as inline-block keeps them in normal document flow, so other content automatically arranges itself properly around them.

Upvotes: 5

knnku
knnku

Reputation: 21

Add a class that sets each of the divs to:

float: left;

This causes elements to sit beside each other in one line.

http://www.w3schools.com/cssref/pr_class_float.asp

.floatleft {
  float: left;
}
<a href="selftitled.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/selftitled.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <br>TO
      <br>ENLARGE</p>
</a>
</div>
<a href="12x5.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/12x5.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <br>TO
      <br>ENLARGE</p>
</a>
</div>
<a href="now.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/now.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <

Upvotes: 2

Related Questions