I’m having a very frustrating time with this tutorial so right now in for some desperate need of guidance…
Ok…
Lets say i had a paragraph nested inside a div. Right now the width + padding of the div spans across the entire body element, so life is good.
}
div, p
margin: 0;
padding:0;
}
html {
background: #ccc;
}
body {
width: 600px;
margin: 0 auto;
background: #fff;
}
div {
background: #A1B3C7;
width: 400px;
padding-left: 100px;
padding-right: 100px;
}
p {
width: 300px;
background: #666;
color: #fff;
}
If I were to add p padding-left: 100px; and padding-right: 100px; though things now change…
}
div, p
margin: 0;
padding:0;
}
html {
background: #ccc;
}
body {
width: 600px;
margin: 0 auto;
background: #fff;
}
div {
background: #A1B3C7;
width: 400px;
padding-left: 100px;
padding-right: 100px;
}
p {
width: 300px;
background: #666;
color: #fff;
padding-left: 100px;
padding-right: 100px;
}
So now, from what I can tell, we are looking at… div padding-left: 100px + p padding-left: 100px + p width: 300px; + p padding-right: 100px; = 600px;
…and this is where I pretty much become totally lost because I’m confused as to how exactly the div can contain a nested element size that’s bigger than its own width. At the moment it’s only 400px wide and we now have a paragraph that’s 300px+100px+100px= 500px wide. What exactly is the div containing here? How can it contain a nested element bigger than itself? If someone could take the time to explain what the div is covering vs not covering I’d be forever grateful! What’s the big obvious thing that I’m missing? …heh.
It’s a tutorial about nested padding. I’m just trying to understand what is happening to the div exactly at this point of the tutorial because it’s not making sense to me as to how the div can contain an element bigger than its given width. This is what happens when that extra paragraph padding is added… (body width: 600px; / blue part is the div 400px; with padding-left: 100px and padding-right: 100px; / grey is the paragraph 300px with padding-left: 100px and padding-right: 100px; )
Which is where I become confused. Is the div allowed to stretch outside it’s stated width (400px)? the whole div being 400px and the nested p being a total of 500px really has been giving me a migraine over the last couple hours, heh. I get that the div padding-right is sacrificed to make room for the paragraph to fit inside its parent, what I don’t get is what/how is the div containing an element bigger than itself currently.
Really? Wow. I thought widths were set like cement, didn’t know it would stretch to fit.
So pretty much then I’m looking at a div padding-left: 100px / a stretched div width of 500px containing p padding-left: 100px + p width: 300px; + p padding-right: 100px; / then a div padding-right:100px that is off screen to make room for the nested element. (Sorry I’m writing this out. Just trying to fully digest it, heh)
If I could ask one more question, why wouldn’t overflow occur in this instance? Why does the div stretch to fit the nested element instead of the paragraph just busting it? ( I think overflow is the term for it )
Thanks a ton, I’m really new at this stuff! I appreciate it!
Sorry, that makes my eyes spin a bit. If you want the div to stay at a set width, it’s better to set padding on the inner elements and not set a width on them. So, give the outer div a width and no padding. If you have multiple paragraphs inside that div that you want padding on, perhaps have an inner div with no width set but some padding. Then inside that have your <p> elements with no width set and no padding, so that they just find there own width based on the available space.
Try to avoid setting widths as much as possible. They will only get you into trouble—especially when you start to reflow the layout on small screens etc.
Some new CSS properties are emerging that allow you to add padding to the outer div and not have that padding add to the overall width, but I’d leave that to one side for now, as it’s not fully supported yet.
why wouldn’t overflow occur in this instance?
Because that’s not how CSS works. You could set the container to overflow: hidden; but that would just cut off some of the content, which isn’t viable in most cases.
Using the padding values that were given in the first post, it’s a bit difficult to see what is happening, so I took a shot at rewriting it and adding a few pixels to the padding for clarity. Give this a try… (Copy and paste into an HTML file. Open in your browser.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en-us">
<meta name="viewport" content="width=device-width">
<title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1160596-Utterly-confused-about-nested-widths-with-padding-urgle
Thread: Utterly confused about nested widths with padding... urgle
2013.07.31 19:54
TheMockingTurtle
-->
<style type="text/css">
html {
background-color:#ccc;
}
body {
width:600px;
background-color:#fff;
}
div {
width:400px;
background-color:#a1b3c7;
padding:0 120px;
margin:0;
}
p {
width:300px;
background-color:#666;
color:#fff;
padding:0 130px;
margin:0;
}
</style>
</head>
<body>body {width:600px;}
<div>div {width:400px; padding: 0 120px;} The padding added to this div causes it to overflow the body width.
<p>paragraph {width:300px; padding:0 130px;} The paragraph is indeed overflowing into and beyond the padded space along the right side of the div.</p>
</div>
</body>
</html>
Actually, I should apologise to some extent, because the width of the div element IS fixed. The reason the div accommodates the paragraph with the padding is because it’s really 600px wide because of the left and right 100px padding you placed on it.
If you had no padding on the div, it would be limited to 400px width and the wider content inside would hang out.
I should also have mentioned the other overflow options, such as overflow: auto; which would allow you to scroll to the right to view the hidden content.
Really? Wow. I thought widths were set like cement, didn’t know it would stretch to fit.
If an element is given a width then it won’t expand even if its content is larger than the width set (unless that element is a table-cell or display:table-cell where widths and heights may be treated as minimums).
The inner content will still keep the width that you have set for it even if that width is larger than the parent but as Rons example shows the inner div will just stick outside of the parent div. The default for overflow is “visible” so you will see the inner div sticking out of the parent but as far as the rest of the page concerned that element has finished inside the parent and anything that sticks out will be ignored as far as layout is concerned and may indeed overlap anything that happens to be in the way. Although you can see the portion that sticks out it will no longer take part in the flow of the page as far as other elements are concerned.
(There is a way to make inner elements bigger than their parents by using negative margins on the child but in these cases the parent element must have no set width (it must be auto) otherwise it will ignore anything larger than itself as before. However negative margins may again cause the element to overlap other elements that are in the way anyway.)
