1

I've been trying to get a <div> to stay on the bottom of another <div>, but so far it only goes to the bottom of the browser - instead of bottom of the <div>. Here's the code I've tried:

<div id="header">


<div style="position: absolute;bottom: 0;left: 0;height: 15;text-align: left;width: 100%;background: url(images/btrans.png);"><b>Driftsmelding: </b><font style="color: #88d327;"></font></div>
</div>

and the css part

#header {
    background: url(images/logo_oslo.jpg);
    background-position: 0px -12px;
}
#header {
    background: url(images/logo.jpg);
    background-position: 0px -12px;
    margin: 25px auto 0px auto;
    width: 1092px;
    height: 140px;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background-color: #333333;
    padding-left: 8px;
    padding-top: 0px;
    padding-right: 0px;
    box-shadow: 0px 0px 16px #000;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

Does anyone know what the problem could be? I'm pretty sure I'm supposed to use position absolute.

mhatch
  • 4,441
  • 6
  • 36
  • 62
Jonas Derminste
  • 38
  • 5

1 Answers1

1

Just add position: relative; to the #header see fiddle https://jsfiddle.net/sxh0n7d1/2/

#header {
    background: url(images/logo_oslo.jpg);
    background-position: 0px -12px;
    position: relative;
}

Here is a good explanation of the difference between relative and absolute Position Relative vs Position Absolute?

Community
  • 1
  • 1
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39