CODEWITHSUNDEEP
htmlcss
user1242321
user1242321

Reputation: 1696

html element alignment with float:left and float:right

This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.

Please have a look at this fiddle: http://jsfiddle.net/2yaRU/

<div > //float left
  Sometext <span> text<.span>//float:right
<div>

the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.

This cant be a complex issue, so is there something very common I do not get here?

Upvotes: 0

Views: 171

Answers (2)

thgaskell
thgaskell

Reputation: 13226

I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.

Removing the trailing space brings the X back onto the same line as the text.

http://jsfiddle.net/2yaRU/8/

If you want a space after the text, you should add a non-breaking space (&nbsp;) to the html instead.

http://jsfiddle.net/2yaRU/9/

Upvotes: 0

Matthew Darnell
Matthew Darnell

Reputation: 4588

Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;

Upvotes: 1

Related Questions