CSS – WordPress placing two iframes side by side with text

2 Views

I am by no means a website coding expert and this is literally my first time messing with such code.

I’m running a wordpress site for my club and I need to do the following:

Read More

1.) Place two google map iframes one below the other (with a small space in between ideally) and on the right hand side of the page.

2.) Place a few lines of text describing the maps/venues from above in line and to the left of the maps.

Here’s my attempt: 

<div style="float: left; width: 200px;">Little Venice Sports Centre
10 Crompton Street
W2 1ND
Tel: 020 7641 5111</div>
<div style="float: right; width: 425px;"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe></div>

<div style="float: left; width: 200px;">Ethos Sports Centre
7 Prince's Garden
SW7 1NA
Tel: 020 7594 0910</div>
<div style="float: right; width: 425px;"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.713596042022!2d-0.17350875000000218!3d51.500123050000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487605448bddeb47%3A0x9a96da198601f824!2sEthos+Sports+Center%2C+Knightsbridge%2C+London+SW7%2C+UK!5e0!3m2!1sen!2sae!4v1440265942096" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

My intention

Post Views: 2

Related posts

1 comment

  1. You need to place both iframes, with the information, in seperate divs, then use CSS position to position the iframes to the right

    http://jsfiddle.net/jofish999/h3eqeq04/

    <div class="map">
    <div style="float: left; width: 200px;">
    Little Venice Sports Centre
    10 Crompton Street
    W2 1ND
    Tel: 020 7641 5111
    </div>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe>
</div>
<br>
<div class="map">
    <div style="float: left; width: 200px;">
    Little Venice Sports Centre
    10 Crompton Street
    W2 1ND
    Tel: 020 7641 5111
    </div>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe>
</div>

    .map {
    width: 800px;
}
iframe {
   position: relative;
    right: -150px;
}

Comments are closed.