0

How can I can put inline the two divs in order to make a progress bar? I want that no matter the width the divs they stay together in a single line

I am using bootstrap and I know that I can use the one there but in my case the one of bootstrap dont help for my project.

<div class="container">
    <div class="col-xs-12 col-lg-4">
        <div class="panel panel-chart">
            <div class="panel-heading naranja">
                <h3 class="panel-title">Panel</h3>
            </div>
            <div class="panel-body">
                <p>Title</p>
                <div class="col-xs-12 col-lg-12">
                    <div class="progress-line azul part-one" style="width:70%"></div>
                    <div class="progress-line amarillo part-two" style="width:30%"></div>
                </div>
            </div>
        </div>
    </div>

https://jsfiddle.net/s5m9hb0g/

Vucko
  • 20,555
  • 10
  • 56
  • 107
Ana Gonzalez
  • 33
  • 3
  • Alternate solution would be to make the progress remaining the background for one div: https://jsfiddle.net/s5m9hb0g/3/ – Lawrence Johnson Apr 24 '16 at 16:33
  • but in that case what happend if I want 3 sections? @LawrenceJohnson – Ana Gonzalez Apr 24 '16 at 17:16
  • Well, that's a different question. :) If it were me, I'd use either the flex approach, tables, or absolute positioning depending on how you want the three to work and what your target browser requirements are. – Lawrence Johnson Apr 25 '16 at 18:51

2 Answers2

1

Make the parent of the two parts of the progress bar display:flex;. This will make both divs display on the same line.

.panel-body .col-xs-12{
  display:flex;
}

JSFiddle

Wowsk
  • 3,637
  • 2
  • 18
  • 29
0

Use float: left; on .part-one, see this fiddle

.part-one{
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px; 
    float: left;
}
Vincent G
  • 8,547
  • 1
  • 18
  • 36