CSS problems with map/panel width on several templates WordPress

Jermaine Oppong answers:

Hello there,

The first problem is due to the extra padding on the element as Ivaylo stated. The second issue is due to the fact that you are working with elements that have <strong>display:inline</strong> as a default css property, with the span wrapping the icons floated to the right.

My advice to solve both problems is to remove the padding from the <strong>#panel_top_...</strong> wrapper and apply it to the contents instead. This means replacing the span tags in the panel with divs and setting the larger width+padding to the text and a smaller width to the icons. So something like this:


<div class="map_panel" id="panel_top_8e6e162d">
<div class="panel_desc">Panel Description should go here</div>
<div class="panel_icons">panel icons</div>
</div><!--map_panel div-->



and in the css having:



.map_panel{
background: #efefef;
border:1px solid #ccc;
position:relative;
width:640px;
}

.panel_desc{
padding:5px;
width: 510px;
}

.panel_icons{
position:absolute;
right:5px;
top:5px;
}




Its also good to set the css styling for the maps in a seperate stylesheet to allow users to easily change the styling of the panel and map container to their liking.

My next advice in this is a tweak suggestion on how the result is outputted onto the page. This will make it a bit easier in the future to make amendments and does not seperate the panel from the map itself:


<div class="maps_marker" id="maps_marker_{A dynamically generated id for each instance}">

<div class="map_panel" id="panel_top_8e6e162d">
<div class="panel_desc">Panel Description should go here</div>
<div class="panel_icons">panel icons</div>
</div><!--maps_panel div-->

<div class=" leaflet-container leaflet-fade-anim">
Actual Map is outputted here
</div><!-- map_output -->

</div><!--maps marker div to wrap panel and map together-->


then in the css you can have:


.maps_marker{
width:640px;
}
.map_panel{
background: #efefef;
border:1px solid #ccc;
position:relative;
}

.panel_desc{
padding:5px;
width: 510px;
}

.panel_icons{
position:absolute;
right:5px;
top:5px;
}


Setting the divs wrapping the panel and the map together with a width will cause its immediate children to inherit that same width.

Hope this helps.