ansaurus

Question

Pushing every HTML element out of the way regardless of their positioning

Answer 1

A:

Have you tried inserting your widget at the very bottom of the <body> tag? It would be at the bottom of the page and not need to be position:fixed. It won't cover any content because it would follow normal flow.

Zack Mulgrew 2009-05-05 23:20:52

The thing is, I want the widget to persist whereever you are on the page. So putting it at the bottom won't do if I'm at the top of the page; I want to see the widget at the same time.

curagea 2009-05-05 23:32:03

I see. Indeed this is a tricky situation! Is JavaScript a viable solution? Even an elegant JavaScript solution, pushing elements out of the way is going to be difficult.

Zack Mulgrew 2009-05-06 00:04:42

Answer 2

+2 A:

You could perhaps add a padding-bottom to the body that is equal to the height of your position: fixed element.

gnarf 2009-05-05 23:23:42

Answer 3

A:

You must continue using the positioning of your widged absolute, and the put a div for the content and add a margin-bottom equal or more the height of your widged.

That would work, I guess.

José Leal 2009-05-05 23:23:57

Answer 4

A:

Create an empty margin that runs the height of the page:

<style>
#content {width: 80%;
          margin-left: 18%; /* to create a gutter between content and widget 
                               and to allow for borders and such */
}

#widget {width: 18%;
         position: fixed;
         bottom: 0;
         left: 0;
         padding: 0.5%;
         border-top: 1px solid #ccc;
         border-right: 1px solid #ccc;
}

</style>

...

<div id="content">

    <p>All of the branding, headers and content goes in this wrapper div.</p>

</div>

<div id="widget">

    <p>Widget goes here.</p>

</div>

...

Should work, I think. Mainly because it creates a column for the widget to slide in. Note: you may need to allow for small screens, so possibly create some means for the widget to not be pushed down, or at least accept a graceful deprecation.

David Thomas 2009-05-06 00:02:12

The code looks like it places the widget on the side of the content, rather than below. Also, we don't have control over the site itself; the widget is something that people can insert in their own sites.

curagea 2009-06-15 21:29:55

Answer 5

+1 A:

In jQuery:

$('html').height( $(document).height() + numerical_height_of_your_widget );

This basically sets the height of the html tag to be the sum of the height of the content (via jQuery's magical $(document).height() and the height of whatever position: fixed element you're adding (in this case, your widget).

avk 2009-07-22 02:50:38

I successfully tested it on a variety of layouts: http://www.cssplay.co.uk/layouts/three-column-layouts.html http://www.intensivstation.ch/en/templates/ http://www.opensourcetemplates.org/

avk 2009-07-22 03:03:13

ansaurus

tags:

views:

answers:

Pushing every HTML element out of the way regardless of their positioning

related questions