Is there a text book way to position smaller elements contained within the design?

 

See screenshot of the learn more button and contact us button, usually to get those side by side i would put them both in their own div float left and then get them where i want with padding or margins, i understand this is a sloppy way to do it? (or is it?)

 

Naturally the elements are positioned in rows. see my code

 

                               <div class="span8">

				<div class="learn-more"><p><a href="#">Learn more</a></p></div>

				<p class="featured-link"><a href="#">Contact us today!</a></p>

			</div>

 

 

So i want the <p> element to be inline and perfectly centered vertically with learn more button. So is using floats messy? is there a 'correct' way to do it?

Edited January 6, 201214 yr by Uplift

I think i managed it

 

Instead of using a div i applied all styling directly to the hyperlink, it looks like removing the block element places the 2 hyperlinks inline, so it's pretty exactly how i want it without any positioning.

 

				<div class="span8">

				<a href="#" class="learn-more">Learn more</a>

				<a href="#" class="featured-link">Contact us today!</a>			

			</div>

I would recomend adding:

 

display: inline;

 

Just in case a browser renders the default differently.