Question 302757 in Html Question posted in
Some basic documentation can be found here.

Html – Use CSS For Space At Bottom of Header

I can’t get any sort of a gap between the bottom of "headermenu" and the top of "list". No values for margin-bottom nor padding-bottom move the table down the slightest bit. I could probably add margin-top to the table, but because I use this header across the site I’d rather make the single fix there as opposed to a janky fix on every page. Thanks in advance!

#headermenu {
  position: absolute;
  padding: 0 0 50px 0;
  font-weight: normal;
  font-size: 75%;
  width: 100%;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.tc {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}
<body>
  <div id="headermenu">
    <div class="alignleft">Create New</div>
    <div class="alignright"><a href="?logout">Logout</a></div><br>
    <div style="clear: both;"></div>
    <div class="alignleft">View</div>
    <div class="alignright"><a href="?edituser">Manage User Settings</a></div>
    <div style="clear: both;"></div>
    <div class="alignleft"><a href="index.php">Main Menu</a></div>
    <div class="alignright"><a href="?admin">Administrator Options</a></div>
    <div style="clear: both;"></div>
  </div>


  <table border id="List" class="tc"></table>
</body>
Tags:

2

Answers


  1. 0

    You need to clear the float. Add below CSS:

    #headermenu::after {
    content: "";
    display: table;
    clear: both;
}
    Login or Signup to reply.
  2. 0

    Using position: absolute will take the element out of the normal flow of the page so any margin on this element won’t affect the element below this. Using position: relative will put the element back in the flow of the page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search