CODEWITHSUNDEEP
css
brut65
brut65

Reputation: 418

header overlapping other body elements;

Trying to give some margin between div.header and div.Main_2, but the div.header overlaps div.Main_2 because of "position: fixed;". I tried with "margin-bottom: 50px;", but it still remains superimposed.

Is there any way to make the margin with the least possible code, without take out the "position: fixed;"?

CSS:

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

HTML:

<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

MyHeader-Img

Upvotes: 1

Views: 2843

Answers (2)

EnzoTrompeneers
EnzoTrompeneers

Reputation: 1091

If you have a container with position: fixed | absolute. Set in the parent the height to a fixed number and position: relative for it so the space is reserved.

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.container {
 height: 42px;
 position: relative;
}
<div class="Main_1">
  <div class="container">
    <div class="header">MyHeader</div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</div>

Upvotes: 1

iLuvLogix
iLuvLogix

Reputation: 6420

Since 42 is "the answer to the Ultimate Question of Life, the Universe, and Everything", try setting margin-top:42px; to your class Main_2

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

.Main_2 {
  margin-top:42px;
}
<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

Or, as suggested in the comment by @KarlenKishmiryan you can also use padding on your body:

.header {
  font-size: 10px;
  text-align: left;
  background-color: #333333;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px;
  border-bottom: 3px solid #4eb151;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 50px;
}

body {
  padding-top:42px;
}
<body>
  <div class="Main_1">
    <div class="header">
       MyHeader
    </div>
  </div>
  <div class="Main_2">
    <input type="file" name="BttFile" accept="" required class="PathInputFile">
    <input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
  </div>
</body>

Upvotes: 3

Related Questions