CODEWITHSUNDEEP
htmlcss
ChRapO
ChRapO

Reputation: 337

Wrong max-width for div with absolute position in a smaller div with relative position

I have a div element positioned relative with 10px width and height. Inside the div I have div positioned absolutely with max-width 200px and this div contains a long text. The problem is that the inner div is not stretched to 200px but is much more narrow. Is there a way that I can keep the same properties and have the inner div stretched to 200px?

<div style="position:relative; width:10px; height:10px; display:inline-block;">
  <div style="position:absolute; max-width:200px; display:block;">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

Demo: http://jsfiddle.net/LM3V4/6/

ADDITIONAL INFO: The outer div is kind of icon in a text and the inner div is kind of tooltip next to the icon so I cannot change the size of outer element.

SOLUTION: Ok so what has solved my problem is that you have to wrap the inner element with another div with position: absolute and width set to 200px. http://jsfiddle.net/LM3V4/17/

Upvotes: 0

Views: 476

Answers (2)

ottis
ottis

Reputation: 216

So i'm not sure what you're trying to achieve, it's been mentioned that you're parent container's width is set to 10px so the max-width of the childs will only ever reach 10px not 200px. I've updated your jsfiddle, moving the max-width to the outer div like -

.outer
{
  max-width: 200px;
}

check it out here http://jsfiddle.net/LM3V4/15/ , let me know if this is the effect you're looking for or something else. Also you don't need to change the DIVs positioning to achieve this, I left it in as it was.

Upvotes: 0

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

JsFiddle

min-width:200px;

you need to change max to min

Upvotes: 0

Related Questions