fluid vertical layot while using positioning schemas

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

fluid vertical layot while using positioning schemas

Post by newmember »

i want to put an absolute positioned div inside relatively positioned div...
(so the inner div's coordinates are relative to its containg div)
both divs intentionaly don't have height because i want the layot to be verticaly fluid...
but there is a major "problem" with this...
when i put text inside inner div it expands and takes neccasery height
but container div DOESN'T expands...
if the inner div not absolutly positioned then containg div expand

I understand that this behaviour is correct because although inner div is positioned relative to its container, it is still out-of-flow box, so contaning div doesn't care of its inner div's height...

Does anyone has an idea how to achive fluid vertical layot while using positioning schemas?

----------------------------------------------
Why i need all that?

i have pretty complex layot and at first i tried to do it with tables but ran into many difficalties (nesting tables inside tables)...
so i left it and now i'm trying to do the same with boxes and positioning...
i need to use a lot of absolute and relative positioning....like nesting few times absolute positioned boxes inside relativly positioned one's...
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post by rehfeld »

the reason the container div does not, and will not expand, is because the absolutely positioned div is taken out of the normal flow of the document. in a sense, it is no longer "inside" the relatively positioned wrapper, so it wont cause the wrapper to expand.



could you use margin?




im fairly good at css, if you could post some code id be happy to help.

but maybe this will work for you. the container div is position: relative like you want. but the inner div is not positioned absolutely, it uses margin to position it.

but in order to keep any content thats onside of the outer div, from affecting the position of the inner div, i made another div, called out-content, and absolutely positioned it, so that it is taken out of the flow of the page, and will not affect positioning of the inner div.

you can totally delete the outer-content div and will see that the inner div's positioning will not change.




Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>foo</title>
<style type="text/css">

body &#123; margin: 0; padding: 0; &#125;

div &#123; border: 1px solid #aaa; &#125;

#outer &#123; position: relative; top: 100px; left: 100px; width: 800px; &#125;

#outer-content &#123; position: absolute; top: 3px; &#125;

#inner &#123; margin-top: 30px; margin-left: 10px; &#125;

</style>
</head>
<body>




    <div id="outer">
    
        <div id="outer-content">content inside of the outer div, but not insider of the inner div. if you put content directly in the outer div, it will affect positioning of the inner div</div>

        <div id="inner">

                inner<br />
                <br />br
                <br />br
                <br />br
                <br />br
                <br />br
                <br />br<br />br
                <br />br
                <br />br<br />br

        </div>


    </div>
    
    
    

</body>
</html>
Post Reply