Google지도와 텍스트 정렬

Question

하나의 DIV 컨테이너에 텍스트와 함께 Google지도를 정렬하려고합니다. 지도를 추가로 내리지 않고 텍스트를 추가하는 것 같습니다. 나는 오른쪽으로 움직이는 것을 시도했다. 그리고 그것이 오른쪽으로 움직이는 동안, 그것은 그것 주위에 텍스트를 좋아하는 것처럼 보이지 않는다! 어떤 도움을 주셔서 감사합니다!

HTML 코드

<div id="middle"> 
    <div id="middlecontent"> 
<h2>Contact Us</h2> 
<p> 
Please call us on 00000 000000 
<br> 
Our Address is:<br> 
Text Text Text<br> 
Text Text<br> 
Text Text<br> 
Text Text<br> 
</p> 
<!--map start-->  
<!--Positions map in page --> 
<iframe width="425" height="330" float="right" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Rising+Sun,+High+Street,+Tarporley&amp;aq=0&amp;sll=53.800651,-4.064941&amp;sspn=12.709674,39.506836&amp;ie=UTF8&amp;hq=The+Rising+Sun,&amp;hnear=High+St,+Tarporley+CW6,+United+Kingdom&amp;cid=13650885383800041617&amp;ll=53.166791,-2.667961&amp;spn=0.018009,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> 
<br /> 
<!--map end--> 
</div> 
</div> 

CSS

#middle { 
    margin-right: auto; 
    margin-left: auto; 
    width: 70%; 
    height: 400px; 
    margin-top: 65px; 
    border:3px solid #999; 
    background-color:#333; 
    } 

#middlecontent { 
    font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding: 10px; 
} 

Answer 1

이 당신이 찾고있는 무엇인가?

HTML :

<div id="middle"> 
<div id="goomap"> 
</p> 
<!--map start-->  
<!--Positions map in page --> 
<iframe width="425" height="330" float="right" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Rising+Sun,+High+Street,+Tarporley&amp;aq=0&amp;sll=53.800651,-4.064941&amp;sspn=12.709674,39.506836&amp;ie=UTF8&amp;hq=The+Rising+Sun,&amp;hnear=High+St,+Tarporley+CW6,+United+Kingdom&amp;cid=13650885383800041617&amp;ll=53.166791,-2.667961&amp;spn=0.018009,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> 
<br /> 
<!--map end--> 
</div> 
    <div id="middlecontent"> 
<h2>Contact Us</h2> 
<p> 
Please call us on 00000 000000 
<br> 
Our Address is:<br> 
Text Text Text<br> 
Text Text<br> 
Text Text<br> 
Text Text<br> 
</div> 
</div> 

CSS :

#middle { 
    margin-right: auto; 
    margin-left: auto; 
    width: 70%; 
    height: 400px; 
    margin-top: 65px; 
    border:3px solid #999; 
    background-color:#333; 
    } 

#middlecontent { 
    font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding: 10px; 
} 

#goomap { 
float:right; 
} 

당신은 당신의 패딩을 조정할 필요가있을 것이다, 그러나 이것은 당신의 방법에 당신을 얻을 것이다. 희망이 도움이됩니다.