2

I've got a series of elements that are float: left; on each other. Ideally I'd like to clear the float on either side of a single element with one class, without adding another to clear: left; after the non-floated element.

Example where .one-line should be on own line.

How I'm doing it now with two classes.

I feel like this should be able to be done without multiple classes. Any ideas?

AlbertEngelB
  • 16,016
  • 15
  • 66
  • 93
  • 2
    `.one-line { clear: both; float: none; }` Whelp. – AlbertEngelB Jun 10 '14 at 14:39
  • 2
    Is it just me or did I see that `float: none` bit in your first example the first time I clicked it...? I refreshed and now it displays as expected. I've seen this not only with JS Bin but also CodePen. – BoltClock Jun 10 '14 at 14:40
  • Actually, if you notice, the `float: none` bit causes the margins on `.one-line` to go out of whack. Presumably, this is due to how the clearance interacts with the margins. A curious case that has me wanting to investigate further. (I don't think it has to do with margin collapsing since margins should never collapse when floats are involved, even if the float comes first.) – BoltClock Jun 10 '14 at 14:46
  • you can do without float: left; using display: inline-block; – Alex Wilson Jun 10 '14 at 14:48
  • 1
    @BoltClock Yeah, I was playing with the jsBin, apparently it kept the same url even after editing. – AlbertEngelB Jun 10 '14 at 14:50
  • @BoltClock Yeah, it does look like the margins are collapsing between the first row and `.one-line`. Maybe it's the combination of the floats and `clear: both;`? – AlbertEngelB Jun 10 '14 at 14:53
  • @AlexWilson Well, I guess inline-block [does work in this specific situation.](http://jsbin.com/konivi/3/edit) – AlbertEngelB Jun 10 '14 at 15:04
  • 2
    I figured out that case by the way: http://stackoverflow.com/questions/24196773/why-is-this-non-float-margin-collapsing-with-a-float – BoltClock Jun 13 '14 at 05:33
  • @BoltClock Awesome, thanks for figuring that out! – AlbertEngelB Jun 13 '14 at 13:25

2 Answers2

2

This feels dirty to me, but it does do what you want (and even works as far back as IE8). Adding a margin to the same class will stop anything from floating to its right and force them down to the next line.:

.one-line {
  clear: both;
  margin-right:100%;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 1
    I suppose that solution does work. It does introduce some limitations with centering, but then again you don't have to worry about collapsing margins with this either. – AlbertEngelB Jun 10 '14 at 14:56
0

give it a margin-right of 100%

.button {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
  border-radius: 60px;
  float: left;
}

.one-line {
  clear: both;
  margin-right:100%;
}
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100