CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Me hdi
Me hdi

Reputation: 1912

CSS float is reversed

I want put div with class name rangechart_box in the top right range slider but when i use of display: inline-block and float: right together It is reversed downward, What do I do to put in the top right range slider?

DEMO: https://jsfiddle.net/g4xx50Ld/3/

I want it as this but with float:right and without margin-right:-5px in class name rangechart :https://jsfiddle.net/g4xx50Ld/4/

#slider-range{
    width:100%;
    margin: 0 auto;
  background: #000;
  height: 6px;
}
.rangechart_box {
    position: relative;
    top: 6px;
}
.rangechart {
    background: #ea8755;
    display: inline-block;
    width: 20%;
    //margin-right: -5px;
    float: right;
}
<div class="rangp" style="width: 100%;">
	<div class="rangechart_box">
		<div class="rangechart" style="height: 14px;"></div>
		<div class="rangechart" style="height: 18px;"></div>
		<div class="rangechart" style="height: 24px;"></div>
	</div>
  <div id="slider-range"></div>
</div>

I want it putting in the top and right without spaces

Upvotes: 0

Views: 106

Answers (4)

Alan
Alan

Reputation: 61

New Edit 3: https://jsfiddle.net/g4xx50Ld/12/

.rangechart_box {
    text-align: right;
}

Notice the 

 <div class="rangechart_box"><div class="rangechart" style="height: 14px;"
    ></div
    ><div class="rangechart" style="height: 18px;"></div
    ><div class="rangechart" style="height: 24px;"></div>
  </div>

You have to get rid of the spaces between the divs. You can read more here.

Upvotes: 2

leoap
leoap

Reputation: 1729

You really should go for css flexbox:

.rangechart_box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.rangechart {
    background: #ea8755;
    width: 20%;
}

fiddle: https://jsfiddle.net/g4xx50Ld/10/

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

You can do something like this:

.rangechart {
    background: #ea8755;
    display: inline-block;
    width: 20%;
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/g4xx50Ld/7/

Upvotes: 1

Engin
Engin

Reputation: 815

Use clearfix.

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

Then add this class to your div like this.

<div class="rangechart_box clearfix">

Upvotes: 1

Related Questions