overflow hidden moves another element - html

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.

Answer 1

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>

Answer 2

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>

Answer 3

.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>

Answer 4

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.