How to edit this code? Google Map - it should be sticky not floating

Question

I have prepared this piece of code. I would like to change two things: 1) width:100% -> doesn't work 2) It should be sticky not floating on my website. How to change this?

<div style="overflow:hidden;width: 1800px;position: relative;"><iframe src="https://maps.google.com/maps?height=300&amp;hl=en&amp;q=United%20Kingdom+(Map)&amp;ie=UTF8&amp;t=&amp;z=5&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div>

I have added to my style.css:

iframe {
    width:100%;
    height:300px;
}

But If I am changing <div style="overflow:hidden;width: 1800px; to <div style="overflow:hidden;width: 100%; My map is gone.

Does this answer your question? [How can I make a div stick to the top of the screen once it's been scrolled to?](https://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — Justinas, May 05 '20 at 07:38
I have added to my style.css: iframe { width:100%; height:300px; } — ggame, May 05 '20 at 07:40
What do you mean by sticky and floating? Can you show us some more of your html? You call your map with the parameters `width=800&height=300`. Remove `width=800&` to have it at 100% width — Tad Wohlrapp, May 05 '20 at 07:42

score -1 · Accepted Answer · answered May 05 '20 at 07:53

Don't use width: 1800px as it will produce horizontal scrollbars more often than not. Use width: 100% instead.

I added width: 100%; height: 300px to both the div and the iframe. Still not entirely sure what you mean by "sticky not floating". Just in case, I added position: sticky to the div, so the map stays on top of the viewport at all times.

body {
  margin: 0;
  padding: 0;
}

.map__container,
.map__iframe {
  width: 100%;
  height: 300px;
}

.map__container {
  overflow: hidden;
  position: sticky;
  top: 0;
}

<div class="map__container">
  <iframe class="map__iframe" src="https://maps.google.com/maps?height=300&amp;hl=en&amp;q=United%20Kingdom+(Map)&amp;ie=UTF8&amp;t=&amp;z=5&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>This
is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>This
is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>

How to edit this code? Google Map - it should be sticky not floating

1 Answers1