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.
Related
My container div does not expand to fit its child div - which has a top: 20px value.
I don't even have floats and have used both overflow:hidden (cuts part of the child div) or overflow:auto (creates scrollbars).
See codepen example: Codepen
<div class="container">
<div id="model">fdsf</div>
</div>
Appreciate any solutions to this problem.
Remove top and position properties and use margin: 10px auto 0 auto;
#model {
background: yellow;
border: 1px solid orange;
width: 100px;
height: 100px;
margin: 10px auto 0 auto;
display: block;
}
Demo
1) In your example, the container is expanding to fit the child div correctly. The height of the child is 100px plus two times the border of 1px, in total 102px. Then, the height of the container is exactly 102px, as the developer tools in any browser can tell you.
Height of the contents totals 102px, thus the inner height of the container is 102px. This is by definition "expanding to fit the contents".
2) Now, you are setting position: relative for your child div. The following quote from Mozilla Developer Network should give a complete explanation to what is happening in your example.
Relative positioning:
This keyword lays out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
3)
Obviously, you can get rid of this effect by getting rid of relative positioning, and just using margin instead. Regarding your comment, no, top, right, bottom, and left should absolutely not work. They are meant to be used for a totally different thing, for what the quote above explains.
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.
I will try to explain my situation the best that I can.
I have a site where it displays a list of DIV blocks with info inside. 3 DIV blocks are created using width:33%
Inside that div block I want another hidden div block that is exactly the same as the previous div block.
So I have something like this....
<div class="columnParent">
<div class="columnChild">
"Various stuff here that overlaps parent DIV"
</div>
"Various text that initially appears, but disappears after clicking a button"
</div>
Here is the CSS...
.columnParent { width:31%; float: left; margin-right:15px; margin-bottom:4%; }
.columnChild { width:31%; float: left; margin-right:15px; margin-bottom:4%; visibility:hidden; position: absolute;
background: #FFF;}
Now what happens when the child DIV is visible, it ends up being larger than the parent. This is because the width:31% is taking 31% of the entire HTML page, while the parent div is taking 31% of its parent div(not listed here).
Is there a way to get the child DIV to take the same width as its parent?
I want the Child div to be an exact replica of its parent div. I will be changing the text inside, but the actual div should be the same size and be in the exact same position.
Purpose: I have a button that displays the child div to make the parent disappear and display a new child div that has different information. Inside the child div there will be a back button to make that div disappear again (using JS).
Any help is greatly appreciated!!! Thanks!
put the child element width: 100%; , then it will take the exact width of parent element. After that, you can include jQuery to fadeIn/fadeOut the child element and manipulate it as you wish in javascript codes.
You can try by giving width 100% and position relative to columnChild, like below.
.columnChild {
width:100%;
float: left;
margin-right: 15px;
margin-bottom: 4%;
visibility: hidden;
position: relative;
background: #FFF;
}
Note: Position relative will help to adjust the position relative to the parent position and width 100% will help to make the same width as the parent div.
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.