This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Margin-Top push outer div down
(8 answers)
Closed 4 years ago.
I have a parent and child div, and when I add margin to the child div, it expands the parent div. How can I stop this from happening. You can see it happen here because the scroll bars appear.
I had a look at this similar question but I it doesn't seem like that answer does anything.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.container {
background-color: orange;
height: 100%;
width: 100%;
}
.child {
background-color: green;
height: 100%;
width: 200px;
margin: 10px;
}
<div class="container">
<div class="child"></div>
</div>
I would like this to be the final output. With the Orange div being 100% height
When you want the margins to collapse on the child div, give overflow: hidden to the parent div.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.container {
background-color: orange;
height: 100%;
width: 100%;
overflow: hidden;
padding: 10px;
}
.child {
background-color: green;
height: 100%;
width: 200px;
}
<div class="container">
<div class="child"></div>
</div>
Now there's no scrollbars. I have used padding on the parent instead of margin. Please don't use calc() - not a good idea.
Related
This question already has answers here:
Removing body margin in CSS
(10 answers)
Closed 9 months ago.
The red #container element doesn't seem to take up all the available space in the document, even when it's width is set to 100%. There seems to be some extra padding in the html element, but even when I set it's padding to 0 it's still there.
How could I fix this? Thanks in advance.
Demo code:
body, html {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
background-color: red;
}
<body>
<div id='container'></div>
</body>
JsFiddle here
You have to add padding: 0 and margin: 0 to:
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
Try adding margin: 0px; to your CSS:
body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
Seems to be working here:
https://jsfiddle.net/k2boqeLt/
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I have a div inside which I have content. I gave width = auto and then gave max-width but the container is taking up a constant fixed no matter what the size of the content is:
.adjustablebox {
background: white;
height: 50px;
width: auto;
overflow: hidden;
padding: 8px;
max-width: 350px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
.body {
background: black;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
div is an block element. its default behaviour is covering full width so its doing that but as you have given property of max-width so its just expanding to that limit. in order to do your stuff you have to change its behaviour to
display: inline-block;
the .adjustablebox div is block level, it takes the entire available width of the container.
If you want it to be auto width you can do
.adjustablebox {
display: inline-block;
}
or use flex box.
instead of using auto, use 100% and remove max-width.
Also you can remove both tag
.body {
background: black;
}
.adjustablebox {
background: white;
height: 50px;
width: 100%;
overflow: hidden;
padding: 8px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
hope this will solve your problem.
This question already has answers here:
What is the point of CSS collapsing margins?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
Does anyone have an idea / explanation why this code affects the anchestors in it's vertical position?
This effect take place at least in chrome v75 and firefox v67 on linux.
Actually I would expect:
no affect on any parent-element of this two children
the first child on top aligned
second child followed by first child, fully visible
Codepen
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
margin-top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header>
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
like that
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
position:absolute;
top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header style="position:relative;">
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
This question already has answers here:
Why is a div with "position: absolute" not by default relative to the document?
(3 answers)
How does the CSS position on a div affects position of sibling division?
(2 answers)
Closed 4 years ago.
I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.
However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.
I read the mdn docs for this...but perhaps I am not understanding the wording?
Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.
html, body {
height: 100%;
width: 100%;
}
.container {
height: 500px;
width: 500px;
border: 1px solid black;
position: relative;
}
.box1 {
height: 100px;
width: 100px;
background: blue;
position: relative;
margin: auto;
}
.box2 {
height: 100px;
width: 100px;
background: red;
position: absolute;
margin: auto;
}
<div class='container'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>