Page end with absolute divs.

I have a div called 'utility' with produces an absolute positioned
sidebar on my website. However, if the content is shorter than the
length of this sidebar - it overhangs the footer. By this I mean the
long length seems to not shift where the end of the content is
interpretted at. (An example can be seen on my site:
http://brokenbulb.co.uk/blog/1). I have tried to enclose this absolute
div within an relitive div content wrap ('wrap') - however this seems
to have had no effect. I have also added the clear tag to a blank div
below all the content (<div style="clear:both;"></div>), and this also
seems to have failed to work. Any ideas?

Thanks in advance.

Ian Shortman wrote:

I have a div called 'utility' with produces an absolute positioned
sidebar on my website. However, if the content is shorter than the
length of this sidebar - it overhangs the footer. By this I mean the
long length seems to not shift where the end of the content is
interpretted at. (An example can be seen on my site:
http://brokenbulb.co.uk/blog/1). I have tried to enclose this absolute
div within an relitive div content wrap ('wrap') - however this seems
to have had no effect.

Of course it wouldn't, absolute positioned elements are not flowed with
the page, See:

http://www.w3.org/TR/CSS21/visuren.h...te-positioning

I have also added the clear tag to a blank div

below all the content (<div style="clear:both;"></div>), and this also
seems to have failed to work.

Clear works with floats not absolute positioning. Float left your
sidebar then clear left on your footer would achieve what your desire.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Yes - but when I do that the sidebar ends up below the content:

Header - FooBar
Content
Foo
Bar
Baz
Sidebar
All the
way
down
here

Jonathan N. Little wrote:

Ian Shortman wrote:
I have a div called 'utility' with produces an absolute positioned
sidebar on my website. However, if the content is shorter than the
length of this sidebar - it overhangs the footer. By this I mean the
long length seems to not shift where the end of the content is
interpretted at. (An example can be seen on my site:
http://brokenbulb.co.uk/blog/1). I have tried to enclose this absolute
div within an relitive div content wrap ('wrap') - however this seems
to have had no effect.

Of course it wouldn't, absolute positioned elements are not flowed with
the page, See:

http://www.w3.org/TR/CSS21/visuren.h...te-positioning

I have also added the clear tag to a blank div
below all the content (<div style="clear:both;"></div>), and this also
seems to have failed to work.

Clear works with floats not absolute positioning. Float left your
sidebar then clear left on your footer would achieve what your desire.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Ian Shortman wrote:

Yes - but when I do that the sidebar ends up below the content:

Header - FooBar
Content
Foo
Bar
Baz
Sidebar
All the
way
down
here

Well A URL would certainly be preferable that playing 20 question, but I

bet you problem beside not understanding how foal work is that your
floated element is too far down within the markup. It needs to be before
the content block

<div>Header</div>
<div style="float: left; width: 20%">Side Bar</div>
<div>Content...Lorem ipsum dolor sit amet...</div>
<div style="clear: left">Footer</div>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:

Ian Shortman wrote:
Yes - but when I do that the sidebar ends up below the content:

Header - FooBar
Content
Foo
Bar
Baz
Sidebar
All the
way
down
here

Well A URL would certainly be preferable that playing 20 question, but
I bet you problem beside not understanding how foal work is that your
floated element is too far down within the markup. It needs to be
before the content block

Not necessarily. ;-)
http://countryrode.com/

--
-bts
-Warning: I brake for lawn deer

Ive got it working how I want now (see that URL again), but the only
way it seemed to work was if I put the sidebar above the content (as it
seems you now referenced) in the markup, however this isn't so good for
text-only browsers (and unfortunately a fair few people use 'links' for
my site) so is there a way to change this?

Thanks

Beauregard T. Shagnasty wrote:

Jonathan N. Little wrote:

Ian Shortman wrote:
Yes - but when I do that the sidebar ends up below the content:

Header - FooBar
Content
Foo
Bar
Baz
Sidebar
All the
way
down
here

Well A URL would certainly be preferable that playing 20 question, but
I bet you problem beside not understanding how foal work is that your
floated element is too far down within the markup. It needs to be
before the content block

Not necessarily. ;-)
http://countryrode.com/

--
-bts
-Warning: I brake for lawn deer

Ian Shortman wrote:

Ive got it working how I want now (see that URL again), but the only
way it seemed to work was if I put the sidebar above the content (as it
seems you now referenced) in the markup, however this isn't so good for
text-only browsers (and unfortunately a fair few people use 'links' for
my site) so is there a way to change this?

Thanks

Beauregard T. Shagnasty wrote:
Jonathan N. Little wrote:

Ian Shortman wrote:
Yes - but when I do that the sidebar ends up below the content:

See how messed up this looks ^^^^^

Please don't top post....

Header - FooBar
Content
Foo
Bar
Baz
Sidebar
All the
way
down
here

We you could float your contents to the right

<div>Your Header</div>
<div style="float: right;">Your page content....</div>
<div style="width: 20%">Your menu</div>
<div style="clear: right;">Your footer</div>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com