I just want no border on the bottom of the box, or is it not possible? The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position.
.box {
width: 82px;
height: 56px;
box-shadow:inset 0px 0px 0px 5px #AC92C4;
border-radius: 5px 5px 0px 0px;
}
https://jsfiddle.net/dcaktwuz/
You wrote:
The reason I am using 'box-shadow:inset' instead of the regular border
style because it does not alters my box size and shifts my box out of
position.
You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.
You can shift shadows:
.box {
display: inline-block;
vertical-align: middle;
width: 82px;
height: 56px;
border-radius: 5px 5px 0px 0px;
border: 1px solid #ccc;
}
.shift1 {
box-shadow: inset 5px 5px 0px 5px #AC92C4;
}
.shift2 {
box-shadow: inset -5px 5px 0px 5px #AC92C4;
}
.shift1.shift2 {
box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4;
}
<div class="box shift1"></div> + <div class="box shift2"></div> =
<div class="box shift1 shift2"></div>
I use a div to create a frame around an image. I am trying to get the div and it's containing image to float to the right so that the surrounding paragraphs will wrap around it.
Link to jsfiddle: http://jsfiddle.net/0vnfngws/
Styles:
.imgframe {
margin: 12px;
position: relative;
display: inline-block;
padding: 8px;
border: 1px solid #cbcbcb;
background: #f7f7f7;
box-shadow: 2px 2px 5px 0 #e5e5e5;
-moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
-webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}
.imgframe img {
margin: 0;
padding: 8px;
}
.floatright {
float: right;
}
HTML:
<p>This is some text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>
<div class="imgframe"> <img src="http://www.hdicon.com/wp-content/uploads/2010/06/Firefox_2004_2.png" alt="#" class="floatright" /> </div>
<p>This is some more text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>
All you need to do is add float: right; to your .imgframe.
.imgframe {
float: right;
margin: 12px;
position: relative;
display: inline;
padding: 8px;
border: 1px solid #cbcbcb;
background: #f7f7f7;
box-shadow: 2px 2px 5px 0 #e5e5e5;
-moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
-webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}
See the updated JSFiddle.
Two things:
Swap the order of the first p tag and the div tag
Move the floatright class from the img tag into the div tag
Put the class on the containing div, not on the img tag. You are floating the image within the containing div.
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
I created a margin-right effect using border-right on the scrollbar-thumb:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
You can add a margin to the scrollbar track;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}
Simply use the margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
Another important attribute to add vertical or horizontal margin:
::-webkit-scrollbar-track {
margin: 0 30px;
}
With border-radius, neither box-shadow works properly nor does background-clip: padding-box.
I created a parent div on top of the div which needs scrolling. And fixed the height of parent div and put padding right in the child div. That worked well for my case.
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
I have a div with a very thick border and I'd like to have the close button on the top-right of the border and not the div. The problem I'm having is that no matter what z-index I put, the border is always on top of my close-button div. I've tried setting the border to be on the inside of the div, but the same problem keeps happening. Any suggestions?
Thanks!
.aboutcontainer{
position: relative;
width: 55%;
height: 70%;
margin: auto;
margin-top: 6%;
background: white;
z-index: 3;
border: 20px solid black;
padding-left: 15px;
padding-right: 15px;
overflow: auto;
box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-moz-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-khtml-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-webkit-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
}
.closeBtn {
position: absolute;
top: -10px;
right: -10px;
border: solid 1px red;
z-index: 4;
cursor: pointer;
}
Your overflow: auto; tag is hiding everything outside of the main div, including things atop the border. Remove it, and the button will show.
Remove overflow:auto and even z-index is not necessary here. Give width and height to inner div to see the effect.
DEMO
Remove border from .aboutcontainer.
Put it inside another div and give that parent container some padding and background color that will create a border effect.
Place your .aboutcontainer and .closeBtn inside that div now you are free to position the close button anywhere you want also keeping the overflow property of your .aboutContainer intact.
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div