CODEWITHSUNDEEP
htmlcss
user2605793
user2605793

Reputation: 471

Two divs above and below each other stacked beside another similar pair of divs

I cannot seem to get these Google map divs to sit side by side. It was working fine until I decided to restructure it.

It consists of 4 divs, one above the other on the left and one above the other on the right. The two on the left are in their own container and the two on the right are in a container. Those two containers then sit side by side inside a bigger container.

It is all about being able to turn on and off the display of the individual sides (map vs pano) including the lat/long readout that sits above each map.

This is the earlier version that was working fine but was messy. To turn off the streetview pano for example I would have had to turn off two divs. 

<div style="float:left; width: 512px;">
    <table>
        <tr><td><b>Lat/Lng:</b></td><td id="mappos">-33.1234,150.1234</td></tr>
    </table>
</div>
<div style="float:left;">
    <table>
        <tr><td><b>Lat/Lng:</b></td><td id="svpos">-33.12345,150.12345</td>
        <td><b>Hdg:</b></td><td id="hdg">90</td></tr>
    </table>
</div>
<div style="clear:both;"></div>
<div style="width: 1024px; height: 512px">
    <div id="map" style="float:left; width: 50%; height: 512px;"></div>
    <div id="pano" style="float:left; width: 50%; height: 512px;"></div>
</div>

This is the new neater code that would supposedly allow easier switching on and off of each side but it does not work. The two pairs of divs sit on top of each other instead of side by side. It is no doubt an obvious error but I cannot spot it. I have looked at numerous other posts about side-by-side divs but cannot see what I am doing wrong.

Originally I had the left and right container divs specified with width 512px but when I tried to expand them to 1024px via Javascript it did not work. I therefore used 50%. When I change that to 100% followed by map resize it expands fine.

<div style="clear:both; width: 1024px;">
    <div id="mapdiv" style="float:left; width: 50%"></div>
        <div style="width: 512px;">
            Lat/Lng:&nbsp;<span id="mappos">-33.1234,150.1234</span>
        </div>
        <div id="map" style="width: 512px; height: 512px;">
        </div>
    </div>
    <div id="panodiv" style="float: left; width: 50%"></div>
        <div style="width: 512px;">
            Lat/Lng:&nbsp;<span id="svpos">-33.12345,150.12345</span>&nbsp;<span id="hdg">90</span>
        </div>
        <div id="pano" style="width: 512px; height: 512px;">
        </div>
    </div>
</div>

I thought it could be a padding issue. I tried increasing the width of the outer container to 1040 etc. but to no avail.

Here is a fiddle: http://jsfiddle.net/Lack10o0/

Upvotes: 1

Views: 593

Answers (3)

Enzo Mac
Enzo Mac

Reputation: 110

You have too many closing tags. Take out the </div> after <div id="mapdiv" style="float:left; width: 50%"> and after <div id="panodiv" style="float:left; width: 50%">

Here is the corrected code:

 <div style="clear:both; width: 1024px;">
        <div id="mapdiv" style="float:left; width: 50%">
            <div style="width: 512px;">
                Lat/Lng:&nbsp;<span id="mappos">Top left div</span>
            </div>
            <div id="map" style="width: 512px; height: 512px;">Bottom left div
            </div>
        </div>
        <div id="panodiv" style="float: left; width: 50%">
            <div style="width: 512px;">
                Lat/Lng:&nbsp;<span id="svpos">Top right div</span>&nbsp;<span id="hdg">90</span>
            </div>
            <div id="pano" style="width: 512px; height: 512px;">Bottom right div
            </div>
        </div>
    </div>

Upvotes: 1

Magnus Buvarp
Magnus Buvarp

Reputation: 976

Looks like you have a couple closing tags to many there. You have 7 opening divs and 9 closing divs. The faulty ones are probably the ones behind #mapdiv and #panodiv.

Upvotes: 0

lapin
lapin

Reputation: 2148

You just have to remove the unnecessary closing </div>s on line 2 and 9.

Edit : I updated your jsfiddle

Upvotes: 1

Related Questions