Absolute div inside relatively positioned div not filling parent container

Question

I know this is a common problem but the solutions I have found online have not worked for me.

With a structure like this:

<div class="about-info">
    <p>This is the content. There may be a lot of content spanning multiple lines depending on what the site is doing right now.</p>
</div>

.about-info does not allow .about-info p to fill the container, truncating the words shown. How can I get .about-info to allow all of p to be displayed?

.about-info { position:relative; z-index:-700; }
.about-info p { z-index: -800; position:absolute; top:20px;}

You can see what I am talking about HERE. Using height:100%; make the div much too large, filling more area than needed. Thanks for any ideas!

Jquery can do this work for you. – Bharadwaj Feb 24 '14 at 06:22 — Bharadwaj, Feb 24 '14 at 06:22

score 0 · Accepted Answer · answered Feb 24 '14 at 03:15

0

Take out position:absolute; from your .about-info p block.

answered Feb 24 '14 at 03:15

user1795832

2,080
8
29
50

Thanks, but I want to use `top: 10px;` for other reasons, so this won't work for me. Any other ideas that may help? Thanks a lot – Nick B Feb 24 '14 at 03:17
Removing `position:absolute` is right. If you want `top:10px` then use `margin-top:10px`. – Papa Feb 24 '14 at 03:29
I want the text to behave as a background for other reasons, so using `margin-top` is not the correct solution. I need to use `position:absolute` in this case in order to use `top` – Nick B Feb 24 '14 at 03:34
How do you mean, have it act as a background? Can you elaborate on the reasoning behind requiring position absolute and needing a top margin (or gap in this case). – Nikki Mather Feb 24 '14 at 03:39
[Like THIS.](http://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css) I want to move the text by animating it based on the scrollbar location, aka "parallax technique," while keeping the height of the parent container static. The same way that the images are handled. – Nick B Feb 24 '14 at 03:42
That example doesn't help much. It just overlays a div over text. You needed to add this to the question as we wouldn't know any different. You can animate using negative margins. – Papa Feb 24 '14 at 04:01
Are you looking solely for a CSS resolution to this? I assume you don't want to set a px height since the text may change? Perhaps this Javascript can help http://jsfiddle.net/z4f22/ – Nikki Mather Feb 24 '14 at 04:07

misterManSam · Answer 2 · 2014-02-24T06:06:33.117

Do you really need position: absolute? From what I gather from your question, aren't you looking for something like this?

Edit

You could set a min-width to stop the height from being too large.

Updated Fiddle - Fiddle Link!

HTML

<div class="about-info">
<p>This is the content. There may be a lot of content spanning multiple lines depending on what the site is doing right now. This is the content.</p>
</div>

CSS

.about-info {
    width: 80%;
    min-width: 260px; /* get the correct ratio of width to height here */
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 15px 28px 1px rgba(0, 0, 0, 0.3) inset;
    padding: 10px 20px;
}

Sam

Made a few changes. Is this a useful example? – misterManSam Feb 24 '14 at 06:12 — misterManSam, Feb 24 '14 at 06:12

Absolute div inside relatively positioned div not filling parent container

2 Answers2