Two elements getting on top of each other on zoom in - html

Question

As the title says: I have two elements (images) that get on top of each other when I zoom in.the img on the left is the logo and the one on the right is a leaderboard size image.
<div style="max-height:90px;margin-bottom:20px;display:block;">
<p style="max-height:90px;width:330px;float:left;">
<a href="#">
<img src="#" />
</a>
</p>
<p style="float:right;">
<a href="#" target="_top">
<img src="#" width="728" max-height="90" alt="Image" border="0" />
</a>
</p>
</div>

Answer 1

I believe the left image is of fixed width and the right leaderboard ad would have a variable width. It is better to use a fixed-fluid layout using positions for this:
header {position: relative; padding-left: 110px;}
header h1 {position: absolute; left: 0; top: 0; margin: 0;}
a, img {vertical-align: top; display: inline-block;}
header aside img {max-width: 100%;}
<header>
<h1>
<a href="#">
<img src="//placehold.it/100x50?text=Logo" />
</a>
</h1>
<aside>
<a href="#" target="_top">
<img src="//placehold.it/728x90" width="728" alt="Leader Ad" />
</a>
</aside>
</header>
However you zoom, it retains it well:
Normal View
Zoomed In View