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>
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>
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>");
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With