Help - Search - Members - Calendar
Full Version: Putting a DIV to the right of Google Map
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Terminator
I have embedded a Google Map on a site for a class project, and am trying to put some text content to the right of the map, but I cant get it to work. In order to make the Map responsive I had to wrap the .maps DIV within another DIV called .mapwrap

I want to put a different DIV next to .mapwrap to provide company address info, but it falls below the DIV instead of to the right of it. If I put float: left; on the .mapwrap it deletes the entire Google Map. Maybe it has to do with the position code in the CSS?

I'm not sure what to put to float it because the usual does not seem to work on this one.

CODE

.maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mapwrap {
    max-width: 500px;
}

pandy
Need to see the whole thing.
Terminator
QUOTE(pandy @ Nov 30 2015, 12:57 AM) *

Need to see the whole thing.


Here is the HTML. I have not styled the second "contact" DIV yet, but below is also the styling for that "main" section as well as the body.

CODE

<!-- Google Map -->
            <section class="main">
                <div class="mapwrap">
                    <div class="maps">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d26833.368056767653!2d-96.81615950537402!3d32.78772470445962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x864e992365832e5b%3A0xd2a969e7a90b73f6!2sDallas%2C+TX+75201!3m2!1d32.7863301!2d-96.79625279999999!5e0!3m2!1sen!2sus!4v1448823928727" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                </div>
                
                <div class="contact">
                ***Going to put contact info here*****
                </div>
                
            </section>


This Google Map HTML falls within the body, wrapper, and main styles from below:

Also I just noticed, if I am using a background image that falls outside of the wrapper like below, I guess I don't need background-color: #ffffff; under body do I? The same #ffffff is under the wrapper code

CODE

body {
    font-family: Verdana, Geneva, sans-serif;
    color: #000000;
    background-color: #ffffff;
    width: 100%;
    max-width: 960px;
    min-width: 320px;
    background: url(img/main/bg.png);    
    margin: 0 auto;
    position: relative;
}

div#wrapper {
    width: 95%;
    margin: 0 auto;
    background: #ffffff;
}

.main {
    margin: .3em;
    padding: .3em;
}



But putting any float or inline-block codes in the .mapwrap deletes the entire map. I wonder if it has to do with the position code on these.

The map embedding code comes straight from the Google Map site, I did not change that part at all.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.