I have some nested divs that need to be positioned next to eachother in a responsive way. This is my html:
<div class="map-tool">
<div id="map"></div>
<div id="ember473" class="draggableDropzone1 ember-view draggableDropzone deactivated">
<div class="map-view kinetic-active" id="wrapper" style="cursor: move;">
<div id="ember482" class="ember-view">
<div class="" style="position:relative;">
<img id="dragMap" class="" src="*********">
</div>
</div>
</div>
</div>
<div id="ember483" class="draggableDropzone1 ember-view draggableDropzone deactivated">
<div id="g-map-object" class="map-view ">
</div>
</div>
<div id="ember484" class="draggableDropzone2 ember-view draggableDropzone deactivated">
<div class="legend-view ">
<div id="ember493" class="ember-view">
<div class="border-below">
<p>Selected map:</p>
<select id="ember502" tabindex="0" class="ember-view x-select">
<option id="ember512" value="[object Object]" class="ember-view x-option">Tomorrowland floorplan</option>
</select>
</div>
</div>
<div class="hotspots-view ">
<p class="places-available ">Places available</p>
<div class="categories-buttons ">
<div id="ember525" class="ember-view">
<button class="cat-button" data-ember-action="529">Amusement</button>
<button class="cat-button" data-ember-action="532">Stages</button>
<button class="cat-button" data-ember-action="533">Tastes of the World</button>
</div>
</div>
</div>
</div>
</div>
<p class="hiddenHotspot "><i class="fa fa-map-marker "></i>
</p>
</div>
Class 'legend-view' needs to be positioned all the way to the right, and has a fixed width of 200. Class 'map-view' is positioned on the left of the legend-view and takes all the remaining width space.
At the moment I'm working with width 75% and width 25% but this is not optimal as I need the fixed width for the legend-view.
The view consists of ember-views as this is the framework I'm working with.
Aucun commentaire:
Enregistrer un commentaire