Positioning absolute CSS in a relative DIV

[Chris]

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.

 

[Els]

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.

 

[Chris]

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.

 

[Eric Bohlman]

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.

 

[Els]

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.



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]

(toppost corrected)

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

 

[Chris]

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]

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]

If I do that then this happens!

www.garrod.co.uk/csstest

Its frustrating!

 

[Eric Bohlman]

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."

 

[Chris]

Thanks Eric!
It works prefectly.

Chris

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."