I am frustrated trying to fix this issue, but couldn't tackle it.
I have a simple html page structure:
header div, body div, and a footer div.
The problem is that the content of the body div (.form-container) affects the margin of the body div itself (.body-container).
Example:
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
margin-bottom: 30px;
margin-top: 30px;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
How do I get rid of this margin in the body div?
This is due to margin collapsing
This is expected behaviour, Mozilla Developer Network states:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Mastering margin collapsing
In this case the conditions are met by .body-container and .form-container so the margin of .form-container ends up outside .body-container.
What can you do?
There are a number of ways you can stop this behaviour although the easiest would be to use padding instead of margin on .form-container as padding does not collapse.
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
padding: 30px 0;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
There is a div .form-container in body div in which follwing css is applied
.form-container{
margin-bottom:30px;
margin-top:30px;
}
Because there is no content in this div its showing top and bottom margin so u can use float:left or dislay:inline property of you cant remove the css or if you can then simply remove this css.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
float:left;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
Add "margin-top:-30px" to the .body-container part
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
margin-top:-30px;
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
► Run code snippetCopy snippet to answer
Remove this part to remove the unwanted margin :
.form-container{
margin-bottom:30px;
margin-top:30px;
}
See this fiddle
EDIT
If you want to keep the space, you can use a padding-top instead.
See it here
.form-container{
padding-top : 30px;
}
Note
This property background-color: green; of .body-container is not applied because of the background property below which has a white background-color property set here : background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
If you make the header, body and footer div float, the extra space disappears.
The float makes them try to stick together, but your width: 100% makes sure they each are page wide.
I've also edited your code a bit.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
float: left;
}
.body-container{
height:500px;
width:100%;
background: url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left;
float: left;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
float: left;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
Related
Can a centered div contain a fixed div?
I would like to center a fixed nav box and a scrolling main box side-by-side together in any big window. I can fix the nav box in a non-centered view (first code below), or center the view with a scrolling nav box (second code), but have been unable to combine these two traits, after many tries including multiple nested wrappers. Maybe fixed and centering are incompatible? If this is possible I will appreciate seeing how it is done. Thank you.
(1) Fixed nav box, scrolling main box, not centered:
<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>
<div id="nav">
</div>
<div id="main">
</div>
</div>
(2) Centered, nav box scrolls (#bigscreen here is just a temp to show the centering):
<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>
<div id="bigscreen">
<div id="window">
<div id="wrap">
<div id="nav">
</div>
<div id="main">
</div>
</div>
</div>
</div>
First, you need to create a wrapper(#content-wrapper in my answer) that includes #nav and #main divs. Then add display: flex for that wrapper to set child divs horizontally. To align the wrapper into the center, define a fixed width(1100px in my answer) and set left, right margin to auto.
Then add position: relative to the wrapper. That allows you to play with css position property in child divs within the wrapper.
Finally, add position: fixed for #nav div to set fixed position and add position: absolute & left: 300px(in my answer) for #main div to scroll in the wrapper.
See below.
<style>
#content-wrapper {
position: relative;
width: 1100px;
margin: 50px auto;
display: flex;
}
#nav {
position: fixed;
width: 270px;
height: 400px;
background: #ddd
}
#main {
position: absolute;
left: 300px;
width: 800px;
height: 1200px;
background: #eee
}
</style>
<div id="content-wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
You mean like this?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.8);
padding: 10px;
display: flex;
}
#nav {
margin-right: 10px;
width:20%;
background: rgb(240,240,240);
}
#main {
width: 80%;
background: rgb(240,240,240);
padding: 10px;
overflow: auto;
}
#content {
height: 2000px;
background-color: rgb(220, 220, 220);
font-family: arial;
text-align: center;
line-height: 2000px;
margin-bottom: 10px;
}
<div id="overlay">
<div id="nav">
</div>
<div id="main">
<div id="content">Overflow content</div>
</div>
</div>
If this is the result you're looking for you should focus only on the following lines, they are the most important ones to achieve this.
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
}
#nav {
width:20%;
}
#main {
width: 80%;
overflow: auto;
}
Edit: You can click on full page to see the result in expanded height.
I have a header with width: 100% and I want to make it automatically adjustable not only to screen width, but to page full width that can be stretched beyond screen width by other elements. I can do it with JS, but I wonder if it is possible to use pure CSS to achieve this.
In the example below the A block is intended to be the same size as the B block, but it is much shorter on small screens (just scroll everything to the right and you can see).
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
Any ideas?
You can try adding display: grid to the container, in this case body
body {
display: grid;
}
#A {
background: lightblue;
color: white;
}
#B {
position: relative;
width: 5000px;
background: darkblue;
color: white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
If you wrap the two divs (A & B) inside another you can achieve this.
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
.header-wrap { display: inline-block; }
<html>
<head></head>
<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>
</html>
html,
body {
position: relative;
width: 100%;
}
#B {
position: absolute;
width: 100%;
top: 100%;
left: 0;
background: lightblue;
color: white;
}
#A {
position: relative;
width: 5000px;
background: darkblue;
color: white;
min-width:100%;
}
<div id="A"><div id="B">B</div>A</div>
Try giving your A div a max-width of 5000px as well as width:100%
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I wanted to center a div. i did so with margin and float property..but the margin values is not working properly
.body {
width: 100%;
float: left;
}
.content {
width: 70px;
margin: 10px auto 10px auto;
float: none;
border:1px solid red;
}
.content p{float:left;margin:0;}
<div class="body">
<div class="container">
<div class="content"><p>hello all<p></div>
</div>
</div>
here the margin top and bottom values(i.e 10px) is not working properly..margin bottom value is commencing from the top which should have from the bottom!
It's best not to center with float as it takes the element out of the normal document flow. Center with margin 'auto' instead.
HTML
<div class="body">
<div class="content">hello all</div>
</div>
CSS
.body{
width: 100%;
}
.content{
display:block;
width: 70px;
margin: 10px auto;
}
You can try :
body{
margin:0px;
}
.container{
width: 100%;
}
.content{
display:block;
width: 70px;
margin: 10px auto;
}
I'm trying to get a css layout for all modern browsers going and having a hard time. I am not a css guru but hoping one could guide me in the right direction. I'm trying to get a layout similar to this one but with a 100% height left nav and 100% width for the rest. see below layout image.
Based on the link above, I have this, but missing the 100% height...
.wrapper {
width: 100%;
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
border: 2px solid #00f
}
.banner {
background-color: red;
height: 50px;
}
.contentBox {
background-color: pink;
height: 200px;
margin: 20px;
}
<div class="wrapper">
<div class="menu-vertical">side</div>
<div class="mainContent">
<div class="banner">banner</div>
<div class="contentBox">content</div>
</div>
</div>
Any help is appreciated, thank-you
here's the code:
<!DOCTYPE html>
<html>
<body>
<div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>
</body>
</html>