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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

alun65@gmail.com - 26 Jul 2007 17:20 GMT

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>

Reply to this Message

Jason Priem - 26 Jul 2007 18:27 GMT

> Hi,
>
[quoted text clipped - 60 lines]
> </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

Reply to this Message

alun65@gmail.com - 26 Jul 2007 18:44 GMT

> alu...@gmail.com wrote:
> > Hi,
[quoted text clipped - 80 lines]
> 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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007

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