How to position two elements side by side using CSS

Question

I want to position a paragraph to the right of an  lt iframe gt  of a Google map   I do not know how to show my code  so here is a screenshot of what I want

User · Answer

Use either float or inline elements   Example JSBIN  HTML    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  head gt   lt body gt     lt div gt float example lt  div gt     lt div gt  lt div style  float left  gt Floating left content lt  div gt  lt div gt Some content lt  div gt  lt  div gt     lt div gt inline block example lt  div gt     lt div gt  lt div style  display inline-block  gt Some content lt  div gt  lt div style  display inline-block  gt Next content lt  div gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Put the iframe inside the  lt p gt  and make the iframe CSS  float left    display inline-block

User · Answer

Wrap the iframe in a class  float that left   The paragraph with then be forced up and to the right as long as there is room for it  Then set your paragraph to display inline-block  and add some left margin to tidy it up    lt div class  left  gt   lt img src  http   lorempixel com 300 300    gt   lt  --placeholder for iframe-- gt   lt  div gt   lt p gt Lorem Paragraph Text lt  p gt     left   float  left    p   display  inline-block  margin-left  30px       Here s a fiddle  http   jsfiddle net 4DACH

User · Answer

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   lt div class  google map  gt         lt iframe gt  lt  iframe gt   lt  div gt   lt div class  paragraph  gt         lt p gt  lt  p gt   lt  div gt   lt div class  clearfix  gt  lt  div gt

User · Answer

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

User · Answer

For your iframe give an outer div with style display inline-block  And for your paragraph div also  give display inline-block  HTML   lt div class  side  gt       lt iframe gt  lt  iframe gt   lt  div gt   lt div class  side  gt       lt p gt  lt  p gt   lt  div gt    CSS   side      display inline-block

User · Answer

None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container  the element to the right still gets moved below the one to the left instead of remaining next to it   To fix this  you can apply this style to the left element   position  absolute  width  50px    And apply this style to the right element   margin-left  50px    Just make sure that the margin-left for the right element is greater than or equal to the width of the left element   No floating or other attributes are necessary   I would suggest wrapping these elements in a div with the style   display  inline-block    Applying this style may not be necessary depending on surrounding elements  Fiddle  http   jsfiddle net 2b0bqqse   You can see the text to the right is taller than the element to the left outlined in black   If you remove the absolute positioning and margin and instead use float as others have suggested  the text to the right will drop down below the element to the left  Fiddle  http   jsfiddle net qrx78u20

User · Answer

give your boxes the class foo  or whatever  and add the css   foo      float  left

User · Answer

You can use float left to align div in one line   Fiddle

User · Answer

You can float the elements  the map wrapper  and the paragraph   or use inline-block on both of them

User · Answer

you can simple use some div to make a container and the display  flex  to make the content appear side-by-side like this   CSS    splitscreen       display flex     splitscreen  left       flex  1     splitscreen  right       flex  1      HTML   lt div class  splitscreen  gt       lt div class  left  gt           lt  -- content -- gt       lt  div gt        lt div class  right  gt           lt  -- content -- gt       lt  div gt   lt  div gt    using flex you say who will use more space on the screen

User · Answer

Like this   block       display  inline-block      vertical-align top      JSFiddle Demo

[html] How to position two elements side by side using CSS

Examples related to html

Examples related to css