How can I stop float left?

Question

I have the following code:

<div style="float: left; width: 100%;">
  <label style="float: left;">ABC</label>  
  <input style="float: left; font-size: 0.5em;" type="button"   onclick="addTiny(0,'Question_Text'); return false;" value="&#x25BC;" title="Editor" />   
  <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" />   

  <div class="adm">
    <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
      abc
    </textarea>
  </div>
</div>

My problem is that the div with class adm floats to the left and so goes on the same line as the label and two input buttons. Is there a way that I can make this shift away from floating?

You should accept an answer, even if it's your own. – DᴀʀᴛʜVᴀᴅᴇʀ Jul 02 '19 at 14:56 — DᴀʀᴛʜVᴀᴅᴇʀ, Jul 02 '19 at 14:56

score 121 · Answer 1 · answered Jun 01 '11 at 17:23

121

A standard approach is to add a clearing div between the two floating block level elements:

<div style="clear:both;"></div>

answered Jun 01 '11 at 17:23

Shad

14,384
2
20
34

4

But in some cases you need to add `display:block` – Volodymyr Levytskyi Jul 28 '14 at 16:29

score 72 · Answer 2 · edited Jun 17 '16 at 03:18

72

Sometimes clear will not work. Use float: none as an override

edited Jun 17 '16 at 03:18

Matthew Lock

12,582
11
88
124

answered Feb 26 '15 at 02:39

DanKodi

3,342
26
26

3

Yes, if you want to override an existing CSS entry `float: left` (or right) then this is the solution. – Alexis Wilke Jul 05 '15 at 06:13

Brett · Answer 3 · 2011-06-01T17:38:21.323

32

You could modify .adm and add

.adm{
 clear:both;
}

That should make it move to a new line

edited Jun 01 '11 at 17:38

answered Jun 01 '11 at 17:25

Brett

4,001
2
24
38

That should be `.adm` I think. – tjm Jun 01 '11 at 17:33

score 10 · Answer 4 · answered Jun 01 '11 at 17:24

10

add style="clear:both;" to the "adm" div.

answered Jun 01 '11 at 17:24

tjm

7,342
2
29
48

score 4 · Answer 5 · answered Jun 01 '11 at 17:23

4

Okay I just realized the answer is to remove the first float left from the first DIV. Don't know why I didn't see that before.

answered Jun 01 '11 at 17:23

TonyG

1,585
2
13
17

score 3 · Answer 6 · answered Jun 01 '11 at 17:24

3

You should also check out the "clear" property in css in case removing a float isn't an option

answered Jun 01 '11 at 17:24

Trey

5,443
4
22
29

score 3 · Answer 7 · answered Jun 01 '11 at 17:24

3

The css clear: left in your adm class should stop the div floating with the elements above it.

answered Jun 01 '11 at 17:24

Chris Kent

852
10
18

score 1 · Answer 8 · answered Aug 14 '20 at 17:56

For some reason none of the above fixes worked for me (I had the same problem), but this did:

Try putting all of the floated elements in a div element: <div class="row">...</div>.

Then add this CCS: .row::after {content: ""; clear: both; display: table;}

score 0 · Answer 9 · edited Aug 06 '19 at 14:45

0

Just add overflow:hidden in the first div style. That should be enough.

edited Aug 06 '19 at 14:45

StardustGogeta

3,216
2
17
32

answered Aug 06 '19 at 14:43

sunny

1

score -1 · Answer 10 · answered Oct 30 '20 at 11:07

-1

There's a class in bootstrap for it

class="clearfix";

answered Oct 30 '20 at 11:07

TS71M

3
1
3

How can I stop float left?

10 Answers10

Linked