Is it possible to have a continuous border around adjacent html elements that have different heights?
I have tried overlapping the elements by the border width and setting the left border of the second element to white, but this creates a black/white bevel on the corner (http://jsfiddle.net/h4FwJ/). I would like to achieve the same look as in that fiddle, but without the bevelling.
Change the div1 style to this
border-left-width:0px;
margin-left: -10px;
background-color:White;
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
I have very simple code for beginning:
<!doctype html>
<head>
</head>
<body>
<style>
.master {
background: green;
}
.master div {
background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>
I put it also on JsFiddle. Only inner (red) div is visible because there is no margin or padding set so inner div takes the whole space of .master div. That's clear.
I would like to set for .master div margins to 20px so I could do it this way:
.master div {
background: red;
margin: 20px;
}
But I would expect that I have both div visible (red and green) but in fact only red color is visible and green is visible only on left and right - JsFiddle.
I know how to solve it (in this case I can set padding for .master div to 20px I could do something like this:
.master {
padding: 1px 0;
}
and I'll have the same effect (or almost the same effect - 1px difference) as you see at JsFiddle or I could set padding for .master div instead of using margin for inner div
Questions:
Why simple adding margin for inner div doesn't make that margin is set as expected (both green and red visible) and why adding even small padding fix it?
Why behaviour for it is different for top and bottom margin and for left and right margin ?
Is this issue has any name?
Are there any other common cross-browser solutions?
If it is explained in external source you can also add link to external resource.
I'm a bit ashamed that I ask about such simple thing, but I always solve this using simple padding (as showed in the question) and it worked.
This effect is due to the "Collapsing Margins" specification. Here's the explanation from the W3C:
“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
Margin collapse only occurs with vertical margins on adjacent or nested elements.
Answers to your questions:
Adding margins to the inner div causes a margin collapse with the margins of the outer div. They are combined into one margin. Setting a padding on the outer div gives it a block formatting context and separates the elements, therefore un-collapsing the margins.
Margin collapse only occurs on vertical margins.
The effect is called "collapsing margins".
The only cross-browser "solution" is to give the parent element a block formatting context by adding padding or overflow: auto/hidden.
See this article on SitePoint for more information
A div which contains an image has rounded corners using border-radius and overflow:hidden.
The div also contains another div with an orange background and some white text.
When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?
Fiddle: http://jsfiddle.net/nq9Jv/
Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.
I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.
I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.
http://jsfiddle.net/nq9Jv/4/
Is that what you want?
I'm using a css drop shadow technique found here:
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
It uses the psuedo classes, before and after, to give more shape to your shadows. The problem is that I can't get the shadow to display over other elements.
Here is jsfiddle: http://jsfiddle.net/S7dzj/6/
I have tried various relative positioning of the div's with different z-indexes.
I have also tried to move the header element within the top div, no help.
I have also tried moving the top div relatively top: -5px to make it go underneath the header div but still no shadow.
Is there a way to accomplish this?
The z-index property only applies to elements which are not position: static, so your .top class was merely ignoring that property.
Your .header and .top classes both had the same z-index, so the header was appearing on top.
See the updated jsFiddle. All I did was add position: relative (which doesn't visually do anything on its own) to .top and change it's z-index to -2.
If you want the shadow to overlap .top, then see animuson`s answer.
If not, see http://jsfiddle.net/S7dzj/8/
.drop-shadow{
margin-bottom:10px;
}
If you add margins, you wil see the shadow.
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.
I'm trying to use css borders to visually group my sections, but the border that is drawn for my second section encompasses the first, so it looks horrible. How can I make the borders right.
My code:
My first div is float left, and its border shows up correctly, encompassing only the area it needs. It has mostly input elements down the left side of the page.
<div style="float: left; margin-right: 40px; border-width: medium;
border-color: Black; border-style: solid">
My second div also is mostly textboxes and labels, and it has this div declaration:
<div style="border-width: medium; border-color: Black;
border-style:solid">
Unfortunately, I must be missing something about the css box model as this border goes all the way to the left and encompasses the other div. I'm trying to just have two boxes that encompass each div so that there is some visual seperation and grouping. If I have to use something other than borders that's ok too.
First set a width to your divs, so that they no longer go over the whole page. (try width: 50% for a start)
Then use margin (or margin-left/top/bottom/right) to assign margins to your divs as needed. That way the borders no longer collapse.
Add the float:left to the second DIV as well - they will still appear side-by-side if there is sufficient width, but the space for the first won't be left "inside" the second, which is what you see at the moment.
You can achive this by using "fieldset" tag easily. This way you can have the heading for different groups by using "legend" tag.