Question

I’m trying to get a 2-column (3 panes = 2 + 1) layout in a web page with the left pane showing Google maps and some data (details div) below it and the right column some data (results div), but I’m not able to get the (results) data div to align to the right of the Google map. It displays below the Google map right of the details div. This is my code:

CSS code:

#map_canvas {
    margin: 10px 10px 10px 10px;
}
#details {
    width: 45%;
    height: 20em;
}
#results {
    width: 52%;
    float: right;
    height: 40em;
    overflow: scroll;
}

HTML Code:

<div id="map_canvas" style="width:45%; height:20em;"></div>
<div id="results"></div>
<div id="details"></div>

Screenshot of the current output:

https://i.stack.imgur.com/AdVcX.jpg

I’m not sure what’s wrong. I did a lot of googling but I think it’s something to do with Google maps. Please help me out!

Answer 1

Actually, with your current CSS and HTML, that’s exactly how it’s supposed to look.

You have a div (map_canvas panel) which isn’t floated, so everything that comes after that in the HTML (that means both your results and details panels) is below this map_canvas (unless absolute or fixed positioning is used on the results or details panels, which isn’t the case here).

Solution: put the results first in your HTML and wrap your two panes on the left in another div.

Like this:

<div id="results"></div>
<div class="left-col">
    <div id="map_canvas" style="width:45%; height:20em;"></div>
    <div id="details"></div>
</div>

You can see the result here: http://dabblet.com/gist/2814665 – the only change I’ve made to your CSS was adding outlines for the panels.