tags:

views:

30

answers:

1

I would like the container div to resize to its contents (content div). It doesn't.

example.html:

<html>
    <head>
        <link href="example.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <hr/>
        <div class="container">
            <div class="content">
            lorem ipsum
            </div>
        </div>
        <hr/>
    </body>
</html>

example.css:

.container
{
    border-style: solid;
    position: relative;
}

.content
{
    border-style: dashed;
    position: absolute;
}

Regards!

A: 

I believe it is because your contents position is absolute. I think that pretty much destroys the parents influence in this context. Try commenting out that line and see if it works.

Josh
Yes but it has to be absolute. This is a simplified example to demonstrate the problem.
Panayiotis Karabassis
I noticed you said you wanted them to appear side by side. Have you tried using `float: left;`? You would need to apply it to both, and remove the absolute position. If you really need to use absolute, you would need to do some creative JavaScript and probably have JavaScript update the size when the window\container was resized.
Josh
Yes but the problem is that if the two divs' size exceeds the window size the second floating div is going to appear below the first one. Anyway thank you very much to you and everyone else!
Panayiotis Karabassis
I used the answer at http://stackoverflow.com/questions/2501081/vertically-split-variable-sized-div-using-css
Panayiotis Karabassis