3

This is a jfiddle

http://jsfiddle.net/79prY/

This is the result: enter image description here

I want the circled div to be at the bottom of the purple div.

The circled div is this div

<div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>

I tried to do this 

position:relative;
    bottom:0px;

but nothing changed, could u help please

(and please why my solution didn't work?)

Marco Dinatsoli
  • 10,322
  • 37
  • 139
  • 253

4 Answers4

0

DEMO

Do the following:

  • set .slNewClass div to position: absolute; & bottom: 0px;
  • To avoid the content from overlapping absolute positioned div make .mainTable div box-sizing: to border-box then add add padding bottom like this padding-bottom: 130px;

Note: Bottom padding should be the same as bottom div height + some extra pixels for breathing space.

Imran Bughio
  • 4,811
  • 2
  • 30
  • 53
0

You can use position: absolute; bottom: 0px; and position: relative; on its container.

Demo

.bottom {
    position: absolute;
    bottom: 0px;
}

However the absolutely positioned div will not expand the height of its container and will overlap other content if the height is too small.

Using relative positioning moves it x [unit] from its original position. Setting

position: relative;
bottom: 0;

will move it 0 [unit] upwards from the bottom.

Community
  • 1
  • 1
Mathias
  • 5,642
  • 2
  • 31
  • 46
  • I don't want to use absolute, because of the downsides you mentioned. isn't there any other solutions? – Marco Dinatsoli May 31 '14 at 10:29
  • @MarcoDinatsoli Is the height of content in the service level div static? – Mathias May 31 '14 at 10:32
  • I could make it static if you want. – Marco Dinatsoli May 31 '14 at 10:33
  • @MarcoDinatsoli If the height is static you can add a matching amount of padding on the bottom of its container (and add `box-sizing: border-box`). However you still need to decide what to do if the height is not enough to show both the informationTable. Do yo want to scroll the container, reduce font-sizes or some other solution. – Mathias May 31 '14 at 10:41
0

DEMO HERE

you just need to add 2 rules.

.slNewClass {
    position: absolute;
    bottom:0 ; 
}

.mainTable {
    position: relative;
}
Community
  • 1
  • 1
shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50
0

try this:

first change the table's style:

.informationTableClass {
  height: 100%; /* 60% to 100%*/
  width: 100%;
}

then move the div inside the table and change it like this:

<tr><td colspan="2" style="height:100%"></td></tr>
<tr>
  <td colspan="2">
    <div class="slNewClass">
      <div class="details">
        <span class="content">Service Level</span>
        <span class="value" id="slSpan" runat="server">0%</span>
      </div>
    </div>
  </td>
</tr>

http://jsfiddle.net/XaE75/

yusefnejad
  • 176
  • 2