I’m messing around with doing some markup and inline CSS to prototype for a design. I’m still a bit new to the finer details of CSS/HTML interaction but basically I want to create a header for the site that has a banner logo on the left “half” and a button soliciting donations on the right hand part.
The banner itself is larger than the button graphic as would be expeted and I want to place the button halfway down inside the containing div/document and halfway on the “right side” of the page but without using hard coded pixels or ems. I’m using inline css to just prototype the ideas out so no need to worry on that :-
<div><img src=”logo.jpg” name=”logo” id=”logo” style=”float: left”>
<p style= “position:relative;top:50%;left:75%;”><ahref=”
<img src=”prettybutton.gif” alt=”DonateNow” border=”0″></a></p></div>
As you can see, I’ve also set the inline image into float to get it to the left and allowed the encloding paragraph to position itself after that. But the percentages are not working at all. If I switch over to regular pixel offsets, like 25px, for instance, it offsets. does percentage not reliably work in firefox?
Anybody have any ideas why?