CODEWITHSUNDEEP
htmlcss
MJVDM
MJVDM

Reputation: 3963

prevent div from getting pushed to the left

I have two divs, the one acts as a panel, the second is a mapview (openlayers) The panel is hidden at the start, and only shows up on a click. however, when the panel appears, the mapdiv gets pushed to the right and overlaps with another div. how can I prevent that?

What I basically want is that the panel appears on top of the map.

This is my code:

<!-- TOOLBAR/PANEL -->
    <div class="waveCreatorPanel" style="visibility:hidden; display:none;">
        <ul>
            <li><a id="createWave_addStation"data-role="button">Station hinzuf&uuml;gen</a></li>
            <li><a id="createWave_addItem" data-role="button" disabled="disabled">Item hinzuf&uuml;gen</a></li>
            <li><a id="createWave_saveWave"data-role="button">Wave speichern</a></li>
        </ul>
    </div><!-- /footer -->

    <!-- MAP -->
    <div class="geosurfmap" id="map" data-role="content" style="z-index:1"></div>

The CSS:

.waveCreatorPanel {
    float:left;
}
 .geosurfmap {
    padding:25px;
    margin:25px;
    width:80%;
    float:left;
}

Upvotes: 0

Views: 241

Answers (3)

Pankrates
Pankrates

Reputation: 3094

You could wrap the map and panel divs in another div and give that the minimum required width (were the panel div to be visible). Secondly you would float the map div right

<div id="wrapper">
    <div class="panel"></div>
    <div class="map"</div>
</div>

<style>

#wrapper {
  min-width: 500px;
}

#wrapper .panel {
  position:relative;
  float: left
}

#wrapper .map {
  position: relative;
  float:right;
}
</style>

EDIT To clarify my point I have made a fiddle for you You can set the panel class to display:none or block to see that the map div now does not displace anymore as a result

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9570

absolute positioning for one or both of these will definetly solve this

 <div class="panel" style="visibility:hidden; display:none; position:absolute; left:0px; top:0px;">
        <ul>
           //stuff here
        </ul>
    </div>

    <!-- MAP -->
    <div class="map" id="map" data-role="content" style="position:absolute; left:100px; top:100px;"></div>

styling could be applied with css stylesheet attached , or inline - since you already have a style attribute in your div's I just added an example of how to set absolute - adjust left and top to where you actually want them

When you originally had visibility:hidden; display:none; that is leaving the other div to be positioned relative , with nothing around it. It is the same as actually not having it in HTML at all , then when it changes to become visible everything that was positioned relative has to be adjusted , absolute positioning will fix this

Another Thing: you're title says "Parent Div" - this in NOT a parent div of the div that is getting shifted around , it is actually adjacent. You would not be having this problem if it was actually a parent. But then again the parent starts as hidden , so everything in it would be hidden

Upvotes: 2

Joe T
Joe T

Reputation: 2350

Some possible solutions depending on the rest of your page: position:absolute z-index

Upvotes: 0

Related Questions