I have a website with the following setup:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
I use the clearfooter and a footer outside the container to keep the footer at the bottom of the page when there isn't enough content.
My problem is that I would like to apply a box shadow on the container div in the following way:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px;
margin:0px auto 0px auto;}
As you can see its a drop shadow on on each side of the container div. However, in doing this, when the content doesn't take up the full height, there are still scroll bars caused by the shadow pushing past the bottom of the footer due to the blur.
Is there some way of preventing the shadow from going past the edge of the container div and causing a scrollbar?
Thanks for your help!
Webkit changed its behavior recently as pointed out here:
http://archivist.incutio.com/viewlist/css-discuss/109662
Indeed as of today it is still an issue in Gecko and maybe other browsers.
I managed to fix this nasty problem on Gecko using negative margins which also work on all other browsers.
Let's assume you have a screen-wide element (E) with box-shadow applied with zero offsets and blur radius R. Let's assume you are dealing with horizontal scrollbar problem because shadow causes element E to relayout with added width.
wrap E with helper wrapper element (W)
set overflow:hidden on W
set padding: R 0 R 0 on W
set margin: -R 0 -R 0 on W
The idea is to use overflow hidden to clip out problematic shadows on the left and right. And then use padding+negative margin trick to not clip top and bottom shadows and to keep the box on the same spot in HTML flow.
You can adapt this technique to clip out any arbitrary sides of your problematic shadow box.
On the parent element of #container, adding overflow: visible may fix the problem.
Though as general advice for the footer at the bottom, you may want to instead forget about setting the min-height on #container and instead set footer with position: absolute and bottom: 0 and give #container a margin-bottom so it doesn't ever get hidden behind the footer. If you're going for having the footer at the bottom of the window just use position: fixed instead.
Hope it helps.
Imho, and according to my tests seems that css shadow on an element is increasing both total width and height of the page ( if the surrounding element has width or height set to 100%) as you said and I haven't found a css workaround for this problem yet.
So I've a question for you, how are you keeping your footer at the bottom of the page?
and what's the width the footer has?
I've tried with absolute positioning ( as I'm used to do when I want a footer at the bottom of the page) but the problem It's the same with the width, of course you can set the width to a percentage like 90% but the problem remains...
here's a snippet that illustrate this simple concept
So this isn't a real answer, I've not found a solution for this yet
pastebin
Hope this's useful
Try adding padding-bottom:8px (shadow height + blur size) to the #container element.
Better solution for me at least, since it involves no wrapping element, is to place a clipping rectangle on the element with the shadow.
In the example above something like
clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) would clip the drop shadow on the bottom only.
Well either the solution to this problem is very obscure or there is not a solution with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.
I resorted to using a png shadow as it seems to be the only sane solution.
Not sure if this is the best solution as you have to add a container div, but if you wrap the element in a container div and set the overflow to hidden, it seems to work. You'll have to set padding where ever you want the shadow to be visible though.
I know it's not the best solution to this, but it works fine and I can't seem to figure out any other solution.
I have a div that is 100% height (ie full height on screen) and there was a box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);
This was causing the scroll bars to appear, even though content was not longer than the screen.
All I did was to set a negative vertical offset:
box-shadow: 0 -10px 10px rgba(0,0,0,0.4); and that solved it.
Please add position: relative; in your shadow div, remove from header, content, footer. It's work in my side.
Related
Can someone please tell me why 'Security Professionals' on the bottom right won't extend all the way to the right side of the screen? I'm using Eric Meyer's reset. I don't know why there's that padding there.
http://hemakessites.com/mayukh/22/
Edit: You guys are seeing the huge block of space on the bottom right, right? It's not a 3% sliver. I'll try wrapping them in a div, because right now if I set all of them to 25% one of them falls to the next line.
Aside: Oh my god. I just finished a sentence with a semicolon; I've been programming too much;
Update: There's already a div container that stretches 100%. That's what the gray area is. No... this is an evil far worse than we ever imagined. Maybe it's got something to do with the 'Difference' div being fixed?
you can use the box-sizing property for your solution i hope this will work for you
please update your css with mine css
.slagline {
-moz-box-sizing: border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border-color: #FFFFFF #666666 #CCCCCC #CCCCCC;
border-style: solid;
border-width: 1px;
float: left;
height: 100%;
width: 25%;
}
Actually the main thing is you have defined border-width:1px; so its increasing the width of all of your four columns so by box-sizing property you can get your desired results
see the demo if you will remove the box-sizing u will know the difference...
Because you set float: left on them, and as you said you gave them a width of 24%. The padding you experience are the leftover 4%. Make the last one float: right or apply margins/paddings to all boxes.
If you're setting 24% because of border problems, I'd suggest to create e.g a div that wraps your content in your floated blocks. So you can set the width of your current blocks to 25% and they expand accordingly.
<div id="slg4">
Needs to be set to float:right;
This should do the trick:
<div style="width:27%;" class="slagline" id="slg4">
I have a div with 1-pixel-border and height:29%. Chrome for some reason renders it without the bottom border.
See http://jsfiddle.net/9WVuC/4/
This issue depends on the actual percentage value and container size; when I change them, border sometimes appears and sometimes disappears. Seems that there is some rounding error in Chrome rendering engine when it's calculating actual div's height. Also, it occurs only if overflow and position are specified for that div.
Is it a known bug and maybe some workaround exists? Of course I can get rid of that percentage values by recalculating height manually and setting it with JS, but it's not very elegant solution.
this is because of the overflow:hidden; style you have on the div, the border actually appears outside of the div in question, so according to the height of the div (with it being a %) it doesn't take this border into account.
Looking at your code i would recommend moving your overflow:hidden; to the containing element of the divs (the td) that fixes the problem and will have the same effect on the content of the class="lower" element if it overflows.
You can fix this "bug" by setting height to height: 28.95%;
Make sure you do not use tables for layout. They should only be used for tabular data.
decrease the height or remove overflow: hidden
lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}
Fiddle demo
This is probably a rendering issue depending on screen/window size and the element's computed size (with decimals). A workaround for me was to put an invisible box-shadow where the border is missing and it fixes the rendering. For the bottom border it would look like this:
box-shadow: 0 1px 0 0 rgba(255,255,255,0);
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
Please take a look at the following fiddle:
http://jsfiddle.net/ellenchristine/tty3e/
Note that when you expand or contract the Results panel, the jQuery Masonry plugin populates the new space with images. However, I'm having trouble with the footer area...when you scroll to the very bottom, the last image is always partially hidden behind the fixed footer. I've tried adding margins on the footer, on the wrapper, everything, but am not getting anywhere. Anyone see what I'm doing wrong?
If you remove the height settings you had on #wrapper, and set a bottom padding, it appears to function as you need. The height 100% was taking up 100% of the parent, since all the elements within #wrapper were floated, and that was just the height of the display window. If you want to see that in action, put a border on #wrapper before removing the height to see the problem.
#wrapper {
width:960px;
min-height: 100%;
padding: 15px 0 115px;
margin: 0 auto;
}
http://jsfiddle.net/tty3e/8/
try overflow:hidden on #wrapper
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.