Semantic UI floats

Question

Semantic UI newbie here, I couldn't find anywhere in the docs how (if it's possible) to float a simple element without having it to be something else (like a button or a segment).

For instance, I have at the bottom of a page a step navigation/counter that is written like so:

<div class="row three column">
    <div class="column">
        <br>
        <p class="ui left floated compact basic segment stepper">Step 2 of 3</p>
        <a class="ui right floated compact basic segment stepper">Go back</a>
    </div>
</div>

Beside the fact that having to place a <br> before the floating elements looks kinda weird to me, isn't it possible to just add classes like left floated and have the thing foat? Like we'd with bootstrap with pull-leftfor instance…

If I understand well, segment is for grouping related contents (corresponding semantically to the HTML5 <section> tag). Therefore, it seems a bit overkill – if not semantically wrong – to use segments in such situations.

Answer 1

Currently there are no global utilities like pull-left in bootstrap. Whenever right float , for example, is defined in the SUI code, it is always in association with an element such as button, segment, list, etc.

You can simply define your own global utility, without need to "overkill" with any SUI elements:

div [class*="left floated"] {
  float: left;
  margin-left: 0.25em;
}

div [class*="right floated"] {
  float: right;
   margin-right: 0.25em;
} 

Though for your situation, an icon button might be semantically suited for both the elements.