CODEWITHSUNDEEP
htmlcsscss-float
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

float right without defining width

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

Upvotes: 2

Views: 789

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157314

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)

enter image description here

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

enter image description here

Conclusion: Using margin is no bad, I would still suggest you to use width property instead.

Upvotes: 2

ShufflerShark
ShufflerShark

Reputation: 387

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

Upvotes: 0

Charles Ingalls
Charles Ingalls

Reputation: 4561

Adding overflow: hidden; to .fright does the trick.

Check out my fiddle: http://jsfiddle.net/KGg6H/7/

Upvotes: 2

Nitesh
Nitesh

Reputation: 15749

I hope you are looking for something similar to this.

WORKING DEMO

The CSS Change:

.fright {
    display: inline;
}

Hope this helps.

Upvotes: 1

Related Questions