Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

See this example to understand

http://jsbin.com/ocewu

alt text http://easycaptures.com/fs/uploaded/212/8042227539.png

This is code of example

<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }

div {width:300px;height:42px;border:2px solid red}
a{border:2px solid blue;padding:10px}
div a {float:right}
#div2 a {float:left}

</style>
</head>
<body>

I need positioning in right like this

<p>div a {float:right}</p>

<div >
  <a>A</a>
  <a>B</a>
</div>

but element order like this without changing in HTML code

<div id="div2">
  <a>A</a>
  <a>B</a>

</div>
like image 427
Jitendra Vyas Avatar asked Jan 12 '10 14:01

Jitendra Vyas


1 Answers

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.

like image 109
Sampson Avatar answered Sep 28 '22 16:09

Sampson