How to position two elements side by side using CSS

by

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>

More Related Contents:

  1. How can i change the icon color to some other color in CSS?
  2. Unable to scroll on website
  3. How to Create Border In Css Iike
  4. CSS margin terror; Margin adds space outside parent element [duplicate]
  5. Make CSS Hover state remain after “unhovering”
  6. How create table only using tag and Css
  7. CSS Single-column layout centered fixed-width 100% height w header and footer
  8. Is there a way to remove a div but keep its elements?
  9. Generate repeating hexagonal pattern with CSS3
  10. Should I size a textarea with CSS width / height or HTML cols / rows attributes?
  11. Animating Linear Gradient using CSS
  12. How do change the color of the text of an within a ?
  13. Vertical (rotated) text in HTML table
  14. Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]
  15. Pure CSS Continuous Horizontal Text Scroll Without Break
  16. CSS position absolute and full width problem
  17. Size of font in CSS with slash
  18. Equal width columns in CSS Grid
  19. How to align entire html body to the center?
  20. How do I change the font-size of an element within ?
  21. Ticks for type=”range” HTML input
  22. How to make a radio button look like a toggle button
  23. Styling autocomplete dropdowns in browsers
  24. Giving background-color to body applying whole page. Why?
  25. Setting max-height for table cell contents
  26. click link below a higher z-index div [duplicate]
  27. Pseudo element not full container width when border used
  28. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  29. How to play CSS3 transitions in a loop?
  30. HTML canvas with scrollbar

Leave a Comment