ansaurus

Question

How to absolutely position dynamic .js script in container and deallocate its space for use by next div

Answer 1

+1 A:

Gaby 2010-07-13 07:42:04

Sorry, i forgot to include what i think may be the constraint that was preventing me from doing that. i was trying to do it that way before, but the last "something-else" div, is a bunch of text and the widget sometimes overlaps it. if i position it absolutely, even if i add padding to the widget, the text will always run over the widget. how can i get around that?

culov 2010-07-13 07:57:25

@culov, just added a series of examples to check out ..

Gaby 2010-07-13 08:19:05

thanks so much for taking the time to do that (and for showing me jdfiddle.com). i want to get to your third example, but im currently stuck at 4. i removed all the floats from my page except for the float:right for the widget, and im still not getting that effect... the following div still begins after the widget.

culov 2010-07-13 08:43:14

@culov, can you put the page somewhere live, so we can inspect the actual code ?

Gaby 2010-07-13 09:21:42

@Gaby, sure, heres the page in question: http://5.latest.truxmap.appspot.com/truckpage?id=bordergrillas you can see, if the widget is long enough, it overlaps the text.

culov 2010-07-13 09:33:07

@culov, the 3rd case uses float, and not absolute positioning. In your case, though, where you want the map to be up high, you would either need to re-order the DOM, or you could set the following properties on the `#tm-w-holder` CSS rule. `float:right;margin-top:-450px;margin-right:10px;width:220px;` and lose the `position:absolute;top:453px;left:338px;`. The correct way would be to re-order the DOM though, as the solution in this comment would not work if your widgets on the left(*form/tweets/facebook etc*) grew taller ..

Gaby 2010-07-13 10:05:27

@Gaby, Thanks, I want to do this correctly because I already had a half-way-working solution. Before, I was placing the widget as the last item in the container and positioning it relatively, but this also has the same downside as the solution you posted above (i couldnt get it to work btw)... if the elements on the left change, then the numbers need to be fixed. I'm not quite seeing an easy way to do this even if i do re-order the DOM.

culov 2010-07-13 19:23:39

@culov, this code http://www.jsfiddle.net/qbZuT/1/ structurally recreates your requirements.. check it out and see if you can adapt it ..

Gaby 2010-07-13 22:50:49

Thanks Gaby, i still havent found a better solution to this than my original one, but i see how what im trying to do, ought to be accomplished with in your example. How to absolutely remove an element from the DOM and re-add it may be the question i need to answer. Given that every 'solution' ive found, leaves the space that the widget was given BEFORE shifting it up, remains occupied yet blank (ie the words still wrap around it even though its just white space).

culov 2010-07-14 05:50:37

I am not really understanding the problem .. since you only use float on the item, if you set the margin-top to a negative value it would go up and release the space below it .. look at http://www.jsfiddle.net/qbZuT/2/ and use the buttons at the bottom.

Gaby 2010-07-14 09:11:00

Ahh you're absolutely right. I was using bottom rather than margin-top. Thanks so much!

culov 2010-07-14 22:31:15

@culov, no worries.. :)

Gaby 2010-07-14 23:03:54

ansaurus

tags:

views:

answers:

How to absolutely position dynamic .js script in container and deallocate its space for use by next div

related questions