How to float three button left to right?

HTML & CSS
1

Hi there

This is my js fiddle

I want all these 3 button should float from left to right but its not working

2

.actionButtonBackground{float:left; }

3

also, that first .actionButtonBackground is missing the leading “class” dot.

4

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Float All Buttons Right</title>
<style>
.actionButtonBackground{
  background:#ECECEC;
  background:-webkit-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
  background: -o-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
  background:-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
  background:-moz-linear-gradient(top,#ECECEC 0%,#C5E6F9 100%);
  border:1px solid #2FD4FF;
  color:#000;
  padding:3px;
  font-family: 'trebuchet ms', geneva;
  border-radius:3px;
  font-size:13px;
  width:50px;
  line-height:12px;
}
.actionButtonBackground{
  position:relative; z-index:8; border:1px solid #3C7FB1;
  background-color:lime;
}
.actionButtonBackground:before{
  content:""; display:block; position:absolute; 
  top:0px; left:0px; right:0px; 
  bottom:0px; border:1px solid #24CFFC;
}
.clb {clear:both;}
.dib {
  display:inline-block; padding:0.88em; background-color:cyan;
}
.flr {float:right;}
</style>
</head>
<body>

  <h1>Float All Buttons Right</h1>
  <div class="dib flr">
    <div class="actionButtonBackground">
      <label>Submit</label>
    </div>
    <div class="actionButtonBackground">
      <label>Clear</label>
    </div>
    <div class="actionButtonBackground">
      <label>OK</label>
    </div>
    <div class="clb">
    </div>
  </div>

</body>
</html>
5 
put this two line code in your css with your css :-


.actionButtonBackground{   
    display:inline-block;
    margin:0 10px;
}
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.