mardi 8 mars 2016

position nested divs in a responsive way

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