[Solved] width: auto; on absolute positioned element

[ampersand]

Hi to all,

I’m stuck on a problem with an absolute positioned element.

I want it to resize based on a percentage height value, relative to it’s parent. But with no width defined the element doesn’t show at all.

When I define the width only, there is no problem.

Someone could explain me why that happens? Any suggestion on how to solve that?

I though to solve that by using JavaScript, but if there is a CSS way to achieve that, I would prefer to adopt that.

Cheers,
Davide

[Paulie_D]

I want it to resize based on a percentage height value, relative to it’s parent. But with no width defined the element doesn’t show at all.

A codepen.io demo would be useful.

I’m not clear on what you are trying to do….what is the purpose of this absolutely positioned element?

You want to resize…in what way…is it supposed to cover the whole parent or just part of it?

http://stackoverflow.com/questions/31606339/percentage-height-and-width-auto-on-absolute-positioned-element

[marcdefiant]

def what Paulie said.

you could try something where the main element has a 92% width for ex, and set the margin left to 100-92=8
8/2=4% (the reason we divide the difference between full accessible width and element width is to account for the left as well the right margin)

#main-element { width: 100%; }
.child-element { width: 92%; margin: 0 4%; }

would love to seen codepen so I may see the exact situation.

Update:

jQuery can solve this problem (even though js is run on client side [but then again, so is css])

you can say:

(function($){
  $('#myItem').css({
    width: $('#myItem').width(),
    margin: 'auto'
  });
})(jQuery);

[ampersand]

Hi,

thank you for the response. I was setting up a demo for you and I noticed that my problem actually is not a real problem.

Here the JSFiddle: https://jsfiddle.net/zw38gbmz/

I was trying to replicate the problem with a simplified situation, similar to what I have on my project. I’ve realised that my problem is not CSS related but it’s probably due to a JavaScript plugin that I have on my real project to achieve a parallax effect of all elements when the mouse moves.

I apologise for the useless post. Isn’t possible to delete it?

Davide

[Author]

Posts