I am trying to make two floated divs with box-shadow to display the shadows outside of their container. It won't display because their parent has overflow: auto set, which cuts off the shadow, but is nevertheless necessary so the parent won't collapse because both child divs are floated. If I set the parent to overflow: visible it collapses, obviously, because the children are floated. Thanks for any help.
JS Fiddle: http://jsfiddle.net/zJGVz/
HTML
<div id='parent'>
<div id='child1'></div>
<div id='child2'></div>
</div>
CSS:
#parent {
margin: 0 auto;
width: 200px;
background: green;
overflow: auto;
}
#child1 {
width: 150px;
height: 200px;
float: left;
background: pink;
box-shadow: 0 0 10px 0 #000000;
}
#child2 {
width: 30px;
height: 200px;
float: left;
margin-left: 20px;
background: blue;
box-shadow: 0 0 10px 0 #000000;
}
You can add a 5px margin to both children on the sides that touch the edge of the parent.
#child1 {
width: 700px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 0 5px 5px;
}
#child2 {
width: 300px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 5px 5px 0;
}
See the JSFiddle.
Try changing the overflow to 'visible'
overflow: visible;
Related
Have a weird bug when floating percentage width divs with auto heights. The smaller div is not level with larger div to the left of it, it's 85px lower in all browsers. I can fix it by changing the margin to negative height but the effect is different across all browers, if it's perfect in Firefox there's slight gaps in Chrome and IE, that's no good.
DEMO
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: -100px 4% 0px 4%;
clear: both;
}
.large-top {
position: relative;
float: left;
width: 60%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 60%;
height: auto;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 60%;
height: auto;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 39%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 1%;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 39%;
height: auto;
background: #9ea790;
margin: 0 0 0 1%;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 39%;
height: auto;
background: #f8ffee;
margin: 0 0 0 1%;
padding: 5px 0px 40px 0px;
}
<div class="wrap-outer">
<div class="wrap-inner">
<div class="large-top"></div>
<div class="large-middle"></div>
<div class="large-bottom"></div>
<div class="small-top"></div>
<div class="small-middle"></div>
<div class="small-bottom"></div>
</div>
</div
I removed padding as some of my padding adds up to 85px height but it makes no difference. Also I put only these divs in a test page with nothing else and it's still the same. Anyone else had this problem?
CSS works as designed. Your floats are placed in the following way (see section 9.5.1 "Positioning the float" in the CSS 2.1 Specification):
<div class="large-top"> gets floated to the left, and it takes 60% of the available width.
Then <div class="large-middle"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="large-bottom"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="small-top"> comes and want to float to the left and it fits, because it wants 40% of the width, which is available. The consequence is that the top of the <div class="small-top"> gets aligned with the top of the <div class="large-bottom">. The key rule is
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
Therefore the top of <div class="small-top"> cannot be higher than the top of <div class="large-bottom">.
Then <div class="small-middle"> comes and wants to float to the left; due to the height of the <div class="large-bottom"> and <div class="small-top"> it finds place below the <div class="small-top">.
And the same for <div class="small-bottom">.
Figured it out. I should have used containers around the segments and then set the segments to 100% width.
Working code below;
<!doctype html>
<html>
<head>
<style>
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: 0px 4% 0px 4%;
}
.wrap-small {position:relative; float:left; width:39%; margin-left:1%; height:100%;}
.wrap-large {position:relative; float:left; width:60%; height:100%;}
.large-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 40px 0px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrap-outer">
<div class="wrap-inner">
<div class="wrap-large">
<div class="large-top">dsff</div>
<div class="large-middle">sfsfd</div>
<div class="large-bottom">sdffds</div>
</div>
<div class="wrap-small">
<div class="small-top">sfdsd</div>
<div class="small-middle">sdfdsf</div>
<div class="small-bottom">sfds</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.
Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}
you need to add
overflow: scroll;
to c2's CSS
fiddle
You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}
"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/
I am having an issue where I have three divs within a parent div which need to be center aligned. I do not understand why the center alignment of the text isn't doing it's usual magic?
I have recreated the issue here Demo fiddle
<div class="container_alt">
<div class="pricing_options_col">
<div class="pck1">pck1</div>
<div class="pck2">pck2</div>
<div class="pck3">pck3</div>
</div>
</div>
.container_alt{
max-width: 1000px;
margin: 0 auto;
}
.pricing_options{
width: 100%;
background-color: #fff;
height: auto;
overflow:auto;
text-align:center;
display:inline-block;
}
.pricing_options_col{
width: 100%;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
.pck1{
float: left;
margin: 0 auto;
width: 200px;
background-color: green;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
.pck2{
float: left;
margin: 0 auto;
width: 400px;
background-color: red;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}
.pck3{
float: left;
margin: 0 auto;
width: 200px;
background-color: pink;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
remove float: left; from the css for .pck1 .pck2 .pck3
update: i guess this is what you are looking for:
.pricing_options_col{
width: 800px;
margin-left:auto;
margin-right:auto;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
For .pck1, pck2 and pck3, remove float:left and add display:inline-block.
Floating an element is used to move it all the way to one side or the other (which obviously does the opposite of cetering). Preventing the "stacking" is a by-product of that, but there are other ways to keep elements from stacking. By default, divs have display:block, which means they'll each display on their own line ("stacking"). By changing it to display:inline-block, they display in-line.
Here is a demo.
Try this. This is because your parent and child both holds the width of 100%
.pricing_options_col{
width: 100%; <-- Remove
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
DEMO
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
Basically, I'm attempting to get two divs side by side, here's the following layout I'm attempting to do.
<div id="content">
<div id="search">
</div>
<div id="results">
<h2>Waiting!</h2>
</div>
</div>
Here's the CSS in which is positioning these divs they're side by side but pushed completely to the left of the page when I want them centred.
#content {
}
#search {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
#results {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
You can center the container area using margin: 0 auto. Try this -
#content{ margin: 0 auto; width: 90%; }
This might helps.
you have to center the wrapping div to center both of them. try it live here http://jsfiddle.net/dAVub/
#content {
width:800px;
margin: 0 auto;
}
There are many ways of doing this, but the most important thing is that you should set the overflow on your container appropriately when your inner elements float. For example, you could just replace your CSS altogether with:
#content {
overflow:hidden; /* or auto, or visible */
width:820px;
margin-left:auto; /* not necessary by default */
margin-right:auto; /* not necessary by default */
}
#content > div {
float:left;
margin: 10px auto;
-moz-box-shadow:#555 0 0 8px;
-webkit-box-shadow:#555 0 0 8px;
-o-box-shadow:#555 0 0 8px;
box-shadow:#555 0 0 8px;
}
add this to your css
#content {
text-align:center;}
replace float:left with display:inline-block; in #search and #results
Demo