Paul Schneider Paul Schneider - 6 months ago 20
CSS Question

Positioning a div between two buttons

I'm trying to have a remote control with some buttons, and a div with the now playing info between two of them.

but it doesn't work.

it looks like this in FF with ipad settings (this is how i want it)

but looks like this on an actual ipad..

as you can see, on an actual ipad, it renders differently, and i don't know how to fix it.

html:

<div id="buttons">
<button id="prev" class="control" onmousedown="skip('prev')"></button>
<div id="info"> gfegrbhthehrerhg</div>
<button id="next" class="control" onmousedown="skip('next')"></button><br />


<button id="rwd" class="control" onmousedown="changeSpeed(-2)"></button>
<button id="stop" class="control" onmousedown="emitCommand('stop')"></button>
<button id="play" class="control" onmousedown="emitCommand('play: loop: true speed: 100')"></button>
<button id="ffwd" class="control" onmousedown="changeSpeed(2)"></button>




css:

button.control {
display: inline-block;
width:150px;
height:150px;
background-size: 150px 150px;
border:0;
margin: 0.5%;
}

div#info {
width:300px;
height: 150px;
margin: 0 1.1%;
position: relative;
top: -58px;
margin-bottom: -50px;
border:1px solid red;
display: inline-block;
}

button#prev {
margin-left: 160px;
}

button#rwd {
margin-left: 160px;
}


#buttons {
margin: 0 auto;
border: 1px solid lightgray;
}


what am I doing wrong? what is the correct way to accomplish this?
Thanks

Answer

Add

vertical-align: top; to div#info

And remove the top: -58px; from div#info too

Here's a link to a working example: EXAMPLE LINK