Two-Columns with Hover - html

Question

How can I get the content in a two-column area to line up correctly? Here is a link to the page showing the content in question. After I get the two divs to line up, then I will try to add the yellow arrow that is seen in the single-column version. That will likely be another question when the time comes.
Here's the CSS
#half-box-container {
overflow:auto;
width: 100%
}
#half-box-left, #half-box-right {
width: 50%;
margin:5px;
padding: 1em;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
#half-box-left {
float:left;
}
#half-box-right {
float:right;
}
#half-box-content
{
left: 30px;
top: 0;
color: #39275b;
font-size: 100%;
}
Here's the HTML that I'm using.
<div id="half-box-container">
<div id="half-box-left">
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Left Headline</h5>
Content goes here.
</div>
</div>
<div id="half-box-right>
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Right Headline</h5>
Content goes here.
</div>
</div>
</div>

Answer 1

As developer3466402 said, you didn't close the ID of half-box-right. Also you're not supposed to have two elements with the same ID. A browser can only display that as correctly as it can interpret it, and there is only supposed to be one object for each id. Try using classes for the child elements instead.
The reason they won't line up on the same line is when you add the padding and margin, their added widths exceed 100% of the width they can use, so they go on different lines. One reason is that they're using the content-box box-model, which makes the padding go outside of the boxes. This is what you're going to want to do:
#half-box-left, #half-box-right {
width: 50%;
padding: 1em;
box-sizing:border-box;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
This will put the padding inside the element instead of outside. If you don't want to remove the margins from the elements, you can instead simply make the widths smaller than 50%, provided that makes them small enough to escape those 20px of added width they use together.

Answer 2

Looking in the page you linked I saw you forgot to close the ID name of "half-box-right". I guess it is the problem.
Also you can reduce the width for both half-box-right and half-box-left to 38% for they be side by side instead of the right be bellow the left div.