ansaurus

Question

How to use float without flipping floated item and changing in source order? Is this possible ?

Answer 1

A:

That's not possible. See: http://www.dynamicdrive.com/forums/showthread.php?t=28936

CodeAddict 2010-01-12 14:32:39

Answer 2

+1 A:

One Additional Div to the Mix?

If you can edit your CMS template, wrap them in one additional div, and float that div: http://jsbin.com/esoqe

div.els { float:right }

<div class="main"> 
  <div class="els"> 
    <a>A</a> 
    <a>B</a> 
  </div> 
</div>

JQuery Fixes Everything

If you can't make even a minor change like that to the Code, you could re-order these with Javascript once the page finishes loading.

$(function(){
  // create previous hierarchy
  $("div.main").wrapInner("<div class='els'></div>");
});

Absolute Positions - Yuck.

The last option (and I shudder to even call it an option) is to absolutely position each of the divs, being sure to set their parent container position to relative*. This option would require you to return and make changes to your .css file each time you add a new box, which is unfortunate.

^{* If you cannot set rules for their parent, or a parent of the same dimensions, then this option is removed from the table as absolute positioning will default to the viewport, which isn't what you want.}

Jonathan Sampson 2010-01-12 14:37:04

i alredy mentioned i can't edit html code is CMS generated. i don't have access to html code. my problem is when more element will come in div like "c" i want to force them all in right but when i use float:right it flips the order.

metal-gear-solid 2010-01-12 14:40:27

Jitendra, you can edit your CMS, and add that DIV, or you could also consider re-arranging them with Javascript once the page loads.

Jonathan Sampson 2010-01-12 14:43:25

can we get this thing using any Absolute positioning method? I'm just asking if it's posible. I can't edit html and can't use javascript.

metal-gear-solid 2010-01-12 14:47:08

Yes, but it would require updating your `.css` file each time you add a box. Less effort involved in writing a script with javascript, or adding a div to your CMS output.

Jonathan Sampson 2010-01-12 14:48:05

tell me Absolute positioning method if there is no other way. boxes are fixed. nothing will add or remove. or if it will happen i will change in css.

metal-gear-solid 2010-01-12 14:50:23

Does the parent DIV has a `className` or `ID`?

Jonathan Sampson 2010-01-12 14:52:15

@yes every element has class and ID.

metal-gear-solid 2010-01-12 14:54:12

Can you copy/paste the HTML for that particular area?

Jonathan Sampson 2010-01-12 14:56:15

Absolute positioning should just require a "position: relative" and a fixed width on the red box above, then give fixed widths and "position: absolute" to both of the blue boxes, set their tops to 0px and their left (or right) coordinates as needed.

Tom 2010-01-12 15:34:49

Without the help of an extra div like Jonathan says, it isn't possible to keep the order (this is: if you can't edit html or javascript). If you do it with absolute positioning, please keep in mind that you set the parent element to relative, so the fixed links will stick to the parent element and not any other relative positioned element.

MysticEarth 2010-01-12 15:35:46

I know it's not possible but it's the best answer with all other options. I selectin this as an answer. and I like this type of detailed answer. Thanks @Jonathan Sampson

metal-gear-solid 2010-01-13 10:45:04

Answer 3

A:

Is there a reason that you are not flipping the order of A and B? When you float something right with text the order gets inverted.

OD Ntuk 2010-01-12 15:24:42

ansaurus

tags:

views:

answers:

How to use float without flipping floated item and changing in source order? Is this possible ?

One Additional Div to the Mix?

JQuery Fixes Everything

Absolute Positions - Yuck.

related questions