CODEWITHSUNDEEP
htmlcss
Zach Gates
Zach Gates

Reputation: 4130

Why does my image stick to bottom of container?

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?

Upvotes: 0

Views: 78

Answers (2)

kennypu
kennypu

Reputation: 6051

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

Upvotes: 0

jmore009
jmore009

Reputation: 12923

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>

Upvotes: 1

Related Questions