CODEWITHSUNDEEP
htmlcss
woodenwaffles
woodenwaffles

Reputation: 35

Absolute positioned elements have same width but look different

I have 3 absolute positioned elements within a container, each with a width of 1px. However, these elements do not look to be all the same size when rendered. Why is this?

.container {
  position: relative;
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: 50px;
}

div > * {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0px;
  border: 1px solid red;
}

#child1 {
  left: -15px;
}

#child2 {
  left: -21px;
}

#child3 {
  left: -27px;
}
<div class="container">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

JSFiddle here

Here is what I see in my browser (using Chrome 102.0.5005.115):

enter image description here

The second child does not seem to be the same width as the other children.

Upvotes: 0

Views: 42

Answers (1)

Lemirq
Lemirq

Reputation: 103

Looks like a bug on your browser. For me, the code snippet works on Chrome(Version 103.0.5060.53), Firefox (Version 102.0), and Safari(Version 15.5).

I suggest updating Chrome from chrome://settings/help.

Upvotes: 1

Related Questions