CODEWITHSUNDEEP
htmlcss
Mikeb
Mikeb

Reputation: 791

Creating Vertical Bar's with divs

I'm tring to create two horizontal bars like the below example using only html and css. I'm using the following code:

<div style="height: 150px;">
  <div style="width: 55px;float:left;">
      <div>340.8</div>
      <div style="background-color:#95111d; height: 75px;">
          &nbsp;
      </div>
  </div>
  <div style="width:55px;float:left">
      <div>340.8</div>
      <div style="background-color:#9e9e9e; height: 115px;">
          &nbsp;
      </div>
  </div>
  <br style="clear: both" />
</div>

The problem with this is both bars are sitting at the top of their containing div and not at the bottom so you get the 2nd below images effect.

I have some code that will be generating the height of these bars so I can't just add top padding/margin to push them into position. Is there any way to do this without resorting to javascript to calculate a margin and bottom align them?

enter image description here

End Result

Upvotes: 0

Views: 5608

Answers (4)

Shiridish
Shiridish

Reputation: 4962

Here is the CSS and markup that should do the work (no absolute positioning used)-

DEMO

HTML:

<div id="wraper">
  <div id="c1">
     <div id="h1">340.8</div>
      <div id="b1">
          &nbsp;
      </div>
  </div>
  <div id="c2">
      <div id="h2">340.8</div>
      <div id="b2">
          &nbsp;
      </div>
  </div>
  <br style="clear: both" />
</div>

CSS:

#wraper {
   height: 150px;
}

#c1 {
   width: 55px;
   vertical-align: bottom;
   display: inline-block;
}

#b1 {
   background-color: #95111d;
   height: 75px;
}

#c2 {
   width: 55px;
   margin-left: -4px;
   display: inline-block;
}

#b2 {
   background-color: #9e9e9e;
   height: 115px;
}

DEMO

Upvotes: 2

gnomical
gnomical

Reputation: 5043

You can get the desired effect by using inline block elements and giving them a vertical-align value of bottom. here is some simple html and css.

html

  <span class="bar" style="height:75px;background-color:#95111d;">
      <div class="label">340.8</div>
  </span>
  <span class="bar" style="height:115px;background-color:#9e9e9e;">
      <div class="label">350.1</div>
  </span>

css

.bar {
    display:inline-block;
    width: 55px;
    vertical-align:bottom;
}
.label {
    position:relative;
    top:-1em;
}

Upvotes: 0

alereis
alereis

Reputation: 35

<html>
    <body>
    <div style="height: 150px;position:relative;" >
    <div style="width: 55px;float:left;position:absolute;bottom:0;left:0px;">
    <div style="background-color:#95111d; height: 75px;">&nbsp;</div>
    <div>340.8</div>
    </div>
    <div style="width:55px;float:left;position:absolute;bottom:0;left:55px;">
    <div style="background-color:#9e9e9e; height: 115px;">&nbsp;</div>
    <div>340.8</div>
    </div>
    <br style="clear: both" />
    </div>
    </body>
</html>

jsFiddle

Upvotes: 0

grc
grc

Reputation: 23575

You can use absolute positioning to fix an element to the bottom of its container.

HTML:

<div class="container">
  <div class="bar">
      <div>
          <div>340.8</div>
          <div style="background-color:#95111d; height: 75px;">&nbsp;</div>
      </div>
  </div>
  <div class="bar">
      <div>
          <div>340.8</div>
          <div style="background-color:#9e9e9e; height: 115px;">&nbsp;</div>
      </div>
  </div>
  <br style="clear: both" />
</div>​

CSS:

.container {
    height: 150px;
}

.bar {
    width: 55px;
    float: left;
    position: relative;
    height: 100%;
}

.bar > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

Example: http://jsfiddle.net/grc4/pAnqe/1/

Upvotes: 1

Related Questions