I'm attempting to format two blocks with varying lengths using inline-block, but block-1 is getting aligned with the length of block-2. I need to keep the height of block-1 at 100px.
Check out this jsfiddle for reference:
http://jsfiddle.net/CGHZ5/5/
Here's the HTML code:
<div id="id1">
<div id="id1-test">
</div>
</div>
<div id="id2"></div>
And the CSS styling:
#id1-test{
background-color: red;
float: right;
height: 15px;
width: 10px;
}
#id1{
background-color: blue;
display: inline-block;
height: 100px;
width: 200px;
}
#id2{
background-color: green;
display: inline-block;
height: 200px;
width: 300px;
}