Beginner's Stuff: How to Stop CSS' Divs from Overlapping

Beginner's stuff: How to stop CSS' Divs from overlapping?

Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.

float: left;

To fix this, remove the .form-nivel label rule and add these.

.form-nivel label:nth-child(1) {
    width: 160px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

.form-nivel label:nth-child(2) {
    width: 160px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

How to avoid overlapping of html elements over each other?

Do not use absolute, unless you want to position each button separately/manually.

A simple solution would be to float right instead.

.me_msg {  background: rgb(250, 250, 250);  border-radius: 10px 10px 0px 10px;  border-width: 1px;  color: #003cff;  padding: 10px;  text-align: right;  margin-left: 10px;  padding: 1.1% 4% 1.1% 4%;  position: relative;  float: right;  min-width: 20%;  max-width: 40%;  box-shadow: 0px 0px 3px #e9e9e9;  display: block;}

<kbd class='me_msg'>My First Message</kbd><kbd class='me_msg'>My Second Message</kbd><kbd class='me_msg'>My Third Message</kbd>

Divs overlapping in chrome

I had to baseline your code, there were so many non best practices used it was just easier for me to refactor the code:

http://jsfiddle.net/QXz8P/10/

HTML

<div class="container">

    <div class="thumbnails">

        <div class="art">
            <img src="http://www.warrenphotographic.co.uk/photography/bigs/03534-Silver-tabby-cat-white-background.jpg" />
            <div class="caption">
                <div class="title">Title1</div>
                <div class="subtitle">SUBTITLE1</div>
            </div>
        </div>

        <div class="art">
            <img src="http://www.southbham.cats.org.uk/uploads/images/pages/cat-stalking-crop.jpg" />
            <div class="caption">
                <div class="title">Title2</div>
                <div class="subtitle">SUBTITLE2</div>
            </div>
        </div>

        <div class="art">
            <img src="http://upload.wikimedia.org/wikipedia/commons/d/d4/Cat_March_2010-1a.jpg" />
            <div class="caption">
                <div class="title">Title3</div>
                <div class="subtitle">SUBTITLE3</div>
            </div>
        </div>        

    </div>

    <div class="thumbnails">

        <div class="art">
            <img src="http://media.npr.org/assets/img/2012/09/20/stripey-kitty-d1332c13945e17c5add3810e5ca39c269af872b8-s6-c10.jpg" />
            <div class="caption">
                <div class="title">Title4</div>
                <div class="subtitle">SUBTITLE4</div>
            </div>
        </div>          

        <div class="art">
            <img src="http://adam1cor.files.wordpress.com/2011/10/cat1.jpg?w=300&h=300" />
            <div class="caption">
                <div class="title">Title5</div>
                <div class="subtitle">SUBTITLE5</div>
            </div>
        </div>  

    </div>

</div>

CSS

.container {}

.thumbnails  { overflow:hidden; display:block; }

.art {
    width:100px;
    display: inline-block;
    cursor: pointer;
}

.art img {opacity:0.5; width:100%;  }

.art .caption {
    width: 100%;
    display: inline-block;
}

.art .caption. .title{
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 600;
    margin:0;
    padding:0;
}

.art .caption .subtitle {
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 1px;
    margin:0;
    padding:0;
}

$(".art").mouseover(function() {
    $(this).find('.title').css("background-color", "yellow");
    $(this).find('.subtitle').css("background-color", "yellow");
    $(this).find('img').css("opacity", "1");
}).mouseout(function(){
    $(this).find('.title').css("background-color", "transparent");
    $(this).find('.subtitle').css("background-color", "transparent");      
    $(this).find('img').css("opacity", "0.5");
});

This should get you closer to a more dry solution of what your were going for.

How can I not allow overlapping in CSS

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>

css for a div overlaps divs which are floating?

Just add a Clear:both; to #zona6 that way it does not float to the nearest float

Here is a jsfiddle

Beginner's Stuff: How to Stop CSS' Divs from Overlapping