html - How do I get rid of the right margin on my div? -
i have div on contact page id of contactdetails. according chrome's developer tools has margin on right taking rest of page , not allowing me place google maps located, opposite contact details.
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 , 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; }
you need add float left contactdetails
#contactdetails { width: 50%; height: 600px; box-shadow: 10px 10px 5px #888888; float: left; } 