CODEWITHSUNDEEP
htmlcss
user7489286
user7489286

Reputation:

Unable to define width of absolute container's children

I am trying to define the width of a few divs nested within an absolute parent. Their width is defined but does not appear to be taken in consideration by the browser. Any ideas of what it is I am missing (or doing wrong)? Thank you all in advance for your time and attention.

HTML

<div class="icons-container">
  <div>
    <img src="img/2d.svg" alt="2d animation icon">
  </div>
  <div>
    <img src="img/3d.svg" alt="3d animation icon">
  </div>
</div>

CSS

.icons-container {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
}

.icons-container div {
  width: 150px;
  margin: 0 2px;
  background: rgba(0,0,0,0.5);
  display: inline;
  vertical-align: middle;
  border: 1px solid #fff;
}

.icons-container div img {
  width: 50px;
}

Upvotes: 2

Views: 30

Answers (2)

Conan
Conan

Reputation: 2709

Update .inline to .inline-block:

.icons-container {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
}

.icons-container div {
  width: 150px;
  margin: 0 2px;
  background: rgba(0,0,0,0.5);
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #fff;
}

.icons-container div img {
  width: 50px;
}
<div class="icons-container">
  <div>
    <img src="img/2d.svg" alt="2d animation icon">
  </div>
  <div>
    <img src="img/3d.svg" alt="3d animation icon">
  </div>
</div>

Upvotes: 3

simoncereska
simoncereska

Reputation: 3043

use display inline-block instead of inline

Upvotes: 1

Related Questions