The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Cant get these DIV's to go side by side
Terminator
post Dec 12 2015, 04:06 PM
Post #1


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



I cant get these DIV's to go side by side on desktop view. I have tried everything that I know of, but it must have something to do with the Google Map embedding code.

http://collins.mrwdesign.net/contact.htm

This is done as responsive so the Store Hours fall below the Google Map when viewing on portrait view. However on Desktop PC this page is supposed to look like this:

http://collins.mrwdesign.net/img/misc/map-2.png

Here is the code I am using for the Map DIV:

CODE


.embed-container {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



Putting float: left on that DIV deleted the entire map.

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 12 2015, 11:32 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



Floating the contact div left doesn't help because it's already under the map. It just floats to where it is anyway. Besides, didn't you want it too the right? Even if it had worked, obviously there isn't room for both the map and the contact div side by side.

There is so much going on there that my head spins at this late hour. Just wanted to tell you what I did see at a quick glance.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 13 2015, 09:32 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Set the rendered width and height to the map's iframe, 504 and 378 pixels respectively.

Set the same width and height to the .embed-container and add float: left; and maybe a margin-right (10 or 20px?) there too. That margin will give some space between the map and text.
But, get rid of the padding-bottom: 75%;.

Then, add a width to the .contact div. Any width larger than its content (of 252px) is ok.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 13 2015, 09:44 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



But the map isn't floated and it must be to get Contact to the right of it if Contact is floated left. And if you try to float the map or its container it disappears.

I have a feeling there's a lot of superfluous styling but I'm not really up to retyping the whole thing (even if I can use shift 'onehandedly' now when typing text, HTML is bothersome).
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Dec 13 2015, 11:31 AM
Post #5


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



I can put float: left; on the 2nd part (.embed-container iframe, etc) but that does not do anything. Putting float: left; on .embed-container immediately deletes the embedded map. Also removing padding-bottom: deletes the map.

Putting a max-width on .contact, even a small one like 200px makes the embedded map real small even though it is a different DIV.

Also if I reverse the DIV's, put the .contact 1st and embedded map 2nd, the map again is deleted off the page.

There is something with the embedded map code or styling that is causing this.

For now I centered the entire page to keep the map on top. The contact page looks great on mobile but not the best on desktop.

This post has been edited by Terminator: Dec 13 2015, 11:31 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 13 2015, 12:53 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



You have too much already. KISS.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 13 2015, 01:11 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



What browser are you using? If you follow all my instructions, it works fine in Safari on Mac (I made those changes using Safari's Web Inspector); though not the latest version as I'm still on an older Mac OS.

But, if you want to keep it as you have it now, then that's fine by me too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Dec 13 2015, 02:08 PM
Post #8


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



QUOTE(Frederiek @ Dec 13 2015, 02:11 PM) *

What browser are you using? If you follow all my instructions, it works fine in Safari on Mac (I made those changes using Safari's Web Inspector); though not the latest version as I'm still on an older Mac OS.

But, if you want to keep it as you have it now, then that's fine by me too.


I am using Windows, and tested it in Chrome, Firefox, and IE, all the latest versions. I would want it to work the same on Windows and Mac, so this might be browser specific.

I don't really like the way this contact page looks on desktop, so I might remove the map totally.

This post has been edited by Terminator: Dec 13 2015, 02:10 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 14 2015, 11:16 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



It seems to me that a map is quite necessary for an auto repair business. At least then customers will know where to bring their car after making an appointment.

You might make a screenshot of the map, to make things a little easier. Make it the size you want in a graphic program and use it as inline image, instead of loading the Google Maps page in an iframe.

Make a simple test page, with just the map and contact parts and necessary HTML and CSS, using my earlier instructions. Then, I can test that again, in Safari and Firefox. And we'll see from there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 14 2015, 11:41 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



Look, remove some HTML as below. Remove ALL styling you have for the map and contact bit and try just the below. Then add back what styling you actually need, like some margin and padding here and there and remove the bullets on the list and so on. Do not put positioning, display and overflow stuff back. Note that width and height in HTML for the iframe is also gone.

The contact section will float below the map if the window gets too small, but not before. Try this on it's own first in an otherwise blank HTML page with no other styling so you can see that it works.

I replaced part of the URL to the map with ***** so the line can break here at the forum. So you need to put that back.


<section class="sectionctr">
<iframe src="https://www.google.com/maps/embed?pb=*****" style="border: none; width: 45%; min-width: 450px; height: 450px; float: left" allowfullscreen></iframe>
</section>

<section class="sectionctr3" style="float: left; width: 45%">
<ul class="list1">
<li><h2 class="cont">Contact Us</h2></li>
<li><h4 class="cont2">Collins Auto Repair</h4></li>
<li>528 Anderson Road</li>
<li>Dallas, TX 75201</li>
<li>p: (214)001-0082</li>
<li>f: (214)002-0085</li>
<li><a href="mailto:contact@collinsauto.com" title="Email">
<img src="img/main/email.png" class="lft3" alt="Email" title="Email">contact@collinsauto.com</a></li>
</ul>

<ul class="list1">
<li><h2 class="cont">Shop Hours</h2></li>
<li><span class="adr1">Monday to Friday:</span> 8am to 7pm</li>
<li><span class="adr1">Saturday:</span> 8am to 6pm</li>
<li><span class="adr1">Sunday:</span> 8am to 5pm</li>
</ul>
</section>

<!-- Site Map -->
<section class="sitemap" style="clear: both">
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Dec 14 2015, 08:39 PM
Post #11


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



QUOTE(Frederiek @ Dec 14 2015, 12:16 PM) *


You might make a screenshot of the map, to make things a little easier. Make it the size you want in a graphic program and use it as inline image, instead of loading the Google Maps page in an iframe.



I did that already and it was very easy to get it in the right spot.

http://collins.mrwdesign.net/img/misc/map-2.png

The issue appears to have to do with the Google Map embedding code.

QUOTE(pandy @ Dec 14 2015, 12:41 PM) *


I replaced part of the URL to the map with ***** so the line can break here at the forum. So you need to put that back.



This got them side by side without any padding, however the Google Map is not responsive with this code. When the page was resized the map did not shrink down. Putting max-width did not work either.

That extra code in the original post is what makes the map responsive, but it also blocks from anything being directly next to the map. The original idea was for a responsive map to use on mobile devices, which this is, but it just seems that it can go exactly where I want to put it for desktop.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 14 2015, 08:54 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



Remove the min-width then if that's what you want.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 15 2015, 05:59 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I didn't test Pandy's HTML. But with the current centred page, I made the following changes to the CSS:
CODE
.sectionctr2 {
    padding: .7em;
    max-width: 600px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    float: left;
    width: 504px;
    height: 378px;
}

.embed-container {
    /* position: relative; */
    /* padding-bottom: 75%; */
    /* height: 378px; */
    /* width: 504px; */
    /* overflow: hidden; */
}

.embed-container iframe {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
}

.sectionctr3 {
    padding: 1em;
    max-width: 600px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    width: 300px;
    float: left;
}

And set the iframe to width="504" and height="378".

Then the parts will be side by side and will adapt till a screen size of approximately 565px.
You might have to make some adaptations inside media-queries for smaller screens.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd October 2019 - 04:02 PM