CODEWITHSUNDEEP
htmlcsscss-floatcss-position
user3765800
user3765800

Reputation: 27

Absolute position wrong when resize browser

I have two divs , the first div in relative position and other div inside with absolute position , when I resize browser to 100% screen size, all seems fine.

The problem comes when I resize the browser and the second element in absolute position appears out of the container , not much, but still in different position outside.

Demo: http://jsfiddle.net/1pde2gyc/

My CSS code :

#container_front {
    position:relative;
    width:40%;
    margin-left:auto;
    margin-right:auto;
}

#front_like {
    position:absolute;
    width:50px;
    height:50px;
    left:75%;
    bottom:-1%;
}

The problem is with front_like, this DIV has one image inside, this image show to the right side and in the middle more or less , when I resize the screen to 50 or 30 % the image goes out of container called container_front.

I thought using absolute and % always stay in the same position but I see when resize move out, exists some solution for fix this problem? ir css calculate the position and stay in the container in the same side and no out

Thank´s the best regards.

Upvotes: 0

Views: 10156

Answers (2)

Grijan
Grijan

Reputation: 298

Also check if you have css attribute flex added to your div, was stuck up with that for hours

Upvotes: 0

Brian Dillingham
Brian Dillingham

Reputation: 9356

Problem: If you position something absolutely left: 75%; of an element that has a percentage based width and you resize, the child element is still positioned at 75% but now of a smaller area. The child element is not of percentage based width so it does not adapt to the new width and instead the child pushes out of bounds because its left most point will remain at 75% of a smaller parent and its width remains a pixel value.

enter image description here

Solution: Change from pixel to percentage values

The child will adapt to the parent width when resized and not exceed the boundaries of the parent element.

Here is a jsFiddle demo

enter image description here

CSS Solution: Alternatively, use CSS Media Queries to apply styles to account for the smaller viewport. 

@media screen and (max-width: 460px) {
    #front_like {
        left: 60%;
    }
}

jsFiddle Demo - This isn't ideal, because you will have to account for it multiple times with multiple queries

Upvotes: 6

Related Questions