CODEWITHSUNDEEP
htmlcss
buet_baba
buet_baba

Reputation: 59

Absolutely positioned elements don't show a margin-left effect

<div id="map1" style=" float: left; margin-left: 150px; border:2px solid grey;">
<div id="red">                            
<div id="green"></div>                            
<img id="map_img" src="images/map/location-map-small.gif" alt="map">
</div>
</div>  
#map1{
margin-top: 10px;
margin-left: 100px;
width : 400px;
height : 400px;
overflow: hidden;
z-index: 105;

}
#green{
background: url("location-map-large.gif");
background-position: 0px 0px;
background-color: green;
height: 100px;
width: 100px;
position: absolute;
overflow: hidden;
display : none;
border: 2px solid grey;    
}
#red{
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
}

I have two divs showing the zooming effect styled as listed below. The problem is that there isn't any effect of adding "margin-left" style to the "map1" element, what should I do to place it according to my requirement?

Upvotes: 0

Views: 48

Answers (3)

buet_baba
buet_baba

Reputation: 59

this for my successors. :) in this case i used positioning : relative for the id "map1" and used left instead of margin-left and got my job done.

Upvotes: 0

j3r6me
j3r6me

Reputation: 808

Add 'position:relative' to map1 CSS and then use the left property to position green and red.

#map1 {
    background: blue;
    width : 400px;
    height : 400px;
    position: relative;
}

#green {
    background: green;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50px;
}

See result here: http://jsfiddle.net/u4j2F/

Upvotes: 2

jayjojayson
jayjojayson

Reputation: 61

you can position the element width padding

Live Demo here

Upvotes: 0

Related Questions