CSS layer stretch

CookieHost · 05-09-2007, 08:02 AM

Hi,

I'm building a website right now in which I use absolute positioned layers inside a relative positioned layer. The relative positioned layer, the "containing layer", has a background image, so I want this layer to stretch to the height of the other layers. I don't want to set the height of the containing layer, as the content of the other layers is dynamic. Does anyone have a solution for this problem?

Thanks,
Jiska

Costin Trifan · 05-09-2007, 08:25 AM

Hello, Jiska!

Is this what you need?

Quote:

CookieHost · 05-09-2007, 08:49 AM

Hi Costin,

Thanks for your fast reply! I tried your CSS but to bad it doesn't work in my browser (IE6). The height of the containing layer didn't change.

This is what I tried:

div.main {
position: relative;
width: 780px;
height: auto;
background-image: url(../images/bg_main.gif);
background-position: top left;
background-repeat: repeat;
margin-left: auto;
margin-right: auto;
text-align: right;
padding: 0px;
border: none;
}

Maybe something wrong here?

Thanks,
Jiska

Costin Trifan · 05-09-2007, 01:26 PM

I've uploaded on my sub-domain a test page - go to page;

I want to let you know that IE6 displays its content in a different way than IE7.

I'm using IE7 so I don't know if this will work for you.

Visit that link with your IE6 and if everything looks ok for you than just copy the style you find on the page.

I hope that helps you

CookieHost · 05-13-2007, 04:10 AM

Hi Costin,

Thanks a lot! Your code works just fine (in IE6 as well as in IE7). I took me some time to find out why it didn't work at first. I used absolute positioned layers inside the main layer, but then the main layer doesn't stretch. It only stretches when I use some relative positioned layers as well. I uploaded an example. Is there a way to get it working with only absolute positioned layers?

Thanks,
Jiska

Costin Trifan · 05-14-2007, 02:23 AM

Yes, there is a way: Using absolute positioning + always keep in mind the size of each
- ^^ this is not recommended

What I recommend is this:

- set the width of the page container layer ( div class="containerLayer" and in the class specify the width as follows:

Quote:

.containerLayer {
width: 800px; /* set the desired width*/
height: auto;
...
...
}

)
- use relative position for the controls inside and for spacing use the margin or the padding attribute.
- this way everything goes just fine.

Hope this ^^ make sense for you

CookieHost · 05-17-2007, 07:15 AM

Hi Costin,

Thanks again! Yes, I understand your answer but still have some problems :-) How do I get the layers next to each other if I use "position:relative" for all of them?

Thanks,
Jiska

Costin Trifan · 05-17-2007, 10:37 AM

I suggest you use a table to separate the page content in which you can add the content.
This way you can manage the page content more easily.

CookieHost · 05-17-2007, 11:25 AM

I guess you're right :-)

Thanks,
Jiska

Costin Trifan · 05-17-2007, 11:35 AM

I always do my page layout like this:

<body>
<form...>
<div id="PageManager"></div>
<div id="PageHeader">page header content: in a table or in another div</div>
<div id="PageContent">
<table....>
<tbody>
<tr>
<td class="classname">...</td>
<td class="...">...</td>
...
...
</tr>
</tbody
</table>
</div>
...
...
...and so on
</body>

I hope this example will explain better my previous post