CSS (position:absolute + left:50% = max-width:50%)?

Question

I'm working on a website where I'm having a temporary problem, I've a div with CSS like this:

.box{
    position: absolute;
    width: auto;
    max-width: 75%;
    left: 50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    background: #000;
    color: #fff;
}

You can see a simple JSFiddle here , where the box1 is working correctly, it has short text and the width: auto; is working perfectly ...

But the second box box2 has long text and max-width: 75%; , but it's not working correctly, you can notice that its width looks like 50%

My question is from where did the box2 get 50% width ?? And how can I fix that issue ?

Thanks in advance

Answer 1

You may achieve the desired layout using an extra tag (a span for example)

DEMO

HTML :

<div class="box box1"><span>box1 Lara had been back and</span></div>
<div class="box box2">
    <span>box2 Lara had been back and forth along the river path many times in her short life. Her people had not created the path, it had always been there, like the river, but their deerskin-shod feet and the wooden wheels of their handcarts kept the path well worn. Lara’s people were salt traders, and their livelihood took them on a continual journey</span>
</div>

CSS :

.box{
    position: absolute;
    width: 100%;
    text-align:center;
}

.box1{
    top: 20px;
}

.box2{
    top: 100px;
}
.box span{
    display:inline-block;
    max-width:75%;
    background: #000;
    color: #fff;
    text-align:left;
}

Answer 2

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' . reference

Where the html tag element is the containing block in your case, a possible solution would be to add a container <div> and set its position to relative , demo .

Answer 3

First you have left: 50%; . This makes the div 50% width since it has width: auto; and there are only 50% of the page left for it to fill. After that, the div is moved 50% of it's own width to the left, to be centered.

So we can conclude that the width: auto; and left: 50%; is calculated before transform: translate(-50%,0); . Probably in that order.

So that's the answer to you're question why the div doesn't grow bigger than 50%.

Answer 4

Use style width: fit-content; . Example:

.center-wrapper {
  position: absolute;
  left: 50%;
  top: 0;
  width: fit-content;
  transform: translate(-50%);
  background-color: yellow;
}

This "center-wrapper" (your "box") now grows with child and also is centred.

Answer 5

You type max-width: 75% this mean your div could have width less than 75% so

If something inside div is bigger then 75% div will still have 75% but if something inside div is lower then 75% div will suit width to this element.

Try to add width:75% instead

Answer 6

Are you just trying to center your divs? Can you set the horizontal margin to auto instead?

.box {
  background: #000;
  color: #fff;
  margin: 10px auto;
  max-width: 75%;
}

DEMO: http://jsbin.com/riqafo/2/edit

In your original code, the width of your divs gets limited to 50% of the window due to the absolute positioning of them 50% from the left side of the window.

The transform then slides the divs back over to the left by 50% of the window width, but they keep their reduced size.

The automatic width allowed the upper div's width to collapse downward to its contained text. This wasn't relevant to the lower div, since the length of its text would exceed the width of the window if allowed.

Answer 7

I guess this can solve your issue without changing your structure.

jsfiddle

.box{
    position: absolute;
    width: auto;
    display: table;
    max-width: 75%;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
    margin: auto;
}

.box1{
    top: 20px;
}

.box2{
    top: 100px;
}