CODEWITHSUNDEEP
htmlcssmarginoverlap
yanabeca
yanabeca

Reputation: 35

How do I margin a div as much as another?

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.

Upvotes: 0

Views: 129

Answers (5)

AgraFL
AgraFL

Reputation: 36

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;
}

Upvotes: 2

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

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

Upvotes: 0

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

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>

Upvotes: 1

N. Nar
N. Nar

Reputation: 101

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";

Upvotes: 0

Nehemiah
Nehemiah

Reputation: 1160

<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>

Upvotes: 1

Related Questions