Vertical align: top in div

<!DOCTYPE html>
div {
<div style="background:pink">top</div> <div style="background:yellow">1st line<br>
2nd line</div>

I have a code above at
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
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?

Hi there joon1,

try it like this…

<html lang="en">

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


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




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:

Thank you. It works fine.
I have one more question on this.
Although “vertical-align:top” does work at,
“vertical-align:middle” seems NOT to work at

Why doesn’t “vertical-algn:middle” work at
Can I make it work with your help?

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

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