I am working with an svg logo that I want to split into two halves, where each half redirects to a different page when clicked. After cutting the logo in illustrator and attempting to match the pieces together, I encountered an issue.
<div id="lobby">
<div id="jekyll">
<a href="#" >
<img src="lobby/jekyll.svg" alt="dr.Jekyll">
</a>
</div>
<div id="hyde">
<a href="#" >
<img src="lobby/hyde.svg" alt="mr.Hyde">
</a>
</div>
</div>
CSS
#jekyll{
float:left;
width:50%;
}
#hyde{
float:right;
width:50%;
}
Despite matching perfectly at the top, the images start to mismatch towards the bottom. I've even tested this technique on a simpler image with the same result. Is there a correct way to achieve this or perhaps an alternative approach? http://codepen.io/anon/pen/YXdymZ