I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
Related
Consider the following HTML and CSS
.outer {
border: 1px solid red;
margin-left: -10px;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
Where is that 1px extra spacing on the left, between the inner and outer div, coming from?
Change the negative margin to -11px, and it works as it should (no gaps).
You can also remove all the margins and compare with the "negative + positive" scenario above, to see how the two are not the same.
Thank you.
EDIT
After figuring it out, I just wanted to share the below in case helpful to future visitors.
The inner div is back to the exact spot it was when it started, after applying the -/+10px. It is just that the border that used to be in between the content edge of the body element, and the margin edge of the inner div (i.e. outer div's border) has shifted 10px to the left together with outer div. Thus, it works as it should without any oddities.
Margins of a child box naturally apply from the content edge of its parent box. That is how the box model should work. It is not possible to change that behavior with box-sizing: border-box
Possible solutions to the eliminate gap include (but are not limited to):
Converting the CSS to SCSS, storing the border width in a variable and subtracting that variable from parent's margin. (It was not necessary to convert to SCSS and use a variable, but it make the style sheet much easier to maintain and update.)
Eliminating the need for a negative margin altogether with JavaScript
Using outline instead of border on the parent div
I think it has to do with the .outer border. You can see below that when the red border is moved 10px to the left, there is a gap where it would have been if it wasn't moved to the left (when the margin is 0).
And because the .inner div is relative to the .outer div, it doesn't 'fill up' that 1px gap it creates by moving .outer 10 pixels to the left.
Here you can see the gap. (It looks like 2 pixels because the page is zoomed in by 200%)
Edit with extra info:
Extra "proof" to show that the extra space comes from the .outer div,
if you remove the 1px width of the .outer border, you also remove the gap:
Sorry for wrong answer, i was writing in a rush... the math:
(-10pxMargin + 10pxMargin + 1pxBorder) = 1
you need
(-11pxMargin + 10pxMargin + 1pxBorder) = 0
let me know if this is clear enough, the thing is that margin doesnt include borders.
That extra pixel is from the .outer element.
.outer {
margin-left: -10px;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
Instead of using border fothe outer element. You can use outline for it.
.outer {
outline: 1px solid red;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
I have the following part of my html
<div class="header">
<div class="header-bar">
<div class="pull-left">
<div class="title">Ci models database</div>
</div>
</div>
<div class="clear-both"></div>
<ol class=breadcrumb>
<li class="active">All models</li>
</ol>
</div>
the css(breadcrumb and active classes are bootstrap)
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
But between header-bar and breadcrumb html added a white space(see bootply). How can I remove this white space, since no padding and margin can be found between to divs.
The problem is that the calculated height of the internal .title div is greater than the calculated height of the container .header-bar. Properties like height, min-height, border, padding can directly effect heights, whereas properties like display, box-sizing and position can all indirectly effect height.
The result is the internal .title div pushes down the next div in the flow by 10px.
CSS has no rules that say a div must contain it's children in height and stop them from effecting other divs, even when height is directly defined. We need to tell it exactly how it should behave when things are rendered.
There are several ways to fix this:
http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden; on the parent. Overflow is a css property which is used how to control what happens when child elements are larger than their parents. It's worth noting that depending on other properties overflow won't necessarily render itself in a way that disrupts layout.
http://www.bootply.com/ssq3EAzeyk - set explicit heights to take strict control over the dimensions of the elements. This might be the best option for a header bar.
http://www.bootply.com/yeodYRLLJk - set a greater min-height on the parent, one which will definitely contain the child. This is useful if your padding is for alignment purposes - setting min-height: 40px; in the example does this.
http://www.bootply.com/GznfJxUWUF - remove the padding that is making the element calculate as taller (as mentioned in another answer).
Apostolos, the white space is coming from the .titleclass.
The bottom padding of 10px.
Zero this and the white space will go.
.title {
padding: 5px 5px 0px 5px;
you will have to add a float: left to both parent containers (.header-bar and breadcrumb) otherwise the clear won't affect anything. furthermore you will have to give both containers width: 100%
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
width: 100%;
float: left;
}
.breadcrumb {
width: 100%;
float: left;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". But In the following, the child element is wider than the parent.
//html
<div class="wrapper">
<div class="content-main">
<div class="main">This is main</div>
</div>
</div>
// style
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
.main {
width: 500px;
border: 1px solid #f00;
}
So I have two quesions:
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
Why in my example, the element will stick out the parent.
in the edit version, the seven properties add up to the width of the element' containing block seems work well. Why the equation not apply to my example?
EDIT VERSION
p.wide width is 438px, the author calculate as following
10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width)
// HTML
<div>
<p class="wide">A paragraph</p>
<p>Another paragraph</p>
</div>
// CSS
div {width: 400px; border: 3px solid black;}
p.wide {
margin-left: 10px; width: auto; margin-right: -50px;
border: 1px solid #f00;
}
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
He is teaching you CSS Box Model, here, you are using div elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span or i or b tags, which are inline elements.
So when you use padding or border they are added outside of the element and not inside. So for example you have an element of say 100x100 in dimension, and you add a padding like
element {
width: 100px;
height: 100px;
padding: 10px;
}
So in the above case, your element will be 120x120 in total, because it will add up 10px of padding on all four size of your element.
Explaining padding syntax
You have two different padding syntax, which are as follows...
padding: 30px 0; in .wrapper and padding: 0 20px; in .content-main so these aren't the same.
Both the above syntax are nothing but short hand syntax of padding ... The complete version looks like...
padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */
So in the above example, you have to go clock wise, so 5px is nothing but padding-top: 5px;, then comes 10px which is right, next is bottom and the last 20px is padding-left.
So what when it's just two parameters defined, that means...
padding: 0 20px;
--^---^---
top bottom/left right
So, top and bottom are set to 0 here and right and left to 20px respectively...
Explaining the CSS
Note: None of the element has the height set by you, so the screens
you see ahead which I've attached are computed. So ignore height in them
completely.
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
Here, your element is 502px wide, so why? As I said that border will add on all four sides of the element, and hence it will add 1px on all four sides but your padding is applied to top and bottom only. It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes.
Coming to the second snippet which has the following syntax
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
Here, it is now adding 2px border to your element but, the padding is now applied to left and right and nothing for top and bottom so now the computation will be
Coming to the last snippet which is
.main {
width: 500px;
border: 1px solid #f00;
}
Here, just border is applied, but why it goes out? In technical words, why it overflows? Because you have width defined. So since you have padding set for the parent element, which is padding: 0 20px;, so it will nudge the child element by 20px from the left side. I'll attach a screen of Firebug to show you why it is nudged....
Why in my example, the element will stick out the parent.
Because you are defining width of 500px to your .main div
Demo (What happens when you take out the width)
The default box model is known as content-box
This can be altered by defining a new CSS3 introduced property called box-sizing set to border-box which will alter your box-model in such a way that it will count the padding and border inside the element instead of outside
I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear to be "on top of" the parent div, as in:
(source: cloudfront.net)
I've got the CSS coded for both elements, using a negative top margin on the nested div to attempt to simulate the desired effect. However, instead of appearing outside of the parent's bounds, the nested div's top 10px or so are getting cut off, as in:
(source: cloudfront.net)
I don't want to position the element absolutely, because a goal for this page is that it be responsive.
HTML for divs:
<div class="container-div">
<div class="child-div">
...
</div>
</div>
CSS for the divs:
.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}
You don't need to apply position:absolute to the nested div.
And margin probably wouldn't be the best practice in this case.
Just add position:relative to the nested div, and set it's top to any number you want. In your case, it would probably be negative.
Check out this Fiddle.
overflow: hidden on the parent would have done it perfectly !
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.