CODEWITHSUNDEEP
htmlcss
Z. Alessandro
Z. Alessandro

Reputation: 79

Margin bottom is zero while a relative positioned div is at the end of the page

I just solved this problem: Position relative and background-color: can't cover the page and now the problem is that my div (position:relative) at the bottom has no height and also, as a consequence i guess, no margin-bottom. My html and body end at the height of my screen if i try to see the model with browser's element inspector. Tried adding margin-bottom to the div, to the body and to the html. I also can't assume the height of my relative positioned div because there is php printing an unknown amount of content inside.

<html style="min-height:100%;">
   <head></head>
   <body style="background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;background-attachment:fixed;">
      <?php
         print("<br><div></div><div style=\"position:relative;max-width:50%;margin:20px auto;\"><div style=\"position:absolute;top:0;left:0;\" class=\"usage\">Istruzioni:<br> Some php printing.More php printing.");

         print(" Some php printing.</div><div style=\"position:absolute;top:0;right:0;\" class=\"usage\">Stringa in ingresso: <br> More printing.More printing.
         </div></div>");
      ?>
   </body>
</html>

I want to have some margin at the bottom of my page (my relative div contains only absolute positioned divs). Here's an image of what i see: https://i.sstatic.net/8xTQg.jpg

Upvotes: 0

Views: 904

Answers (1)

JasonB
JasonB

Reputation: 6368

By placing the columns in a container div and floating them rather than positioning them absolutely, you can achieve the look you are going for without losing the padding and margin of the container. The caveat is you need to do a clear-fix to make sure that the container is tall enough to contain the floated children.

body {
  background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;
  background-attachment: fixed;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 150px;
  background-color: cyan;
  border: 1px solid black;
  text-align: center;
}

.wrapper {
  margin: 70px auto 40px;
  width: calc( 100% - 150px);
  max-width: 400px;
}

.column {
  background-color: black;
  color: white;
  border-radius: 15px;
  padding: 8px;
}

.column:nth-of-type(1) {
  float: left;
}

.column:nth-of-type(2) {
  float: right;
}

.clearfix {
 clear: both;
 }
<html style="min-height:100%;">

<head></head>

<body>
  <nav>Nav</nav>
  <div class="wrapper">
    <div class="column">
      Istruzioni:
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
    </div>
    <div class="column">
      Stringa in ingresso: 
      <br> 000111
    </div>
    <div class="clearfix"></div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions