I need to order my items from top-to-bottom, then left-to-right, e.g.:
1 5
2 6
3 7
4 8
However, box shadow is being cutoff. Reference the snippet: item 3's box shadow is cut off at bottom and item 4 is cut off at the top (in chrome).
There are similar questions to this, however the answers don't apply in this situation. I can't use flex on the container with flex-direction: column as this requires an explicit height and my item count is dynamic. I also can't set the items to display: inline-block as other answers suggest, since I need to control this content with flex.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Two other things I've tried from other similar SO questions that did not work: setting overflow: visible, adding a wrapper around the items with transparent border. Thanks for any suggestions.
Add display: inline-flex and width: 100% properties. break-inside: avoid-column property is invalid.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
margin-top: -2px;
margin-bottom: -14px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-top: 2px;
margin-bottom: 14px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
An idea is to use a pseudo-element where you apply the box-shadow. Make sure the pseudo element doesn't span all the space so it won't get affected by the cutting (use top and bottom different from 0)
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
position:relative;
z-index:0;
}
.item:before {
content:"";
position:absolute;
z-index:-1;
top:1px;
bottom:3px;
left:0;
right:0;
box-shadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Related
Can you please take a look at this demo and let me know why the height of parent div .colors is not growing while the children .color are floating to left (as required)?
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
Add overflow: auto to the parent.
CSS overflow:hidden with floats
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
overflow: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
The behaviour you are observing is a result of the nested floated elements collapsing the containing parent element, as a result of them being taken out of the normal document flow.
To rectify this, consider declaring an overflow property with the value of auto on .colors.
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
/* adddtional */
overflow: auto;
}
Code Snippet Demonstration:
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
/* adddtional */
overflow: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
Alternatively, a helper pseudo-element could be declared to clear the float, e.g:
.colors:after {
content: "";
display: block;
clear: both;
}
Code Snippet Demonstration:
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
/* Additional */
.colors:after {
content: "";
display: block;
clear: both;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
I have two divs. One with an image and one below with a background (semitranparent) and a text. The last div I give the css margin-top: -25px to make an overlap.
But the image in the first div is placed in between the semitranparent background and the text of the last div.
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
background-color: rgba(255,0,0,0.7);
text-align: center;
padding: 10px 20px;
margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
https://jsfiddle.net/Donslund/bsdk804p/1/
div.polaroid {
position:relative;
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
z-index:1;
}
div.container {
position:relative;
background-color: rgba(255,0,0,0.7);
text-align: center;
margin-top: -37px;
z-index:5;
color:white;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
Here it overlaps like you wanted (I assume).
I am working in HTML and CSS and I find it difficult to rearrange my overlapping elements.
Live example on the jsFiddle
CSS:
#posts {
background: blue;
float: right;
width: 75%;
padding: 5px;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
#login-container {
overflow: clear;
background: white;
width: 280px;
height: 330px;
}
HTML:
<div id="content" class="container">
<div id="posts">
<div id="login-container">
<div id="login">
<h1>Member login</h1>
</div>
</div>
</div>
</div>
These two always overlap to each other when I resize my browsers window.
I wish I can post an image here but it needs 10 reps.
May I ask, where are you closing the #posts div? This might be because #login-container is inside #posts.
Look here:
http://jsfiddle.net/nxyg0xwd/4/
#posts {
float: left;
width: 100%;
margin-left: 288px;
}
You have to left float the content, and create a margin in the size of the login vid.
I cannot seem to get this number to align inline to the glyphicon. I want the number 3 to be pushed up more so that it lines up.
CSS
body {
background-image: url("bg1.png");
}
.icons {
margin: 0px 0px 0px 10px;
}
.well {
min-height: 20px;
padding: 20px;
margin-bottom: 20px;
background-color: #ecf0f1;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 10px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
#alertbox {
padding: 2px 2px 2px 2px;
text-align: center;
}
#topicon {
font-size: 50px;
}
#stats {
font-size: 50px;
display: inline-block;
float: right;
}
HTML
<div class="col-md-3">
<div class="well well-lg">
<div id="alertbox" class="alert alert-info">Total APIs</div>
<span id="topicon" class="glyphicon glyphicon-tasks"></span>
<span id="stats">3</span>
</div>
</div>
Screenshot
using the positioning doesnt work when scaling since the number 3 would go into the center when on a mobile phone. I need it to auto-scale i guess for smaller browsers.
If you remove the float from #stats, you could do something like this:
.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}
I have 2 divs a parent and a child they both have fixed width and the child has fixed height too, child div is floated left and it has box-shadow:0 1px 2px 0 rgba(0,0,0,0.4) the problem is that the parent div overlaps the child's left shadow.
I can't add margin-left to the child because its left side is aligned with the left side of a menu div above the parent div so it has to be exactly where it is.
I tried z-index, minus margin for the parent and so many other things I can't even count but nothing seems to solve the problem.
the code is:
#menu {
width: 100%;
height: 50px;
background: #252525;
margin: 0 auto 20px auto;
}
#wrapper {
background: #CCC;
width: 1195px;
margin: 0 auto;
clear: both;
overflow: auto;
background: none;
position: relative;
}
#wrapper {
overflow: hidden;
}
#db_left,
#db_right,
#db_center {
margin-right: 30px;
float: left;
}
#db_left {
width: 170px;
position: relative;
}
#db_right {
margin-right: 0 !important;
width: 315px;
}
#db_center {
width: 650px;
margin-top: 20px !important;
}
#profpic_holder {
width: 150px;
height: 150px;
padding: 10px;
position: relative;
float: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
<body>
<div class="wrapper">
<div class="header">
Some Content...
</div>
<div id="db_left">
<div id="profpic_holder">
<img src="#" width="150" height="150" alt="" />
</div>
<div id="profname">
</div>
</div>
<div id="db_center">
</div>
<div id="db_right">
</div>
</div>
</body>
Fixed it.
The #wrapper is overflow:hidden so nothing outside its area can be seen including the child's shadow.
All I had to do was to hide only the overflow of its top and bottom so I did this:
#wrapper{
overflow-y:hidden;
}
The way you have it
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
won't have a left shadow. If you want a shadow to show up on all sides use this
-webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
I hope this helps.