/    Sign up×
Community /Pin to ProfileBookmark

Really simple question…am I missing something?

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&#37;;left:75%;”><ahref=”https://donationurl.org/donate.php“>
<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?

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@FangMar 09.2010 — &lt;div style="position:relative; float: left"&gt;&lt;img src="logo.jpg" name="logo" id="logo"&gt;
&lt;p style= "position:absolute;top:50&amp;#37;;left:75%;"&gt;&lt;ahref="https://donationurl.org/donate.php"&gt;
&lt;img src="prettybutton.gif" alt="DonateNow" border="0"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@TrivDogsauthorMar 09.2010 — &lt;div style="position:relative; float: left"&gt;&lt;img src="logo.jpg" name="logo" id="logo"&gt;
&lt;p style= "position:absolute;top:50%;left:75%;"&gt;&lt;ahref="https://donationurl.org/donate.php"&gt;
&lt;img src="prettybutton.gif" alt="DonateNow" border="0"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
[/QUOTE]


Thank you! I just had to put the float:left back into the logo image tag instead of floating the whole containing div as you did, but otherwise it works. So relative positioning can be used to absolutely position block elements RELATIVE to the relatively positioned containing element, WHILE USING PERCENTAGES.
×

Success!

Help @TrivDogs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...