Trying to get a div to float right- jsfiddle included - css

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.

Related

CSS Margin of internal div extending past surrounding div

See the following fiddle:
https://jsfiddle.net/b6bpzsg7/
It comprises 3 portfolio items which are divs with class porthole which just have left and right padding for offset to neighbour.
<div class="col-md-4 porthole">
<div class="portbox text-center">
<div class="portplace">
<div>Coming soon</div>
</div>
<header>Second</header>
</div>
</div>
The inner div has a class of portbox which I can see in chrome developer does not expand vertically to take up all of the porthole surrounding it. portbox has no padding, border or margin
Within the portbox there is a placeholder div with class portplace that has a margin of 15px all around and padding top and bottom of 30px. In chrome developer I see that the top margin extends outside of the enclosing portbox to the top margin of the outside porthole.
Can someone enlighten me?
EDIT
.portrow {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
background-color: #888;
}
.porthole {
padding: 0px 15px 0px 15px;
overflow: auto;
}
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.portplace {
margin: 15px 15px 15px 15px;
padding: 30px 0px 30px 0px;
background-color: lightgray;
color: darkslategrey;
}

Add overflow: auto to your parent div:
https://jsfiddle.net/pavy/b6bpzsg7/2/
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
overflow: auto; // you need this
}
Read up on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Add overflow="hidden" to the portbox to solve this problem.

CSS vertical scrollbar padding left/right in UL possible?

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>

Odd behavior with multiple class names on an element?

I have the following CSS:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-bottom: 15px;
margin-top: 15px;
display: table;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box p {
position: relative;
width: 100%;
margin: auto;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
And the following HTML:
<div class="side-study-box span6 ">
<p>SIDE 1</p>
</div>
However the text isn't being centered vertically or horizontally. If I either remove the span6 class from the div or target the span6 as opposed to side-study-box in my css, it works. I do need both classes though... what am I doing wrong?

Sounds to me like another rule which is targeting the span6 class name is affecting things. Try increasing the specificity. Add an #id selector, or prefix them with body. Something like:
body .side-study-box { /*...*/ }
body .side-study-box p {/*...*/ }

Inline-block buttons with large border goes two pixels down

I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.

you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/

Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.

CSS property overflow:hidden causes inner divs to appear below main div

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

Resources