How do I manually leave empty space at the bottom of a html page?
My contents are in div and are positioned:absolutely mostly.
I tried couple of <br>s right before </body>. Did not work.
I tried margin-bottom:2cm; on the div. Did not work.
absolute positioned div's are out of the document flow, so whatever you do, won't affect the other elements on the page and hence, margin-bottom fails as well, so what you can do is use a wrapping div with a height of 100%; and than use margin-bottom: 2cm; and it will work
html, body {
height: 100%;
background: #f50;
}
div { /* Using element selector, you can use ids or classes instead to be specfic*/
height: 100%;
margin-bottom: 2cm;
}
Demo
Add the following CSS in your page:
body {
margin-bottom: 50px
}
Try using padding-bottom instead of margin-bottom because margin is used to space between content, padding is spacing within the element, which should give you the effect you're looking for.
You could also probably just place a blank div before </body> like <div style="height: 200px;"></div> too.
Related
I have made a div that encloses another div inside it. Following is the JSX code for it.
<div className="header-container">
<div className="title">
Make a List
</div>
<div>
Following is the CSS
.header-container{
height: 50px;
width: 100%;
background-color: black;
}
.title{
color: white;
margin: 20px;
}
Following is the result
Why is the black div moving down after applying a margin to the inside div? The margin should be from the parent div but it's not following that?
That's just how margins work - if your child has a margin so large that it reaches outside the parent, it will "push" the parent away from the top.
Give the parent some padding, and then the margin will have something to push against.
Generally if you want to move something away from its siblings, use margin, if you want it to move away from the edges of its parents, use padding.
I have two divs next to each other - one fixed, and one fluid. However, whenever I apply a margin-top to a paragraph within the fluid div, it doesn't fill the whole height of the div and also pushes the fixed div next to it down with it. Unfortunately, I cannot use overflow:auto to fix this because I require the fluid div to have overflow: visible for a very specific need. Weird, I know, but I'm sure there must be a solution to this. However I've been trying for hours with no luck.
Here's a demo of the problem I'm having. I've included an explanation within the divs also: http://jsfiddle.net/LejbU/
<div class="left">
<p>This div has a fixed width of 300px.<p>
</div>
<div class="right">
<p class="withMargin">Test</p>
</div>
-
.left {
background-color: yellow;
width: 300px;
height: 100%;
float: left;
}
.right {
background-color: pink;
height: 100%;
margin-left: 320px;
overflow: visible;
}
p {
margin: 0;
padding: 10px;
color: black;
}
p.withMargin {
margin-top: 100px;
margin-bottom: 100px;
}
That's because of the collapsing margins of CSS Box model definition:
CSS 2.1 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
From the definition:
Margins of inline-block boxes do not collapse (not even with their
in-flow children).
So change the display of p.withMargin to inline-block to avoid this behavior.
Demo: http://jsfiddle.net/LejbU/2/
You've fallen victim to collapsing margins (MDN).
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
In your case:
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with 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 with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
There are a couple ways to get around this, I just use padding instead to change the layout as I require without changing other properties I consider more dangerous. In this scenario: http://jsfiddle.net/rgthree/LejbU/1/
p.withMargin {
padding-top: 100px;
padding-bottom: 100px;
}
add this display:inline-block; to p.withMargin
Another solution I found. Create a new div WITHIN the right div and apply the following css to the new div:
.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}
Example: http://jsfiddle.net/62ueY/
I have two divs:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture:
Here is my relevant css:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it?
This is due to margin collapsing:
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
This is resulting in the parent element reverse-inheriting the child element top margin.
You can prevent this by adding before the child element
Demo Fiddle
....or applying any of the below to the parent:
float: left / right
position: absolute
display: inline-block
Adding display:inline-block; to the parent likely being the preference if it is set to have a width to 100%
Demo Fiddle
just use box-sizing: border-box; on the parent and set the padding there instead of margin-top. It will help you keep consistent spacing on all sides anyways
JSFIDDLE
Just add some top-padding to the parent element. even 1px and it will fix it.
I would actually argue that this answer is better:
https://stackoverflow.com/a/49075574/2387316
Yes, I know it's my own answer, but I think it's important that we don't add random bits of padding, change box-sizing for no reason, add spurious elements to the DOM, or change display/padding simply to fix a display issue. Those solutions all cause problems on their own: SEO is worse, unpredictable box-sizing behavior when trying to do something else, annoyance caused by positioning and display changes, etc. This solution is good for SEO, is scalable, and has no other tangible effect when trying to do other things with your elements.
When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background.
Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter).
Is there a way with CSS I can stop it happening?
http://codepen.io/anon/pen/KrJgm
<div class="one">
<p>Text</p>
</div>
<div class="two">
<p>Text</p>
</div>
<div class="three">
<p>Text</p>
</div>
.one {
background: red;
}
.two {
background: green;
}
.three {
background: gold;
}
UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).
As you updated your question, I think whats troubling you is Collapsing Margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Solution? Use overflow: auto; on the parent element.
Demo
If you are speaking about the white space in the demo as I am not seeing any margins used in your code.. Than below is the answer..
You are not resetting browser default styles..
Demo
* {
margin: 0;
padding: 0;
outline: 0; /* Optional */
}
Here I am using * selector which selects all the elements, and am using margin: 0; and padding: 0; to reset the browser defaults..
Some do not use * selector as they find it bad from a performance point of view, so if that's the case you can use CSS Stylesheet Reset
If you are using margins in your code than please refer this answer...
If you are aware of the CSS Box Model, border, padding and margin are counted outside of the element and not inside.
So in this case you might like to have padding and not margin.
Though, you can alter the behavior of CSS Box Model by using box-sizing property set to border-box or padding-box which will count the border and padding inside of the element rather counting outside of it..
The paragraph tag has margin on it by default. So if you want to get rid of the margin you need to set it to 0 and to expand the paragraph container you need add padding (pads inside of the container), margin is used for outside of the container
p {
margin: 0;
padding: 10px 0
}
http://codepen.io/anon/pen/Bqgyd
As you can see from this example, the input seems to "overflow" its parent div. I'd like to add padding to the input without making it overflow its parent.
I would like to know the best solution/workaround for every browser (including IE, Firefox, Chrome, etc).
You can see this answer, but if you don't like it, you can use box-sizing CSS3 property like this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Live jsFiddle example
Padding adds to the width of your object. One option would be to remove the left/right padding from the input and just use text-indent, although this removes the right padding.
.inside{
background: blue;
border: none;
padding-bottom: 10px;
padding-top: 10px;
text-indent: 10px;
width: 100%;
}
Alternatively, instead of using hardcoded pixel-widths for your padding, you could use percentages, and subtract that value from the width:
.inside{
padding: 3%;
width: 94%;
}
Don't specify the width of the inside div as 100%. A div will automatically fit the width of its parent container. Demo
Looks like the input is inside the div but is located in the top left corner. Because the input takes-up 100% of the div's width it obscures the red background of the div. The div is longer so it sticks out the bottom making it seem like the input is on-top. Do the following:
Apply the padding to the CSS of the outside div not the input box.
You could apply a margin to the input if you want but I think padding
the containing div is better.
Make the input box less wide than the div (<100%)