Vertical align: top in div

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
<style>
div {
background:cyan;
display:inline-block;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<div>
<div style="background:pink">top</div> <div style="background:yellow">1st line<br>
2nd line</div>
</div>
</body>
</html>

I have a code above at http://form.kr/dest/t01.php.
The pink box which has the text “top” is , at the moment, on the bottom of the cyan box.
I like to put the pink box is on the top of the cyan box.
So I try to add “vertical-align:top” in the cyan box at http://form.kr/dest/t02.php.
However, it seems not to work as I want.
I don’t know why the code “vertical-align:top” does not work.
Can I make the pink box put on the top of the cyan box by your help?

2

Hi there joon1,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
#container, #container div {
    display: inline-block;
    border: 1px solid #000;
    background-color: #0ff;
 }
 
#container div:first-of-type {
    vertical-align: top;
    background-color: #ffc0cb;;
 }
 
#container div:last-of-type {
    background-color: #ff0;
 }
</style>

</head>
<body> 

<div id="container">
 <div>top</div> 
 <div>1st line<br>2nd line</div>
</div>

</body>
</html>

coothead

2 Likes
3

If you wanted to align the pink box to the top then why did you apply the rule to something else instead?

Just apply the vertical-align to the pink box and it would have worked.

<div style="background:pink;vertical-align:top">top</div>

See the code by @coothead for a full solution :slight_smile:

4

Thank you. It works fine.
I have one more question on this.
Although “vertical-align:top” does work at http://form.kr/dest/t02-01.php,
“vertical-align:middle” seems NOT to work at http://form.kr/dest/t02-02.php

Why doesn’t “vertical-algn:middle” work at http://form.kr/dest/t02-02.php?
Can I make it work with your help?

5

Yes you need to apply it to the yellow div as well.

<div style="background:yellow;vertical-align: middle;">1st line<br>
2nd line</div>

Vertical-align is a bit weird at times and these days you would generally use flex boxes.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.