Menu
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".
771
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>Make your other two divs as fixed too, keeping the margin-top: 2em parameter
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
