I have this div:
<!------ CONTENT ------>
<div id="content">
<div class="top">
I am cool<br />
I am cool<br />
I am cool<br />
I am cool<br />
</div>
</div>
<!------ /CONTENT ------>
With this CSS:
#content{
height:auto;
width:100%;
background-color:#FF0000;
}
#content .top{
margin:15px 35px 35px 35px;
padding:20px;
width:inherit;
height:inherit;
position:absolute;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-moz-border-radius: 5px;
border-radius: 5px;
background-color:rgba(224,224,224,.92);
}
I thought this would make the content div to be as wide as the browser window, and then resizing the .top div to fit inside of that while also having padding and margin (No idea how to explain that well enough), but it does not. Instead .top is just as wide as the screen, but because of the margin it extends to somewhere outside the window and then adds another margin causing it to have a horizontal scrolling bar, like this:
As you can see it should way more to the left, having a margin of 35 and the end of the page should be where the header ends.
I hope this is clear, I have never explained anything like this but I hope someone can help me out here, this is really bugging me.
If you disregard floats, position absolute and its ilk:
the width:100% refers to the closest enclosing box.
My guess would be that you have an element around your content that is not as wide as you think.
( planting *{border: 1px solid red} somewhere in your css for debugging never hurts ;) )
Your problem is that width specifies the inner container width, and that margin and padding are added on.
I don't understand why you're using position: absolute here.
Is this behaving as expected?
Related
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I'm trying to attempt the following. I have a div containing a box with a large border stroke. Here's the code I have been playing with.
.insta{
background:#000;
width:820px;
height:300px;
margin-left: auto;
margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}
<div class="insta"><div class="inner-line"></div></div>
And I get this result,
I'm trying to get to this as the final result,
I know of the box methods CSS provides, but don't know if I can achieve this using that. Any ideas or thoughts?
You can use a combination of box-shadow that isn't using a spread or blur and border:
CSS
border: 10px solid white;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
JSfiddle
Maybe border type "ridge" is enough...
http://jsfiddle.net/67U9z/1/
.inner-line{
border:3px ridge white;
...
I know this question is very old, but you can use outline offset:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset
Just change the offset to a negative in order to get it inside the container:
outline-offset: -15px;
I've got a couple stacked divs. My css is set to put a 10px margin between the two divs.
In Firefox, everything looks great.
In IE 11, it appears that the margins are replaced with padding inside the div and the margin between the divs is gone.
Here is my css for the divs:
.home_news {
width:453px;
margin-left:0;
margin-top:10px;
padding:5px;
border:1px solid black;
webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
behavior: url(/scripts/PIE.htc);
}
.home_facebook {
width:453px;
height: 505px;
overflow:hidden;
padding:5px;
margin-top:10px;
border:1px solid black;
webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
behavior: url(/scripts/PIE.htc);
margin-left:0;
}
Anyone have any ideas for me?
Thanks!
EDIT: added some html
This is how the two divs are set-up:
<div class="home_news">
<div class="block_title">Current News</div>
<table>Each row has different news item</table>
</div>
<div class="home_facebook">
<div class="block_title">Follow us on Facebook</div>
FACEBOOK MODULE GOES HERE
</div>
Pretty basic setup. The data for the news block is pulled from a database.
I pulled the PIE out of the mix and while it did seem to fix the margin between the divs, it also removed the corner radius from the divs. The padding issue is still present. You might not be able to see it in the graphic posted, but the grey shading in the title block in the IE divs is pushed down about 10px.
How can I get the content in a two-column area to line up correctly? Here is a link to the page showing the content in question. After I get the two divs to line up, then I will try to add the yellow arrow that is seen in the single-column version. That will likely be another question when the time comes.
Here's the CSS
#half-box-container {
overflow:auto;
width: 100%
}
#half-box-left, #half-box-right {
width: 50%;
margin:5px;
padding: 1em;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
#half-box-left {
float:left;
}
#half-box-right {
float:right;
}
#half-box-content
{
left: 30px;
top: 0;
color: #39275b;
font-size: 100%;
}
Here's the HTML that I'm using.
<div id="half-box-container">
<div id="half-box-left">
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Left Headline</h5>
Content goes here.
</div>
</div>
<div id="half-box-right>
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Right Headline</h5>
Content goes here.
</div>
</div>
</div>
As developer3466402 said, you didn't close the ID of half-box-right. Also you're not supposed to have two elements with the same ID. A browser can only display that as correctly as it can interpret it, and there is only supposed to be one object for each id. Try using classes for the child elements instead.
The reason they won't line up on the same line is when you add the padding and margin, their added widths exceed 100% of the width they can use, so they go on different lines. One reason is that they're using the content-box box-model, which makes the padding go outside of the boxes. This is what you're going to want to do:
#half-box-left, #half-box-right {
width: 50%;
padding: 1em;
box-sizing:border-box;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
This will put the padding inside the element instead of outside. If you don't want to remove the margins from the elements, you can instead simply make the widths smaller than 50%, provided that makes them small enough to escape those 20px of added width they use together.
Looking in the page you linked I saw you forgot to close the ID name of "half-box-right". I guess it is the problem.
Also you can reduce the width for both half-box-right and half-box-left to 38% for they be side by side instead of the right be bellow the left div.
I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/