How to Use Float Without Flipping Floated Item and Changing in Source Order? Is This Possible

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

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.}

Float:right reverses order of spans

The general solution to this problem is either to reverse the order of the right floated elements in the HTML, or wrap them in a containing element and float that to the right instead.

HTML float right element order

That 'inverted order' is the intended result.

You can dig around in the CSS Specification if you'd like, but your example renders as it ought to.

If you'd like them to display in the same order as the markup, float the .container right, its children left.

Updated jsfiddle

css float elements with unequal heights left and up in grid

You can use the popular library Masonry.

A dynamic layout plugin for jQuery The flip-side of CSS floats

Here is a code example...

$('#container').masonry({
  itemSelector: '.box'
});

Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.

For folks that aren't using jQuery, note that there's also Vanilla Masonry which is the framework-free version.

Tip: Make sure the parent container has position:relative so all the content is bound to your container.

Menu floating left and right

Here's what I suggest: http://jsfiddle.net/thirtydot/w64Nb/2/

The HTML is identical to what's in your question.

No, .item-{uid-for-menu} are random, but for each li I can float with jquery last tree menu. – Gabriel Santos

@thirtydot assume the class always will be the same, and suggest one
solution, then, I adapt my javascript to generate the same class as my
sample class. – Gabriel Santos

Instead of relying on certain classes being present, or forcing them to be the same using JavaScript, you can just solve the whole problem with jQuery (which in a different comment, you said you have available):

$($('#menu li').slice(-3).get().reverse())
    .addClass('right').remove().appendTo('#menu .menu');​

That will take the last three li inside #menu, add the .right class (which is just float: right), and reverse the order in the HTML.

How can you float: right in React Native?

why does the Text take up the full space of the View, instead of just the space for "Hello"?

Because the View is a flex container and by default has flexDirection: 'column' and alignItems: 'stretch', which means that its children should be stretched out to fill its width.

(Note, per the docs, that all components in React Native are display: 'flex' by default and that display: 'inline' does not exist at all. In this way, the default behaviour of a Text within a View in React Native differs from the default behaviour of span within a div on the web; in the latter case, the span would not fill the width of the div because a span is an inline element by default. There is no such concept in React Native.)

How can the Text be floated / aligned to the right?

The float property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:

1. Use textAlign: 'right' on the Text element

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(This approach doesn't change the fact that the Text fills the entire width of the View; it just right-aligns the text within the Text.)

2. Use alignSelf: 'flex-end' on the Text

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

This shrinks the Text element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View.

3. Use alignItems: 'flex-end' on the View

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

This is equivalent to setting alignSelf: 'flex-end' on all the View's children.

4. Use flexDirection: 'row' and justifyContent: 'flex-end' on the View

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row' sets the main direction of layout to be horizontal instead of vertical; justifyContent is just like alignItems, but controls alignment in the main direction instead of the cross direction.

5. Use flexDirection: 'row' on the View and marginLeft: 'auto' on the Text

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.

6. Use position: 'absolute' and right: 0 on the Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Like in real CSS, this takes the Text "out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View by default (although you can explicitly set a distance from the top of the View using the top style property).

---

Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.

arranging div one below the other

Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.

#inner1 {   float:left; }
#inner2{   float:left;    clear: left;}

<div id="wrapper">    <div id="inner1">This is inner div 1</div>    <div id="inner2">This is inner div 2</div></div>

Stop Pandas from converting int to float due to an insertion in another column

If you set dtype=object, your series will be able to contain arbitrary data types:

df["int"] = pd.Series([], dtype=object)
df["str"] = pd.Series([], dtype=str)
df.loc[0] = [0, "zero"]
print(df)
print()
df.loc[1] = [1, None]
print(df)

   int   str
0    0  zero
1  NaN   NaN

  int   str
0   0  zero
1   1  None

---

Related Topics