Why floated buttons cant keep their position?

Question

In snippet you can see, that if i want to past floated button/group they cant keep position in relative segment. Whats wrong with my layout? Code listing u can see https://codepen.io/saveurmind/pen/oWXWOa Content of header placed in segment, I'm using full size column(16) in raw. If i use buttons without "right floated" - all is ok.

<div class="row">
   <div class="sixteen wide column"> 
    <div class="header-bar">
    <div class="ui segment">
     <div class="header-content">
      <h3 class="ui header">Title</h3>
      <div class="ui right floated basic buttons">
       <div class="ui button">One</div>
       <div class="ui button">Two</div>
       <div class="ui button">Three</div>
      </div>
     </div>
    </div>
    </div>
   </div>
  </div>

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

You can use clearfix to contain your child element in your parent block.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

If you want title with same line as btn, two way to go:

change h3 to span (cus h1~h6 will take the whole line)

https://codepen.io/hdl881127/pen/bWdRVp

if you want keep h3, then you need to add a new class called

https://codepen.io/hdl881127/pen/BRNZLj

.inlineblock{
  display:inline-block;
}

More info about clearfix you can read it here:

What is a clearfix?

edited May 23 '17 at 10:31

Community

1
1

answered Apr 16 '17 at 15:02

Dalin Huang

11,212
5
32
49

but in this case buttons not on the same line as "Title" – Some Berry Apr 16 '17 at 15:03
@SomeBerry you want same line? ok wait a sec – Dalin Huang Apr 16 '17 at 15:06
@SomeBerry check my update answer, two way to make them same line – Dalin Huang Apr 16 '17 at 15:13
You are the best! Thank you :) – Some Berry Apr 16 '17 at 15:14
May i ask one more question? what if i want "tittle" to be vertical-align: middle? Nothing happens when i try to use it. Without it text on top of block – Some Berry Apr 16 '17 at 15:33
@SomeBerry something like this? https://codepen.io/hdl881127/pen/wdaemg – Dalin Huang Apr 16 '17 at 15:47
no, not "center". i mean that i need left-aligned text, but on middle of block. as example - on one line as text in buttons. – Some Berry Apr 16 '17 at 15:54
@SomeBerry something like this? https://codepen.io/hdl881127/pen/OmVjBE – Dalin Huang Apr 16 '17 at 17:40
Yeeah! Great thnx! – Some Berry Apr 16 '17 at 17:45

Why floated buttons cant keep their position?

1 Answers1