Как я могу избавиться от правого поля на моем div?

Question

У меня есть div на моей странице контакта с идентификатором контактных данных. Согласно инструментам разработчика Chrome, у него есть запас справа, который занимает остальную часть страницы и не позволяет мне размещать мои карты Google, где бы я хотел, чтобы она была расположена, напротив контактной информации.

HTML

<div class = "content"> <!--begin Content--><!-- InstanceBeginEditable name="editableContent" --> 
    <div id = "contactdetails"> 
     <ul> 
     <li><img src = "Images/icons/png/houseicon.png" alt = "Address icon"><p>23 Kingfisher Court, Werribee 3030, Victoria</p></li> 
     <li><img src = "Images/icons/png/emailicon.png" alt = "Email icon"><p>contact@greenery.com</p></li> 
      <li><img src = "Images/icons/png/phoneicon.png" alt = "Phone icon"><p>0397488945</p></li> 
     </ul> 
    </div> 
    <div id = "contactdetails-right"> 
     <div id="apimap"> 
      <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:180px;width:200px;'> 
       <div id='gmap_canvas' style='height:180px;width:200px;'></div><div><small><a href="http://embedgooglemaps.com">         embed google maps       </a></small></div><div><small> 
       <a href="https://termsandcondiitionssample.com">terms and conditions sample</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style> 
       </div><script type='text/javascript'>function init_map() 
       {var myOptions = {zoom:16,center:new google.maps.LatLng(-37.8777845,144.66931069999998),mapTypeId: google.maps.MapTypeId.ROADMAP} 
       ;map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.8777845,144.66931069999998)}) 
       ;infowindow = new google.maps.InfoWindow({content:'<strong>googlemap</strong><br>23 Kingfisher court, werribee<br>'});google.maps.event.addListener(marker, 'click', function() 
       {infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map); 
      </script> 
     </div> 
</div> 

CSS

#contactdetails{ 
width: 50%; 
height: 600px; 
box-shadow: 10px 10px 5px #888888; 
} 

#contactdetails ul{ 
    margin: 0; 
} 

#contactdetails ul li{ 
    list-style-type: none; 
    padding: 35px 0; 
    text-align: left; 
} 

#contactdetails ul li img { 
    display: inline-block; 
    padding-right: 30px; 
} 

#contactdetails ul li p { 
    display: inline; 
     font-size: 1em; 
} 

#contactdetails-right{ 
    float: right; 
    width: 200px; 
    border-left: 5px solid #555; 
} 

#apimap{ 
    margin-bottom: 50px; 
} 

Answer 1

Вам просто нужно добавить поплавок слева contactdetails

#contactdetails { 
    width: 50%; 
    height: 600px; 
    box-shadow: 10px 10px 5px #888888; 
    float: left; 
} 

Answer 2

#contactdetails-right{margin-right: -20px;} 

или вы можете изменить его на 0px.

#contactdetails-right{position: relative; left: 20px;} 

или вы можете попробовать

#contactdetails-right{float: right;} 

У вас есть живая связь, которую мы можем проверить, чтобы увидеть, что это не родитель/ребенок вопрос или запас тела?