CODEWITHSUNDEEP
htmlcssvertical-alignment
frosty
frosty

Reputation: 2649

Using vertical align to align the text to the top of the div

I'm trying to use vertical-align: top to align the text to the top of the div, but it's not working for some reason. What am I doing wrong?

#outer {
border: 1px solid black;
width: 100%;
height: 100%;
vertical-align: top;
}
img {
display: inline-block;
}
#message {
display: inline-block;
width: 50%;
}
<div id = 'outer'>
<img src = "https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
<div id = 'message'> 
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
</div>
</div>

Upvotes: 0

Views: 42

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

You need to set vertical-align on the text element rather than the container. The vertical-align directive aligns an element within a context, it doesn't affect the element's parents.

Working Live Demo:

#outer {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}
img {
  display: inline-block;
}
#message {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}
<div id='outer'>
  <img src="https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
  <div id='message'>
    message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message
    message message message message
  </div>
</div>

Upvotes: 2

Related Questions