0

When I try to have my "vertical rule" to the right of the image, the image sticks to the bottom of the container.

Play Button

<div>
    <div style="display:inline-block; width:210px;">
        <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
    </div>
    <div style="display:inline-block; width:12px;">
        <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
    </div>
</div>

How can I achieve this, while keeping the image at the top?

2 Answers 2

1

the default positioning for inline-block elements is baseline. Set: vertical-align:top on your divs

<div>
   <div style="display:inline-block;vertical-align:top; width:210px;">
      <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
   </div>
   <div style="display:inline-block;vertical-align:top; width:12px;">
      <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
   </div>
</div>
0

I recommend using floats to put things side-by-side, but for a quick solution, just add vertical-align:top to the button div:

...
<div style="display:inline-block; width:210px; vertical-align: top;">
    <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
</div>
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.