CODEWITHSUNDEEP
htmlcss
maxichrome
maxichrome

Reputation: 69

div is not taking up all its physical space

Visually, the div element displays as intended. However, the actual div (wrapped in an a link) spans across the whole page. Here's an illustration of what I mean:

descriptive illustration

The button is an image file, if that helps.

HTML:

<a href="../SpeedUp.zip">
    <div class=download>
        <img class=download src="../img/download.png"></img>
    </div>
</a>

CSS:

div.download {
  height: 100px;
  width: 200px;
  cursor: pointer;
  background: linear-gradient(#8ab081, #77ab59);
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  padding: 15px;
}

div.download:hover {
  background: linear-gradient(#8db87c, #88aa8a);
}

img.download {
  height: 100px;
  width: 200px;
}

Thanks, SO!

Upvotes: 0

Views: 828

Answers (1)

Liftoff
Liftoff

Reputation: 25372

Divs are block elements, which means that they can't occupy the same line with any other elements.

While you changed the width of the element to be only 200px, your browser will automatically place margin directly to the right of the div to fill the rest of the space of that line.

If you want to allow divs to wrap with other elements, you can set the display to inline-block:

div.download
{
    display: inline-block;
}

Upvotes: 2

Related Questions