Vertical Align top two divs not working

StackOverflow https://stackoverflow.com/questions/21839416

  •  12-10-2022
  •  | 
  •  

Question

Can anyone help me with aligning my two divs? What did I do wrong? I have two inline blocks as my divs and am trying to align them at the highest point of the element side by side. 

<body>
    <ul id="navbar">
        <li><a href="#skills">Skills</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a><li>
    </ul>

    <div id="intro">
        <p>HELLO</p>
    </div>

css:

#navbar {
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
    }

#intro {
display:inline-block;
width:40%;
vertical-align:top;
}
Was it helpful?

Solution

Add margin-top: 0 or any other preferred size (ie margin-top: 20px;) to both IDs.

Ex. http://jsfiddle.net/K9K2X/6/

OTHER TIPS

<ul id="navbar">
 <li><a href="#skills">Skills</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#contact">Contact</a></li> <!-- Forgot to close the element -->
</ul>

#navbar li{
    display:inline-block;
    margin-left:25%;
    list-style-type:none;
    vertical-align:top;
    width:12%;
}

The links are side-by-side now.

http://jsfiddle.net/K9K2X/8/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top