CSS: Float over a clear

Question

I have an item (element A) that I have set to float:right .

Unfortunately, another element on the page that another team wrote (element B) uses clear:both , which means that it ends up going below my element, creating an awkward white space. Although the clear:both was written before I added my element and doesn't have it in mind, I would rather handle this from within my element than change someone else's CSS.

http://jsfiddle.net/2HwWw/

Is there a way to override clear:both so that my element doesn't get cleared, and the other team's item can stay next to mine? Basically, I want element B and element A on the same line, but only through manipulating element A.

Answer 1

Add clear:none to the element so it doesn't get cleared. It should override your co-workers code and if not, use the !important attribute

Answer 2

Try this:

<div style="float:right;height:0;">Mine</div>
<div style="clear:both;">Theirs now</div>
<div style="height:50px" id="blankspaceforstackoverflow"></div>
<div style="float:right">Mine</div>
<div>Where I want this item, without changing its css.</div>

In your div , add:

height:0;

div 's will naturally resize in accordance with their content.

An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div clears the floats. You could use the clearfix method to do so.

More info

JSFiddle Demo

Answer 3

If i understand right, then this second element should not be floatting, so it will go underneath of previous element.

It can be inline-block or inline-table or even block and text-align:right;

Answer 4

Probably the best way to do this is to add clear: none to the element, so it doesn't end up going below the floated element. You would benefit from learning more about the clear property. The clear property is directly related to the float property , so if you add clear: both to your element it must go below the floated elements.