Google지도로 2 열 레이아웃을 얻는 방법은 무엇입니까?

Question

Google지도 및 그 아래에 일부 데이터 (세부 정보 div)를 표시하고 오른쪽 열에 일부 데이터를 표시하는 왼쪽 창으로 웹 페이지에서 2 열 (3 칸 = 2 + 1) 레이아웃을 얻으려고합니다 (결과 div),하지만 Google지도의 오른쪽에 맞춰 (결과) 데이터 항목을 가져올 수 없습니다. 세부 정보 div 바로 Google지도 아래에 표시됩니다.

이

CSS 코드 :

이

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

HTML 코드 : 전류 출력의

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

스크린 샷 : 잘 모르겠어요

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

무슨 일이있어이 내 코드입니다 잘못된. 나는 인터넷 검색을 많이했으나 Google지도와 관련이 있다고 생각합니다. 제발 도와주세요!

Answer 1

실제로 현재 사용중인 CSS와 HTML을 사용하면 정확히 어떻게 보이는지 알 수 있습니다.

당신은 HTML에서 그 (즉, 모두 당신의 results 및 details 패널을 의미) 이하 다음에 오는 사업부 떠되지 않은 (map_canvas 패널), 그래서 모든 것을 가지고이 map_canvas (절대 또는 고정 위치는에 사용되지 않는 results 또는 details 패널이 여기에 해당하지 않음).

솔루션 : 당신의 HTML에 먼저 결과를 놓고 다른 사업부의 왼쪽에 두 개의 창을 포장. 이처럼

: 당신은 여기에 결과를 볼 수 있습니다

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

: http://dabblet.com/gist/2814665 - 나는 당신의 CSS로했습니다 유일한 변화가 패널에 대한 개요를 추가했다.