Home/ Questions/Q 8267653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:36:49+00:00

I have two elements in a div element. One is styled to float left

  • 0

I have two elements in a div element. One is styled to float left and the other to float right. I have given them negative margins, but when I try to find the top and left (with the .position() function from jQuery) as I have to apply some translation on them, the left position of the left element is not showing correctly. The right element is giving the correct top and left.

Here is the code:

HTML

<hmtl>
<head></head>
<body>
    <div class = "rotate">
    <div class = "figure1"></div>
    <div class = "figure2"></div>
    </div>

</body>
</html>

CSS

.rotate{
    width: 300px;
    height: 70px;
    border:2px solid black;
    margin: auto;
}
.figure1{ 
position: relative;    
float: left;
margin-left: -80px;
display: inline-block;    
width: 70px;
 height: 70px;  
 background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;          
);
}
.figure2{
position: relative;
float: right;
display: inline-block;
margin-right: -80px;   
width: 70px;
 height: 70px;
  background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;      
}

Javascript (jQuery)

var a = $(".figure1").position();
var b = $(".figure2").position();
console.log(a,b);

Demonstration on Jsfiddle.

Look at the margin-left for the class figure1 and the margin-right for class figure2 and note that the margin of -80px is reflected in one but not the other when we see the output of console.log in the console.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try offset() instead of position()

    • 0