How do I margin a div as much as another?

Question

I want my holder to not to overlap with my navbar, can I set holder's margin-top to be exactly as much as my navbar without putting in numbers?

Here's the html,

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: grey;
  position: fixed;
  top: 0;
  width: 100%;
}
#holder {
  min-height: 100%;
  background-color: #F7F4EE;
  position: relative;
}

<div>
  <ul ID="navbar">
    <li><a class="active" href="home.html">Home</a>
    </li>
    <li><a href="news.html">News</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
  </ul>
</div>

<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

Thanks.

How should your output look? – Ani Menon Jun 29 '16 at 10:15 — Ani Menon, Jun 29 '16 at 10:15

AgraFL · Accepted Answer · 2016-06-29T10:39:20.310

try to use this

margin: 0 auto;

and for addition, you can use this

display: block;
margin: 0 auto;

remember to put it on css so it become like this

#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    margin: 0 auto;
}

#holder {
    min-height: 100%;
    background-color: #F7F4EE;
    position: relative;
    display: block;
    margin: 0 auto;
}

score 1 · Answer 2 · answered Jun 29 '16 at 10:18

<style>
#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    display:inline-block;
    width:100%;
    z-index:999;
}
#navbar li {
    list-style:none;
    display:inline-block;
    margin-right:10px;
}
#holder {
    min-height: 100%;
    background-color: #F7F4EE;
    position: relative;
    padding-top:50px;
}
</style>

<div id="navbar">
  <ul>
    <li><a class="active" href="home.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>
<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

score 1 · Answer 3 · answered Jun 29 '16 at 10:25

You can do this with JQuery, you just calculate height of navbar, and that height will be margin top of holder:

$(document).ready(function(){
  var navbar = $('.navbar').height(); 
  console.log(navbar);
  $('#holder').css({
    marginTop: navbar
  })
})

.navbar {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: grey;
  position: fixed;
  top: 0;
  width: 100%;
}
.navbar ul {
  margin: 0;
}
.navbar li {
    list-style-type: none;
    display: inline;
}
#holder {
  min-height: 100%;
  background-color: #F7F4EE;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="navbar">
  <ul>
    <li><a class="active" href="home.html">Home</a>
    </li>
    <li><a href="news.html">News</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
  </ul>
</div>

<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

Yea I'm not there yet sadly, but I'll sure use it when i star learning JQuery. — yanabeca, Jun 29 '16 at 10:36

Tharaka Arachchige · Answer 4 · 2016-06-29T10:26:27.653

To get navbar to top of the holder add z-index to navbar

#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1;
}

For the dynamically set the margin-top to the holder you can add this jquery part

var navBarHeight = $('#navbar').height();

$('#holder').css({
    paddingTop:navBarHeight,
})

DEMO

score 0 · Answer 5 · answered Jun 29 '16 at 10:22

You can use JavaScript to get the height of navbar

var navbarHeight = document.getElementById('navbar').offsetHeight;

and than put the value of the navbarHeight as the holder margin

document.getElementById('holder').style.height = navbarHeight + "px";

How do I margin a div as much as another?

5 Answers5