overflow hidden moves another element

Question

.wrap{ position:fixed; left:0; top:45px; width:100%; text-align:center; background:gold; } .datewrap{ display:inline-block; margin:0 5px; border:2px solid red; overflow:hidden; } .btnow{ display:inline-block; background:green; color:white; margin:0 5px; border:2px solid red; }

<div class='wrap'> <div class='datewrap'>323232</div> <div class='btnow'>NOW</div> </div>

Why is btnow moved down? It should be inline with datewrap.

If I remove overflow:hidden from datewrap - it's ok.

But I need overflow:hidden on datewrap.

add vertical-align property to child div according to your requirement. This will help — Ram Ratan Bairar
– Ram Ratan Bairar, Commented Jun 29, 2018 at 6:13

Ehsan · Accepted Answer · 2018-06-29 09:07:51Z

When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.

for fix use of vertical-align: top; like this:

.btnow { vertical-align: top; //Other css }

.wrap{ position:fixed; left:0; top:45px; width:100%; text-align:center; background:gold; } .datewrap{ display:inline-block; margin:0 5px; border:2px solid red; overflow:hidden; } .btnow{ display:inline-block; background:green; color:white; margin:0 5px; border:2px solid red; vertical-align: top; }

<div class='wrap'> <div class='datewrap'>323232</div> <div class='btnow'>NOW</div> </div>

Hey Try to explain also why you added this and what is the meaning of this for readers.
@blueSky Why vertical-align: top; was added and what it does?
@NitinBisht, seems nobody knows. I can just say - CSS is full of such misterious behaviours.

oldboy · Accepted Answer · 2018-06-29 06:19:42Z

text-align really shouldn't be used to position elements. There are far better ways to achieve this.

I don't know why overflow is causing it to "teeter-totter", but below is some code to fix this.

.wrap{ display: flex; justify-content: center; /* and if you want to make sure the elements are always aligned vertically */ align-items: center; /* remember: justify-content will always control the same direction as the flex ** box; so, if the flex box is a row, justify-content will control the horizontal ** spacing and align-items will control the vertical spacing, but if the flex box ** is a column justify-content will control the vertical and align-items will ** control the horizontal. */ width: 100%; position: fixed; top: 45px; left: 0; background: gold; } .datewrap, .btnow { margin: 0 5px; display: inline-block; border: 2px solid red; } .datewrap{ overflow: hidden; } .btnow{ color: white; background: green; }

<div class='wrap'> <div class='datewrap'>323232</div> <div class='btnow'>NOW</div> </div>

AzarJad · Accepted Answer · 2018-06-29 06:38:43Z

.wrap{ position:fixed; left:0; top:45px; width:100%; text-align:center; background:gold; } .datewrap{ display:inline-block; margin:0 5px; border:2px solid red; overflow:hidden; } .btnow{ display:inline-block; background:green; color:white; margin:0 5px; border:2px solid red; position:inherit; }

<div class='wrap'> <div class='datewrap'>323232</div> <div class='btnow'>NOW</div> </div>

Temani Afif · Accepted Answer · 2018-06-29 08:10:39Z

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Reference Link: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

.wrap { position: fixed; left: 0; top: 45px; width: 100%; text-align: center; background: gold; } .datewrap, .btnow { display: inline-block; margin: 0 5px; border: 2px solid red; } .datewrap { overflow: hidden; vertical-align: bottom } .btnow { color: white; }

<div class='wrap'> <div class='datewrap'>323232</div> <div class='btnow'>NOW</div> </div>

Note: If you are writing code in real-time, you need to minimize your CSS.

Collectives™ on Stack Overflow

overflow hidden moves another element

4 Answers 4

12 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

Comments

Comments

Comments

Linked

Related