How to position two elements side by side using CSS

Question

I want to position a paragraph to the right of an <iframe> of a Google map.

I do not know how to show my code, so here is a screenshot of what I want:

Answer 1

Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):

css

.google_map{     width:55%;     margin-right:2%;     float: left; } .google_map iframe{    width:100%; } .paragraph {     width:42%;     float: left; } .clearfix{     clear:both } 

html

<div class="google_map">       <iframe></iframe> </div> <div class="paragraph">       <p></p> </div> <div class="clearfix"></div> 

Answer 2

You have two options, either float:left or display:inline-block.

Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.

Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.