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).
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 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.
I have a list of divs that have a one pixel outline around them, when hovered on the div the outline for that div changes color. As expected, since the divs stack on top of one another the borders stack and will become and extra pixel thicker. I add a 1px margin to the top in order to avoid this, but this ruins the hovering effect.
Here is an basic example of what I'm doing and the issue with the hover
http://jsbin.com/UcOTelUH/1/edit?html,css,output
When hovering all sides change color as they should except for the bottom since it's overlapped. Is there a way to avoid this using sibling selectors or some other trick?
You can use (see here):
div{
width: 100px;
height: 30px;
border: 1px solid #000;
margin-bottom:-1px;
position:relative;
z-index:0;
}
div:hover{
border-color:red;
z-index:1;
}
Or if you want to use the outline property instead of border, use:
div{
width: 100px;
height: 30px;
outline: 1px solid #000;
margin-top: 1px;
position:relative;
z-index:0;
}
div:hover{
outline-color:red;
z-index:1;
}
Here is my site
Currently still fiddling around with design layout and there is one problem I can't quite solve.
On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.
#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }
#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }
kind of like this?
Yes. You can set a negative margin, causing the div to extend outside of its parent, like this. (I only did the header, but you get the idea)
The solution in the fiddle uses the annoying !important to get the styling right - you might want to reorganize your CSS to get around this and make your code more maintainable, see this post.
I have a 2 column layout that I'asked about earlier (Simple 2 column layout).
What I've noticed is that it's not the positioning of the content column on the right that's the problem, but rather it's the way the content in that column is positioned.
I've been looking for a while and I can't see where the problem is. It looks as though the content in the right column has padding on it equal to the height of the left column.
Here's my css:
#wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; }
/* Main page content, puts actual content and sidebar side-by-side */
#sidebar { float: left; padding: 5px; width: 189px; border-right: 1px solid #b6bcc6; }
#content { padding: 0 !important; margin: 0 0 0 200px; width: 790px; background-color: #ff00ff; }
EDIT: To see what's actually going on, you can check out http://www.logansarchive.za.net/bad.jpg and http://www.logansarchive.za.net/firebug.jpg
I'm also going to add the page and style related files (stylesheet and images) as I have it so that you can inspect at your leisure:
http://www.logansarchive.za.net/Default.aspx
Inside your <div id="content"> you have a table with clear: both in its CSS, and then 2 divs with clear: left and clear: right on them respectively, which are breaking your floats. Removing all those clear properties in Firebug fixed it for me on your test page.
"Use Firebug" is generally not regarded a valid answer on SO, but it really is the best way to identify mystery paddings. Install it in your Firefox, right-click the element, and Firebug's Layout view will show you where it comes from.
Have you tried making #content float:right