How can I not allow overlapping in CSS

Question

I'm beginner with CSS and Boostrap. I want to add button to the left side of my list, but it overlaps with the item below it when I set float:left. It overlaps with the following green item. I tried pull-left text-left class but they didn't work.

I hope Anyone can help me to fix it?

here is picture in my browser :

here is my html code:

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

#addcredit{
    
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
                    <div class="list-group">
                        <div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                        <div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
                        <div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
                        <div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                    </div>
                </div>

Answer 1

I would use a flexbox for .list-group-item and set the right margin for the button to auto. This also allows for easy and perfect vertical alignment.

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.list-group-item {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
                    <div class="list-group">
                        <div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="margin-right: auto;"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                        <div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
                        <div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
                        <div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                    </div>
                </div>

Answer 2

Please check this. i use .sort-right .list-group-item{float:left; width:100%;}.

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

#addcredit{
    
}
.sort-right .list-group-item{float:left; width:100%;}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="col-md-3 sort-right">
                    <div class="list-group">
                        <div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                        <div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
                        <div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
                        <div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                    </div>
                </div>

Answer 3

Maybe you can try tu use an absolute position on your button.

.btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: XXXX;
  height: XXXX;
}

And so you have to use relative position on the parent

.list-group-item {
  position: relative;
  width: XXXX;
  height: XXXX;
}

Answer 4

You need to use overflow:hidden; inside that parent class

body{
background:#f4f4f4;
}

@font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}

.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}

/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}

/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}

#header .create{
padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}

.breadcrumb a{
color:#333333;
}

.dash-box{
text-align:center;
}

#login{
margin-top:30px;
}

/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}


@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}

.loginlink{
margin-top:10px;
padding-top:10px;

}

.linkcolorfont{
color: #000000;
text-decoration: none;
}

a:hover{
text-decoration: none;
color: #555555;
}

img {

display: block;
margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
.sort-right {
float: right!important;
}
}

.ltr {
direction: LTR;
}

.bg-green{
background-color: #5cb85c;
color: #fff;
}

.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}

#addcredit{

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>

<div class="list-group-item" style="overflow:hidden;"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>