I have the following situation and a don't want to use JS for this:
There is a header (blue) then a div which might contain content (if not it should collapse completly) and then the body (gray).
Now I want to div with the green border left and right to fill the whole gap between the header and the body. The gap is caused by margin: 10px; on the div with the red border.
The only "solution" I have found so far is to set padding: 1px 0; to the div with the green border (see commented line in fiddle). Is there any better solution to force the div or the border to cover the whole height occupied by the child and collapse completly if there is no child?
I have no control over the content inside the div, so not using margin is not a solution.
Fiddle: http://jsfiddle.net/w5NW4/1/
I guess you are looking like this :- DEMO
Give the overflow:hidden to your banner class for achieving the desired result..
CSS
.banner {
border-left: 1px solid #008000;
border-right: 1px solid #008000;
overflow: hidden;
}
You can try using overflow: auto; property instead of using padding.
It will work.
Check it at Fiddle: http://jsfiddle.net/w5NW4/3/
.banner{
border-left: 1px solid green;
border-right: 1px solid green;
overflow: auto;
}
Another solution is to give padding: 10px; to .banner and removing margin: 10px; from the banner child element.
Working Fiddle
Also, try to avoid inline stylings.
Related
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.
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 want to create border-bottom. And I try this
<div class="borderblog"></div>
.borderblog{
border-bottom: 1px dotted black;
}
but this only work if i put some text in that div. like this
<div class="borderblog">text</div>
and i don't want to put any text there. I only want to have one line dotted border bottom.
I also try to use HR tags but it don't work.
Demo in jsFiddle
set height and width
.borderblog{
border-bottom: 1px dotted black;
width:20px;
height:1px;
}
DEMO
You can set div height to one like:
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Div is block element and if it doesn't have any context the height is 0 and border is not visible because border is inside div. Width is not needed, since block element fills parent (container) width as default.
div does not have any height width by default, unless you specify it
so when you add text it gets some value and is shown, so the bordering is applied
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Well, it works for me on IE8, FF9 and Chrome32.
However, you can use <hr> element to create the dotted line as follows:
<hr class="borderblog">
.borderblog {
border: 0; /* <-- Reset the useragent stylesheet at first */
border-bottom: 1px dotted black;
}
WORKING DEMO.
Also, If you need a solid border and if by any reason the previous approaches didn't work for you, you can use background color for a 1px-height div
.borderblog {
height: 1px;
background-color: black;
}
Demo.
In this case you can add a border-bottom as well, to make it 3D visually.
Updated Demo.
All you have to do, just put height and width in css:
.borderblog{
width:100px; //depends what width border you want
height:1px; //depends what height you want, 1px is enought for border only
border-bottom: 1px dotted black;
}
And this is it, no need for text within :)
Is there a way, when I have over lapping (touching) div's, to make the 1px border not become 2 pixels. And I know I could just put a border on 2 of the sides, but then the one edge of the div wouldn't have a border. By the way, I'm using jQuery Masonry.
yes the div on the right would look something like this
border: 1px solid #fff;
border-left: none;
the second border-left will override the left border that was just put on there
EDIT:
ok, since youre using jQuery masonary - do it like this
.container {
width:50px;
height:80px;
border:1px solid black;
margin-right: -1px;
margin-bottom: -1px;
}
the overlapping method I mentioned will work
Combining borders and margins (even with border-box) is tricky because your layout depends on the container width. It is better to add a child to the element positioned by Masonry and style that...
.container .post {
float: left;
width: 240px;
}
.container .text {
outline: 1px solid #999;
padding: 10px;
margin: 0 1px 1px 0;
}
outline allows the border to appear "outside" the div which makes them easier to overlap
http://jsfiddle.net/4xmUY/
(if you happen to use this answer please accept Scott's answer as this should be a comment on his answer but the explanation doesn't fit there).
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.