I am placing a div inside another div. Please see the code below JS Fiddle link
HTML:
<body>
<div>
<div class="wrapper"><div class="set1"></div></div>
</div>
</body>
CSS:
* {
box-sizing: border-box;
}
.wrapper{
border: 1px solid black;
padding: 0;
}
.set1{
width: 100px;
height: 100px;
background-color: grey;
border: 5px solid;
margin: 0;
}
Here I am expecting the height of parent div = the height of child. But that's not the case as seen in fig below. I have applied box-sizing : border-box hence the border for the parent should be included in it's height but is not the case. Can you please explain? Also how can I make the child to fully occupy the parent in such case?
It is because of border(1px each side), use maybe outline instead.
set1
wrapper
As already mentioned, you are using a border on wrapper which adds these 2px to height.
If you want that the wrapper has the same height as the parent, you can use a margin on set1 div.
Like this:
.set1{
width: 100px;
height: 100px;
background-color: grey;
border: 5px solid;
margin: -1px 0;
}
So the margin should always have the height of the wrapper border.
Here your working fiddle: https://jsfiddle.net/gzs9u7m2/2/
Related
Whenever I add margin to any element I get overflow, I tried adding box-sizing, position:relative. but nothing works
searched on google but nothing seems to help me
can anyone know why is this happening?
Sample Image
The margin is outside the element. One way to deal with it is to use calc on width as in the following snippet.
And note that margin is diferent from padding: paddingis inside the border (so it is included in the area covered by the background color), margin is outside:
.x {
box-sizing: border-box;
margin: 30px;
width: calc(100% - 60px);
background: yellow;
border: 5px solid red;
}
<div class="x">margin....</div>
With padding instead of margin, this would be:
.x {
box-sizing: border-box;
padding: 30px;
width: 100%;
background: yellow;
border: 5px solid red;
}
<div class="x">Padding....</div>
You can't add margin to a div that is a sibling of your container or else it'll create an overflow. Use padding instead. See how the text in the margin example shifts the text.
.parent {
width: 100px;
height: 100px;
background: red;
}
.padding-example {
padding: 10px;
}
.margin-example {
margin: 10px;
}
<div class="parent">
<div class="padding-example">Correct</div>
</div>
<hr>
<div class="parent">
<div class="margin-example">Wrong</div>
</div>
I have a child element (h1 in my example) inside a parent div.
Why does the margin of the child appear to be outside of the parent.
The example below:
The child has a padding of 30px and a red border round it as expected.
The div has a yellow background but I expected it to be of height 100 + 30 + the h1 + 30 + 100.
div {
background-color: yellow;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Interestingly if I put a border round the div as in the example below - it behaves as I expected. I know I can work round this, but I would like to know what is going on?
div {
background-color: yellow;
border: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
It's "margin collapsing" which can seem confusing at first.
I recommend you read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
This can be fixed by applying display: inline-block on the div or the h1. However, I highly recommend using padding on the div in this case, that should solve the problem permanently.
Empty blocks: If there is no border, padding, inline content, height,
or min-height to separate a block's margin-top from its margin-bottom,
then its top and bottom margins collapse. Ref
You can use the outline css property for consistent behavior.
div {
background-color: yellow;
outline: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
When you set the border that means you are telling the DIV container it's boundary.
you have to assign the widths and floats.
float: left;
width: 100%;
Right now the DIV is starting from top. But showing background from the mid.
div {
background-color: yellow;
padding:100px;
}
h1 {
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Or this
div {
background-color: yellow;
padding:1px;
}
h1 {
margin:100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I am getting a little gap between child-div and its parent-div. Is it possible for child-div to on its parent-div height? or (the way around)possible if the parent-div can scope the height of its child-div for not to overlap or get some extra spaces.
I have a DOM like this:
<div class="parent-div">
<div class="parent-image">
</div>
<div class="child-div">
</div>
</div>
here is my CSS:
.parent-image:{
height:60px;
}
.parent-div{
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
margin-bottom: 20px;
width: 100%;
}
.child-div{
????
}
If you specify height: 100%; it will take the height of the parent.
If your child has padding, you need to change its box-sizing.
.child {
padding: 10px;
box-sizing: border-box;
}
If your child has more content than the parent, you either need to tell it to scroll, or hide. Note that on some browsers the scroll-bar will be inside the div, and on other browsers, it'll be on the outside.
.parent.c .child {
overflow: auto;
}
or
.parent.d .child {
overflow: hidden;
}
Demo of All
In your CSS, you can set your child-div to:
.child-div{
height:100%;
}
Here is a demonstration: http://jsfiddle.net/Xq7zQ/