float right without defining width - html

Question

I have the following html
<h2>OUR CHAIRMAN</h2>
<div class="profile">
<div class="fleft"><img class="mgmt fleft" src="images/kishan.jpg" border="0" alt="" /></div>
<div class="fright">
<h5>KISHAN LAL DUGAR</h5>
Mr Kishan Lal Dugar, an experienced entrepreneur and visionary, is the founder of the KL Dugar Group. He has steered the Group to the success it enjoys today. His vision led to the diversification and conglomeration of the Group. His meticulous efforts and foresight lead the Group to reach a turnover of over NRs 6,000 million and build up a workforce of over 800 employees.</div>
</div>
css
.fleft{
float: left;
}
.fright{
float: right;
}
And to the fright class if I define the width then only it goes to right otherwise it goes to downwards. How can I achieve this without defining the width of .fright?
demo

Answer 1

I would like to go a bit detail on this one, why it happens, and you shouldn't be redundant to add width to your element.
Whenever you float any element, it will act as if it's an inline-block level element, and hence, it will create a gutter/empty space on the other side unused. This will result the element rendering below to shift besides the floated element, unless and until the element is inline-block, inline or floated. Here, you have a div which want to float: right;, well, it is floated, but it's a block level element by default, a block level element will behave like a inline-block element, though, there's a catch here, it will take up ENTIRE horizontal space, thus it shifts below the floated element(though the element itself is floated to the right).
Now simple solution here is don't assign float: right; to the element at all, it will simply wrap the text around the floated element, whats the bad point here? I'll show you pictorically..
Demo (This is dirty yea)
So you don't want your element to wrap the text below the image, so the workaround is to provide a margin-left property to the content block and than you will get something like this..
Demo
.fright{
margin-left: 120px;
}
Conclusion: Using margin is no bad, I would still suggest you to use
width property instead.

Answer 2

I hope you are looking for something similar to this.
WORKING DEMO
The CSS Change:
.fright {
display: inline;
}
Hope this helps.

Answer 3

Adding overflow: hidden; to .fright does the trick.
Check out my fiddle: http://jsfiddle.net/KGg6H/7/

Answer 4

lots of ways to resolve and the way you do it could be decided on other code and styling used elsewhere. This is what I used on your demo
.fright{
right: 0;
display: inline;
}