DIV background image won't stay inside the div

Issue

I have 2 div elements. One is named "profilen" where I want a background to be and have the same size as the other div, and keep the background in another div element named "profilbg" that is placed inside the div, but the background image is going outside the div.

Here’s the code I’ve tried:

<style>
.profavataren {
    float:left;
    width:250px;
    height: 250px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.profuin {
    float: right;
    width: 350px;
    height: 175px;
    padding-top: 75px;
}
.leftcolum {
    border-style: none none solid none;
    padding: 0px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.centercolum {
    border-style: none solid solid none;
    padding: 0px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.rightcolum {
    border-style: none none solid none;
    padding: 0px;
    border-color: #000000;
    padding-left: 3px;
    border-width: 1px 1px 1px 1px;
}
.centerTable { margin: 0px auto; }
.profilen {
width: 100%;
text-align: left;
}
.profilbg {
background: url(<?php echo $uin->backgroundimg; ?>);
background-repeat: no-repeat;
background-size:cover;
}
.profilsize {
    width: 600px;
    margin: auto;
}
</style>
<div class="profilsize" align="center">
  <table width=100% cellspacing=0>
    <tr><td class="subTitle" ID="title" colspan="2"><b><font face="monbaiti" size="3" color="a1a1a1"><?php echo $uin->login; ?></font><?php echo $ledelsen; ?></b></td></tr>
  </table>

  <div class="profavataren">
    <img src="<?php echo $uin->avatar; ?>" height="250" width="250">
  </div>
  <div class="profuin">
    <div align="center" style="padding-left: 35px; padding-right: 35px;"> 
      <table align="center" class="centerTable">
        <tbody>
          <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr>
          <tr><td class="leftcolum">Status:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $status; echo "($online)"; ?></td></tr>
          <tr><td class="leftcolum">Penger:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $penger; ?></td></tr>
          <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="profilen">
    <div class="profilbg">
      <?php echo nl2br($uin->profilen); ?>
    </div>
  </div>
</div>

and here’s the div I want it inside

<div class="profilen">
  <div class="profilbg">
    <?php echo nl2br($uin->profilen); ?>
  </div>
</div>

but the background always sticks out off those div elements. If you take a look at this screenshot, you see the background image shouldn’t be above the red line, as the div should be below that.

http://prntscr.com/ahslxw

Solution

Use clear: both;

That should fix your problem

Answered By – Thomas Nikolai

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0