CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 4319

How do I get a border around these divs using css?

I am trying to make a progress indicator for a Gantt chart, showing actual progress against target progress, a bit like this:

enter image description here

The black bar is the target, and the red is actual progress.

Sample code (it's generated on the fly) is this:

<div style='border: 1px solid red; position:relative; text-align:right'>
       <div class='progressBarRed' style='width:40%; float:left'></div>
       <div class='progressBarEmpty' style='width:60%; float:left;'></div>
       <div class='progressBarTarget' style='width:75%;'></div>
 </div>

and the CSS is:

/* Gant Bar
-----------------------------------------------*/

    div.progressBarEmpty
    {
        height:18px;
        position:relative;
        background: #dddddd;
    }

    div.progressBarGreen
    {
        position:relative;
        top:0px;left:0px;
        height:18px;
        background: #009900;
        z-index:0;

    }
    div.progressBarRed
    {
        position:relative;
        top:0px;left:0px;
        height:18px;
        background: #ee0000;
        z-index:0;

    }

    div.progressBarTarget
    {
        position:absolute;
        top:7px;left:0px;
        height:4px;
        background-color:#000000;
        border-style: none;
        z-index:1;
    }

The problem I'm having is that I can't get the red border to sit around the bars, like this:

enter image description here

It works with an empty bar, but when I introduce the red bar (and the float) the border collapses.

JSFiddle is here: https://jsfiddle.net/bdgriffiths/funnx3uz/

Upvotes: 2

Views: 77

Answers (2)

The Pragmatick
The Pragmatick

Reputation: 5477

You can make the same with just one element. Add z-index: -1; to the pseudo-element to take it to the bottom of everything.

Hover over the bar to see the red progress bar.

Fiddle

div {
    height: 25px;
    border: 1px solid red;
    width: 100%;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 75%;
    top: 10px;
    background-color: black;
}
div:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: red;
    z-index: -1;
}
div:hover:after {
    width: 75%;
    transition: 1s ease;
}
<div></div>

Upvotes: 2

Marcin Łojewski
Marcin Łojewski

Reputation: 127

Add overflow: auto; style to your div:

<div style='border: 1px solid red; overflow: auto; position:relative; text-align:right'>
       <div class='progressBarRed' style='width:40%; float:left'></div>
       <div class='progressBarEmpty' style='width:60%; float:left;'></div>
       <div class='progressBarTarget' style='width:75%;'></div>
 </div>

Basically if You are using "float div" inside another div it causes that inner div's height (with float style) is not added to outter div's height so in Your example the outter div has 0 height. overflow causes that it's inner div's height is added to outter div's height.

Upvotes: 1

Related Questions