Stylesheets - Collapsing (relatively positioned) container for a absolute positioned side column

Author

Collapsing (relatively positioned) container for a absolute positioned side column

alun65@gmail.com

2007-07-26, 6:18 pm

Hi,

I'm developing two column site which has a relatively positioned
content area and a absolute positioned left hand column the problem is
if the left hand column sometimes dynamically grows bigger than the
content area and the problem is it will not expand the container.

I realize that by making the side column absolutely positioned we take
it out of the document flow and it knows nothing about it parent
container which is why the container is not expanding to fit the left
hand column (well I think this is why it's happening?).

But my question is what is the best cross browser solution to expand
the container div. Here's some code to illustrate the problem.

Many thanks in advance for any help

Alun

CODE HTML/CSS
========

<html>
<head>
<style type="text/css">

#mainContentArea{
border:solid 3px red;
postion:relative;
padding-left:300px
}

#sidecolumn{
padding:20px 0 10px 35px;
width:200px;
border:solid 1px blue;
position:absolute;
left:50px;
}

</style>
</head>
<body>
<div id="mainContentArea">
<div id="sidecolumn">
This text<br />
will<br />
always<br />
hang<br />
off<br />
the<br />
edge<br />
of the<br />
container<br />
div HELP<br />
</div>
THIS IS
<br />
THE
<br />
CONTAINER DIV<br />
</div>
</body>
</html>

Jason Priem

2007-07-26, 6:18 pm

alun65@XXXXXXXXXX wrote:
> Hi,
>
> I'm developing two column site which has a relatively positioned
> content area and a absolute positioned left hand column the problem is
> if the left hand column sometimes dynamically grows bigger than the
> content area and the problem is it will not expand the container.
>
> I realize that by making the side column absolutely positioned we take
> it out of the document flow and it knows nothing about it parent
> container which is why the container is not expanding to fit the left
> hand column (well I think this is why it's happening?).
>
> But my question is what is the best cross browser solution to expand
> the container div. Here's some code to illustrate the problem.
>
> Many thanks in advance for any help
>
> Alun
>
> CODE HTML/CSS
> ========
>
> <html>
> <head>
> <style type="text/css">
>
> #mainContentArea{
> border:solid 3px red;
> postion:relative;
> padding-left:300px
> }
>
> #sidecolumn{
> padding:20px 0 10px 35px;
> width:200px;
> border:solid 1px blue;
> position:absolute;
> left:50px;
> }
>
>
> </style>
> </head>
> <body>
> <div id="mainContentArea">
> <div id="sidecolumn">
> This text<br />
> will<br />
> always<br />
> hang<br />
> off<br />
> the<br />
> edge<br />
> of the<br />
> container<br />
> div HELP<br />
> </div>
> THIS IS
> <br />
> THE
> <br />
> CONTAINER DIV<br />
> </div>
> </body>
> </html>
>
Is there a reason why you can't use floats? That would seem to be the
easiest way to me:

<style type="text/css">

#mainContentArea{
float:left;
border:solid 3px red;
}
#sidecolumn{
float:left;
border:solid 3px blue;
width:200px;
}
</style>

You still have a lot of positioning options using margins. Hope that helps.
j

alun65@gmail.com

2007-07-26, 6:18 pm

On 26 Jul, 18:27, Jason Priem <pri...@bellsouth.net> wrote:
> alu...@XXXXXXXXXX wrote:
>
>
>
>
>
>
>
>
>
>
>
> Is there a reason why you can't use floats? That would seem to be the
> easiest way to me:
>
> <style type="text/css">
>
> #mainContentArea{
> float:left;
> border:solid 3px red;}
>
> #sidecolumn{
> float:left;
> border:solid 3px blue;
> width:200px;}
>
> </style>
>
> You still have a lot of positioning options using margins. Hope that helps.
> j

Hi Jason,

I think your right, floats is the way to go. The reason I was using
absolute positioning is that this enables me to put the navigation
section right down the bottom of the HTML page, so when the page get
spidered it will hit the content section first instead of the
navigation, this should help for SEO (although this it may only give a
slight improvement, who knows only the Google engineers probably).
Anyway I think the simplest way is always the way to go in CSS. Any
thanks for the reply Jason I will use floats instead.

Alun