«

Hi,

I am trying to position a couple of absolutely positioned elements in a
container which is relatively positioned. The problem is that the relative
container they are located in does not 'stay open' and the content within it
cannot be seen. I wanted the page to be fluid so that if content was added
the container would auto resize and footer would remail at the bottom.

I hope this makes sense?

Any comments would be appreciated.

Thanks,

Chris.

Chris wrote:

> Hi,
>
> I am trying to position a couple of absolutely positioned elements in a
> container which is relatively positioned. The problem is that the relative
> container they are located in does not 'stay open' and the content within it
> cannot be seen. I wanted the page to be fluid so that if content was added
> the container would auto resize and footer would remail at the bottom.
>
> I hope this makes sense?

Without a url, I can only guess, but it sounds like you
didn't give a height to the container div.
The elements inside it which are abolutely positioned, are
taken from their normal flow, and therefore don't occupy any
space, really, so the container will not auto resize when
adding more abolutely positioned elements.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

You are right in the sense that I dont have the height set in the holder. I
didn't want to set this value because people (who are notntrained in web
development) will be editing the page. I don't want them to have to edit the
CSS file. Can you think of any ways in which I can achieve this without
setting a height attribute?

Thanks.

"Els" <> wrote in message
news:40431d79$0$41765$ i.nl...
> Chris wrote:
>
> > Hi,
> >
> > I am trying to position a couple of absolutely positioned elements in a
> > container which is relatively positioned. The problem is that the
relative
> > container they are located in does not 'stay open' and the content
within it
> > cannot be seen. I wanted the page to be fluid so that if content was
added
> > the container would auto resize and footer would remail at the bottom.
> >
> > I hope this makes sense?
>
> Without a url, I can only guess, but it sounds like you
> didn't give a height to the container div.
> The elements inside it which are abolutely positioned, are
> taken from their normal flow, and therefore don't occupy any
> space, really, so the container will not auto resize when
> adding more abolutely positioned elements.
>
> --
> Els
>
> Sonhos vem. Sonhos vão. O resto é imperfeito.
> - Renato Russo -
>

"Chris" <> wrote in news:c1v640$5vj$:

> I am trying to position a couple of absolutely positioned elements in
> a container which is relatively positioned. The problem is that the
> relative container they are located in does not 'stay open' and the
> content within it cannot be seen. I wanted the page to be fluid so
> that if content was added the container would auto resize and footer
> would remail at the bottom.

A URL would be helpful, but in its absence I'm going to guess that you're
overlooking the fact that absolutely-positioned elements don't occupy any
space in the layout flow of their containers; the container is laid out as
if its absolutely-positioned children didn't even exist. Therefore, it
won't "open up" to fit the children unless you explicitly call for extra
space, usually by setting margins.

Chris wrote:

> You are right in the sense that I dont have the height set in the holder. I
> didn't want to set this value because people (who are notntrained in web
> development) will be editing the page. I don't want them to have to edit the
> CSS file. Can you think of any ways in which I can achieve this without
> setting a height attribute?
>
> Thanks.
>
> "Els" wrote:
>
>>Chris wrote:
>>
>>>Hi,
>>>
>>>I am trying to position a couple of absolutely positioned elements in a
>>>container which is relatively positioned. The problem is that the relative
>>>container they are located in does not 'stay open' and the content within it
>>>cannot be seen. I wanted the page to be fluid so that if content was added
>>>the container would auto resize and footer would remail at the bottom.
>>>
>>>I hope this makes sense?
>>
>>Without a url, I can only guess, but it sounds like you
>>didn't give a height to the container div.
>>The elements inside it which are abolutely positioned, are
>>taken from their normal flow, and therefore don't occupy any
>>space, really, so the container will not auto resize when
>>adding more abolutely positioned elements.
>
> You are right in the sense that I dont have the height set in the holder. I
> didn't want to set this value because people (who are notntrained in web
> development) will be editing the page. I don't want them to have to edit the
> CSS file. Can you think of any ways in which I can achieve this without
> setting a height attribute?

(toppost corrected)

Yes: get rid of absolute positioning, use floats instead.
(with a clearance element at the bottom of the container
div, to make it stretch to hold all the floating elements)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

> (toppost corrected)

Oops, not so corrected, that was, duplicated instead of
moved the part. Sorry.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Maybe this will help!

http://www.garrod.co.uk/csstest/

You can see how the page is constructed. I have made the header etc and now
have Main div which I want to have flexible layouts. So for instance I
would like 2 cloums etc etc. The BG image is on the main Div.

Currently I have set the border of the second column to 220px so it clears
the menu. If anyone has any otehr ideas of how this might be done using
float I would love to hear them!

Thanks

Chris.

"Eric Bohlman" <> wrote in message
news:Xns949F443C69A4Debohlmanomsdevcom@130.133.1.4 ...
> "Chris" <> wrote in news:c1v640$5vj$:
>
> > I am trying to position a couple of absolutely positioned elements in
> > a container which is relatively positioned. The problem is that the
> > relative container they are located in does not 'stay open' and the
> > content within it cannot be seen. I wanted the page to be fluid so
> > that if content was added the container would auto resize and footer
> > would remail at the bottom.
>
> A URL would be helpful, but in its absence I'm going to guess that you're
> overlooking the fact that absolutely-positioned elements don't occupy any
> space in the layout flow of their containers; the container is laid out as
> if its absolutely-positioned children didn't even exist. Therefore, it
> won't "open up" to fit the children unless you explicitly call for extra
> space, usually by setting margins.
>
>

"Chris" <> wrote in news:c1vigq$8t4$:

> Maybe this will help!
>
> http://www.garrod.co.uk/csstest/
>
> You can see how the page is constructed. I have made the header etc
> and now have Main div which I want to have flexible layouts. So for
> instance I would like 2 cloums etc etc. The BG image is on the main
> Div.
>
> Currently I have set the border of the second column to 220px so it
> clears the menu. If anyone has any otehr ideas of how this might be
> done using float I would love to hear them!

You want to set a left margin, not a border, to move the second column
over. Once you do that, you can drop the absolute positioning on the left
column and float it left instead.

If I do that then this happens!

www.garrod.co.uk/csstest

Its frustrating!

"Eric Bohlman" <> wrote in message
news:Xns949F6052DA60ebohlmanomsdevcom@130.133.1.4. ..
> "Chris" <> wrote in news:c1vigq$8t4$:
>
> > Maybe this will help!
> >
> > http://www.garrod.co.uk/csstest/
> >
> > You can see how the page is constructed. I have made the header etc
> > and now have Main div which I want to have flexible layouts. So for
> > instance I would like 2 cloums etc etc. The BG image is on the main
> > Div.
> >
> > Currently I have set the border of the second column to 220px so it
> > clears the menu. If anyone has any otehr ideas of how this might be
> > done using float I would love to hear them!
>
> You want to set a left margin, not a border, to move the second column
> over. Once you do that, you can drop the absolute positioning on the left
> column and float it left instead.

"Chris" <> wrote in news:c1vl65$9d4$:

> If I do that then this happens!
>
> www.garrod.co.uk/csstest
>
> Its frustrating!

You need to put leftcol before maincol in your HTML. float: left means
"float me to the left of what comes *after* me; a floated element won't
float upwards. See rule 6 from section 9.5.1 of the CSS2 spec:

"The outer top of an element's floating box may not be higher than the top
of any line-box containing a box generated by an element earlier in the
source document."