We would like to know how to create Inline-Block Div Alignment with Inline Content.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
header {<!--from ww w . j a v a 2 s. c o m-->
width: 100%;
height: 800px;
background-color: gray;
}
#titlebar {
width: 100%;
height: 200px;
background-color: black;
}
#titlename {
width: 49.5%;
height: 100%;
background-color: white;
opacity: 0.90;
display: inline-block;
vertical-align: top;
}
#titlemenu {
width: 49.5%;
height: 100%;
background-color: blue; opacity 0.90;
display: inline-block;
}
</style>
</head>
<body>
<header>
<div id="titlebar">
<div id="titlename">
<h1>Title Name Here</h1>
</div>
<div id="titlemenu">
<span>Item One</span><span>Item two</span>
</div>
</div>
</header>
</body>
</html>
The code above is rendered as follows: