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.

score 2 · Answer 1 · answered Jul 17 '14 at 22:21

2

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

answered Jul 17 '14 at 22:21

Jnatalzia

1,687
8
14

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

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

edited May 23 '17 at 12:24

Community

1
1

answered Jul 17 '14 at 22:24

imbondbaby

6,351
3
21
54

Sorry but I want to avoid changing their CSS. That clear:none is there for a reason that does not have to do with my element; adding `clear:none!important` to their element may have unintended consequences w.r.t. its relationship with other elements on the page. – Andrew Latham Jul 17 '14 at 22:28
So to be clear you only want to change your element which is element A or the one you set to `float:right;`... correct? – imbondbaby Jul 17 '14 at 22:31
Yes, I only want to change the first div (the one that says "mine") which is element A. – Andrew Latham Jul 17 '14 at 22:32
Updated it again :) with demo – imbondbaby Jul 17 '14 at 22:40
Woah, that works. Why does that work? I would have thought that height would automatically set itself to the interior contents if it was bigger than the CSS specification, but I guess the CSS commmunicates "height: 0" to the other elements before giving the div its actual height? – Andrew Latham Jul 17 '14 at 22:41

G-Cyrillus · Answer 3 · 2014-07-17T22:33:08.030

0

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;

edited Jul 17 '14 at 22:33

answered Jul 17 '14 at 22:26

G-Cyrillus

101,410
14
105
129

score 0 · Answer 4 · answered Mar 27 '18 at 13:41

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.

CSS: Float over a clear

4 Answers4