CODEWITHSUNDEEP
htmlcsscss-position
Sivaprakash
Sivaprakash

Reputation: 473

How to make vertical space between div tags?

I have three div tags and i want to make space between the div tags vertically and also want my first div tag as a fixed one.

When i set my first div position as not a fixed one, i can able to make vertical space.

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

When i change my "div a" position as fixed , both "div a" and "div b" came down from the margin-top: 2em.

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

Please help me to make my "div a" as fixed and to make space between "div a and b".

Upvotes: 12

Views: 88755

Answers (3)

seantunwin
seantunwin

Reputation: 1768

In order to keep div.a (the fixed one) to the top of the page, add top: 0; and if you want it to stay on top of the rest of the content, include z-index: 2;.

In order to add spacing between div.a and div.b you are going to have to put a container div around div.b and appropriate padding to it. If you just put padding on the main container div it will offset div.a.

If possible, set a definitive height to div.a, instead of a percentage, as this will make the vertical alignment of div.b and it's container much easier. That way you can set the margin-top for div.b to be the height of div.a.

Below is the CSS and HTML refactored for better readability:

/* CSS */
* {
  margin: 0;
  padding: 0;
}
div {
  width: 100%;
}
div.container {
  height: 100%;
}
div.container,
div.b-container {
  background-color: lime;
}
div.a {
  height: 70px;
  background-color: blue;
  position: fixed;
  top: 0;
  z-index: 2;
}
div.b-container {
  position: relative;
  padding-top: 2em;
  margin-top: 70px;
}
div.b-container div.b {
  width: 70%;
  height: 100%;
  background-color: gray;
  margin: auto;
  
  margin-bottom: 2em;
}
div.c {
  height: 5%;
  background-color: aqua;
}
<!-- HTML -->
<div class="container">
  <div class="a">
    a
  </div>
  <div class="b-container">
    <div class="b">b
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

Upvotes: 7

Mikem
Mikem

Reputation: 34

when you set it to fixed it takes it out of the normal document flow. thats why the other elemts are getting lost under it. add a top: 0; to div a and change the margin-top for div b worked for me. its atleast a starting point. im not sure what the end result your looking for. check out the link

http://jsfiddle.net/8ar3kvep/

<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed; top:0;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 
4em; 
margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>

Upvotes: 1

Murtaza Zaidi
Murtaza Zaidi

Reputation: 597

Make your other two divs as fixed too, keeping the margin-top: 2em parameter

Upvotes: 2

Related Questions