This question already has answers here:
<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`
(4 answers)
Closed 5 years ago.
I need to have a scrollable div inside a fieldset. My problem is that a fieldset expands to it's contents width instead of staying withing its parent.
<div class="section">
<fieldset>
<div class="list">
</div>
</fieldset>
</div>
http://jsfiddle.net/UziTech/tg5uk25L/
The two boxes should both have scrollbars on the bottom but the top one is in a fieldset so it won't control the overflow.
How do I get the fieldset to only be as wide as it's parent?
Browsers have custom css in their default stylesheet for fieldset elements.
On Chrome it has min-width: -webkit-min-content;
You could just set this rule :
.section fieldset{
min-width: 0;
}
See fiddle:
http://jsfiddle.net/tg5uk25L/4/
Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!
Just set overflow: scroll on the parent .section. That will contain the overflow and add scrollbars.
.section {
width: 100%;
border: 10px double;
box-sizing: border-box;
overflow: scroll; <----
}
FIDDLE
from your jsfiddle, perhaps you forget to add a fieldset to the second section
this is a quick fix
.section {
width: 100%;
border: 10px double;
box-sizing: border-box;
overflow-x: auto;
}
td {
padding: 0 100px;
border: 1px solid;
}
http://jsfiddle.net/oussamaelgoumri/meqvbjf1/
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 5 months ago.
I just started learning CSS and I am having trouble understanding this. I have set both the margin and the padding to 0 (I am also using this CSS reset, so I think this is redundant - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/).
But for some reason the right side of the child box goes outside the parent. here is my CSS code. cal is the parent
#cal {
border: 5px solid black;
width: 30%;
height: 600px;
margin: 0;
padding: 0;
}
#screen {
width: 100%;
border: 5px solid black;
padding: 0;
margin: 0;
}
<div id="cal">
<div id="screen"></div>
</div>
And the result, at the right edge...
But then, when I use box-sizing:border-box, now the elements line up how I want. I don't understand why
Your child element is overflowing because you gave it a 100% with plus an additional 5px border
Solution 1 - using calc
Removing 5px from the 100%
width: calc(100% - 5px);
Solution 2 - changing the box-sizing property
Using box-sizing: border-box;
You commonly see people changing the box-sizing from content-box to border-box. This basicly makes it so the padding and border are both included in the width property.
Learn more at: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
This question already has answers here:
<html> , <body> , padding, margin, 100vh and calc()
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I already reset all the margin and padding to 0.
see the codepen: https://codepen.io/geeklog/pen/zYvVeOZ
<div class="container">hello</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
margin: 10px auto;
background-color: orange;
}
margin: 10px auto;
Unlike paddings, CSS margins are not exactly a spacing measure when it is applied to an element inside. When you apply a margin to the elements like above, the top margin will tend to go outside of the parent element. It is just an example of the general margin collapsing behavior.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Therefore, in your code snippet, it's not only the body with the height of 100vh that you see on the screen. It also includes 10px of space right above the body element.
To resolve this issue, remove margin from .container and consider applying padding-top: 10px; to the body element instead.
because of your margin of .container
you have 2 options,
first, remove the margin of .container.
second, add overflow: hidden on body
I think the first option is better.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
background-color: orange;
}
<div class="container">hello</div>
Because it was minimum height, so height will be greater than 100vh. try to change min-height to max-height.
In the snippet below, padding-right for .ctr is not visible when content starts to overflow at small viewports.
I've read other answers and I know how to fix it.
I just need to move padding:20px from .ctr to .row. Or just add margin-right:20px to last child.
But, I couldn't find the reason as to why this happens. Could someone please explain, what's going on? any resource for further learning will be highly appreciated 🙏
Thanks!
.ctr {
display: flex;
overflow-x: auto;
padding: 20px;
}
.row {
margin: 0 auto;
display: flex;
}
.child {
margin-right: 20px;
width: 600px;
height: 100px;
background: red;
}
.child:last-child {
margin-right: 0;
}
<div class="ctr">
<div class="row">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
The padding is actually there when the content overflow it hides it.
we can illustrate this using background and background-origin
.container {
display: flex;
overflow-x: auto;
padding: 20px;
width: 200px;
background: linear-gradient(red, red) no-repeat;
background-origin: content-box;
border: 1px solid;
}
.overflow {
background: pink;
min-width: 400px;
height: 100px;
border: 1px solid;
}
<div class="container">
<div class="overflow"></div>
</div>
the white space you see on the edges is the padding
background-origin: content-box; makes the background exclude border and padding which will show us that the padding isn't clipped only covered, this happens because padding is part of the parent and the content overflow the parent so it covers it.
There's nothing special about this.
Dude the reason is the rendering or calculation in browsers (or the logic or system that we have developed starts from the top/left and ends at right/bottom). So, padding the hierarchy of placement is:
margin > border > padding > content
(And, remember it starts with top/left).
Now the issue you are seeing is only because you have not increased the height of item. If you do so - You will not only find issue on the right-padding but also on the bottom-padding.
Padding is only an effort to wrap something which is flexible. When you give a 600 * 5 width to items then they take more width than available.
padding is not as strong contender like margin. Because, margin you apply on same element - whose width or height you are manipulating. padding is being applied on an element which is trying to impose restrictions on some other element (usually direct child). So, this is the difference between padding and margin and how they get applied on browsers via Box-Model.
Hope, this clarifies a bit.
This question already has answers here:
CSS: Margin-top when parent's got no border
(7 answers)
Impact of border property on top margin
(3 answers)
Why does this CSS margin-top style not work?
(14 answers)
Margin on child element moves parent element
(18 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 years ago.
I have a p element with a paragraph of text inside a div element. Without a border on the div element, the p element is positioned in the top-left corner, but if I add a border to the div element it "pushes down" the paragraph from the top edge (not the left edge, however).
Why does this occur?, and is there a method of preventing this?
html,
body {
height: 100%;
}
div {
min-width: 300px;
max-width: 500px;
min-height: 200px;
max-height: 450px;
height: 100%;
background-color: Pink;
}
div.first {
border-width: 2px;
border-style: solid;
border-color: Black;
}
p {
width: 75%;
height: 75%;
background-color: Black;
color: White;
}
<div class="first">
<p class="one">Paragraph one text...</p>
</div>
<div class="second">
<p class="two">Paragraph two text...</p>
</div>
UPDATE:
You can prevent this movement by adding margin: 0; to the style of your p tag. See below for an explanation of how and why this happens.
The reason your p tag gets pushed down is because of margin collapsing (or, rather, margins not collapsing when you set a border).
See this page for a more in-depth explanation of how it works. From that page:
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
Basically, your margins are getting collapsed by the browser when you don't have a border set, yet they are calculated when you do set that border.
For ways to prevent the browser from collapsing margins, see this question. From that question (first part originally quoted from this other question):
Found an alternative at Child elements with margins within DIVs You can also add:
.parent { overflow: auto; }
or:
.parent { overflow: hidden; }
This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:
.parent {
padding-top: 1px;
margin-top: -1px;
}
This is related to margin collapse.
The margin on the <p> element collapses with it's parent.
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.
Note that:
Adjoining vertical margins collapse... if and only if... no line boxes, no clearance, no padding and no border separate them.
In order to prevent margin collapse on both of your examples, you can use methods other than border. For example, overflow:auto:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
html,
body {
height: 100%;
}
div {
min-width: 300px;
max-width: 500px;
min-height: 200px;
max-height: 450px;
height: 100%;
background-color: Pink;
overflow: auto;
margin: 0 0 1em;
}
div.first {
border-width: 2px;
border-style: solid;
border-color: Black;
}
p {
width: 75%;
height: 75%;
background-color: Black;
color: White;
}
<div class="first">
<p class="one">Paragraph one text...</p>
</div>
<div class="second">
<p class="two">Paragraph two text...</p>
</div>
See also:
Mastering margin collapsing.
What You Should Know About Collapsing Margins.
I want my <fieldset> elements to behave like vanilla <div>'s by filling their containing element and showing a scrollbar when they are set to overflow: auto.
For instance, I don't see why the fieldset in this
example is wider than its containing div:
<div class=outer>
<fieldset class=inner>
fooooooooooooooooooooooooooooooooooooo
</fieldset>
</div>
<div class=outer>
<div class=inner>
fooooooooooooooooooooooooooooooooooooooo
</div>
</div>
and corresponding css:
.outer {
width: 60px;
}
.inner {
overflow: auto;
display: block;
height: 60px;
border: 1px solid red;
}
It turns out the culprit (in some cases) was the user-agent stylesheet in webkit was setting:
fieldset {
min-width: -webkit-min-content;
}
setting min-width: 0; in the stylesheet corrected the issue in Chrome 27, Safari 6.0.2, and WebKit Nightly r146031. It fails to correct the issue in Chrome 25 and FireFox 19.0.2.
Either way this does not solve the problem.
<fieldset> does not inherit the width from the parent div. The .inner div does inherit the width and shinks. You can solve this just by adding width: inherit as a rule to .inner. Note that <fieldset> may also get some extra padding and margin.
http://codepen.io/anon/pen/fxjek
To fix your fieldset or make it like the div below it in your example, add the following css::
fieldset{
margin:0px;
padding:0px
}
you need to reset the margin and padding first to act like the div below it then add the width you want :
.inner {
width:60px;
}
The reason the Fieldset version is wider than the div version is because
fieldset has its own default padding unless you specify otherwise.
See: http://jsfiddle.net/RDVY7/
I added this to your CSS:
fieldset {
margin:0 ;
padding:0 ;
}
and it fixed the problem. If you want spacing between your fieldset version
and your div, just adjust the margin: element.