Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop floating DIVs from overlapping

I am developing a pure CSS diagram type of graph. Here is a trimmed down version of it: jsfiddle.

As you can see, some of the floating divs are overlapping each other. If you increase the height of the list items, it works fine: jsfiddle.

The problem is that I want to keep the height small, how can I do this without the divs overlapping the way they are?

HTML:

<div id="ratio">
             <div id="ratio_mid">
                <ul id="ratio_graph"><li class="ratio_val c50">X Comments</li><li class="c41"> </li><li class="c32"> </li><li class="c23"> </li><li class="c14"> </li><li class="c5"> </li><li class="c-4"> </li><li class="c-13"> </li><li class="c-22"> </li><li class="c-31"> </li><li class="ratio_val c-40">X Notes</li>      </ul>
             </div>
          </div>

CSS:

#ratio {
    float: left;
    width: 100%;
}
#ratio_mid {
    float: left;
    height: 50px;
    margin-top: 50px;
    width: 100%;
}
#ratio_graph li {
    border-bottom: 2px solid black;
    border-radius: 3px;
    border-top: 2px solid black;
    float: left;
    height: 46px;
    list-style: outside none none;
    padding: 0;
    width: 10px;
}
.ratio_val {
    border: 3px solid #000 !important;
    border-radius: 5px;
    font-weight: bold;
    height: 24px !important
    line-height: 23px;
    text-align: center;
    width: 100px !important;
}
.c-50 {background-color: rgb(255, 0, 0); margin-top:50px;}
.c-49 {background-color: rgb(252, 2, 0); margin-top:49px;}
...
like image 335
Henrik Petterson Avatar asked Feb 08 '15 18:02

Henrik Petterson


People also ask

How do you stop divs from overlapping?

Just remove the min-width from your CSS! And give min-width to the container with margin: auto to make it center. Save this answer.

How do I stop two divs from overlapping in CSS?

All that is needed to fix this is “min-height” and “min-width” in your CSS. this makes a Div responsive. minimum height will prevent the Divs from overlapping on each other.

How do you stop divs from sliding when floating?

Set height and width to 100% for the bottom div and set overflow auto on the bottom div as well. Now the div will not move up to fill space.

Why are my divs overlapping?

This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.


1 Answers

Replace your

float: left;

with

display: inline-block;
position: relative;

and your

margin-top: ...;

with

top: ...;

float: left; make your element to a display: inline; and on that margin-top doesn’t work well: CSS display: inline-block does not accept margin-top? but you can use postion:relative; to move your element to the right position. Updated: http://jsfiddle.net/1m2e30rf/25/

like image 74
Markus Avatar answered Oct 13 '22 09:10

Markus