Box-shadow is overlapping other elements, how can I fix it? - html

Basically because of how HTML orders elements (the last one has the highest priority over the others) my shadows overlap other elements. If I use z-index on the first element then that is the only one that doesn't overlap, I don't know how to do it for all of them.
This is what I currently have (ignore the shadow size difference, I did it on purpose to see my problem):
This is what I should have:
Here's my code:
CSS:
.timer-container {
font-size: 0;
}
.timer-container .timer {
font-size: 16px;
width: 110px;
height: 170px;
display: inline-block;
background-color: #ffffff;
color: red;
margin: 0 5px;
-webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
}
.timer-container .time {
height: 120px;
font: 4em serif;
border-bottom: 1px solid #bdd9f6;
padding: 15px 0 0;
}
.timer-container .label {
height: 50px;
font: 1.125em serif;
text-transform: uppercase;
}
HTML:
<div class="timer-container">
<div class="timer">
<div class="time">
<span>12</span>
</div>
<div class="label">
<span>jours</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>17</span>
</div>
<div class="label">
<span>heures</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>48</span>
</div>
<div class="label">
<span>minutes</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>05</span>
</div>
<div class="label">
<span>secondes</span>
</div>
</div>

This could be a way. Split your shadow boxes from your timers, so you can use z-index to put them behind the timers.
.timer-container {
font-size: 0;
position: relative;
}
.timer-container .timer {
font-size: 16px;
width: 110px;
height: 170px;
display: inline-block;
background-color: #ffffff;
color: red;
margin: 0 5px;
}
.timer-container .time {
height: 120px;
font: 4em serif;
border-bottom: 1px solid #bdd9f6;
padding: 15px 0 0;
}
.timer-container .label {
height: 50px;
font: 1.125em serif;
text-transform: uppercase;
}
.timer-shadow {
position: absolute;
left: 0;
top: 0;
z-index:-1;
}
.timer-shadow span {
margin: 0 5px;
display: inline-block;
-webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
width: 110px;
height: 170px;
}
<div class="timer-container">
<div class="timer" style="z-index:4;">
<div class="time">
<span>12</span>
</div>
<div class="label" style="z-index:3;">
<span>jours</span>
</div>
</div>
<div class="timer" style="z-index:2;">
<div class="time">
<span>17</span>
</div>
<div class="label">
<span>heures</span>
</div>
</div>
<div class="timer" style="z-index:1;">
<div class="time">
<span>48</span>
</div>
<div class="label">
<span>minutes</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>05</span>
</div>
<div class="label">
<span>secondes</span>
</div>
</div>
<div class="timer-shadow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

Related

Centering absolute child in relation to parent while also hiding vertical overflow but showing horizontal

I have a CSS mockup I am working on but I am having trouble centering the search-bar element in relation to the phone element. Hence it is only centered when the phone element is in the middle of the screen (when the viewport is mobile) but not when it's large.
How can I center the absolute child element (search) in relation to the parent (phone)?
It should look like this regardless of where the parent element is on the screen:
EDIT: If I add the display: relative to the phone element the search-bar cuts off due to the overflow-v: hidden - for some reason overflow-h: visible isn't respected as touched on here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
.phone {
display: block;
height: 649px;
width: 300px;
overflow-y: hidden;
background-color: #ffffff;
border-radius: 35px;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border:10px solid;
border-color: #ffffff;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
inset: auto 0;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
So here is my solution to you:
add position: relative to .phone
add left: calc(-25vw + 50px); and right: calc(-25vw + 50px); (tweak as you prefer these values)
add padding-top to handle border-radius
remove inset and overflow-y: hidden
remove height from phone
Toggle Full Page in the snippet to see result in larger screen
console.clear()
.phone {
display: block;
width: 300px;
background-color: #ffffff;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border: 10px solid;
border-color: #ffffff;
border-radius: 35px;
padding-top: 10px;
position: relative;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
left: calc(-25vw + 50px);
right: calc(-25vw + 50px);
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
Please use the sample code in the justify content section of this page in order to center your child element with respect to the parent: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
It's based on the Boostrap UI framework and allows you to use the flex feature with your div tags in order to help get the CSS arrangement that you're looking for.
I would ask that you test the sample code in a copy of your original code first before updating your initial code permanently. Once you get that CSS code to work, then you can move onto your other CSS goals.

Horizontally centre '::before' item and other div element with flex concept in Bootstrap 4

.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
I am using here bootstrap 4.3.1 with flex concept with some custom pieces of CSS. Here the status-light and other div items are not proper center horizontally, how am I doing center horizontally?
Note: Don't want a solution by adding custom top property value (Ex. top:58%; or top:58px;), I need a proper logical solution.
You might use vertical translation to bring it up in line with the text elements. Notice that I stripped out the span and paragraph elements which don't seem to be doing anything.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>1</div>
<div>Company Name</div>
<div>Job Applied For</div>
<div>Status</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
You can give the p the same line-height as the container - here I added some borders and padding just to be painfully obvious what is where.
I also made some p into a div because that seems "cleaner" given your requirement.
.job-list-view-section {
border: 2px blue solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 {
border: 1px red solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 .d-flex {
padding: 0.25rem;
}
.job-list-view-section .col-12 .my-shadow>* {
border: 1px green solid;
display: flex;
align-items: center;
justify-content: center;
height:3rem;
}
.job-list-view-section .col-12 .my-shadow>*>p {
background-color: #ddffdd;
display: inline-block;
align-self: flex-start;
line-height: 2.9rem; /*match to align text in the p to the green box, less than 3 for the borders */
}
.wrap-things {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px lime;
align-self: center;
}
.status-light {
border: solid 1px lime;
height: 0.5rem;
width: 0.5rem;
}
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before {
content: "";
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<div>Company Name</div>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<div>status</div>
</div>
<div class="wrap-things">
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
</div>
See, borders:
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
.my-shadow >div{border: solid 1px red;}
.my-shadow >div>p{border: solid 1px lime;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
Remove the padding from <p>.
Also, to align the red dot add top: calc(50% - 5px); to ::before.
See MDN calc.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: calc(50% - 5px);
}
.job-list-view-section p{
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
also, you could try displaying the parent flex like
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light{
display: flex;
align-items: center;
justify-content: center;
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
/*top pos removed*/
}
.job-list-view-section p {
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>

How do I prevent 3 overlapping images in HTML, CSS?

I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?

Why does this relatively positioned element render below its parent?

JSFiddle.
In this SSCCE, the first div.number-outer-container renders below its parent div.step-container.
The question is that why is this happening, and what can I do to make it render vertically at the right place?
I have tried to apply a top:0 to div.number-outer-container but it does not seem to affect anything.
Note: This is just an SSCCE, actually each div.step-container is added dynamically, and any number of div.step-containers can be added.
.wrapper-big {
height: 600px;
overflow-y: auto;
width: 100%;
}
.wrapper {
height: 100%;
width: 826px;
margin: 50px auto;
display: table;
background-color: #003b80;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left-cell {
width: 50%;
background-color: chocolate;
}
.right-cell {
background-color: darkslategrey
}
.step-container {
max-height: 200px;
font-size: 0;
}
.right-cell .step-container {
margin-top: 125px;
direction: rtl;
}
.content-box {
display: inline-block;
width: 350px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
background-color: dodgerblue
}
.right-cell .content-box {
background-color: darkturquoise
}
.middle-cell {
height: 100%;
background-color: white;
width: 1.5px;
font-size: 0;
box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
-webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
display: inline-block;
/*position:absolute;*/
position: relative;
left: 390px;
}
.left-cell .number-outer-container {
/*margin-left:39px;*/
}
.left-cell .number-outer-container {
left:390px;
}
.right-cell .number-outer-container {
right:390px;
}
.number-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number-banner {
width: 50px;
height: 50px;
background-color: crimson;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
font-size:22px;
font-weight:bold;
color:white;
line-height:50px;
text-align:center;
}
.notch-outer-container {
display: inline-block;
}
.left-cell .notch-outer-container {
/*margin-right: 24px;*/
}
.right-cell .notch-outer-container {
/*margin-left: 22px;*/
}
.notch-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.notch {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.left-face-notch {
border-right: 15px solid #520f23;
}
.right-face-notch {
border-left: 15px solid #571780;
}
<div class="wrapper-big">
<div class="wrapper">
<div class="cell left-cell" align="left">
<!-- -->
<div class="step-container">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">1</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">3</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">5</div>
</div>
</div>
</div>
<!-- -->
</div>
<div class="cell middle-cell"></div>
<div class="cell right-cell" align="right">
<!-- -->
<div class="step-container" style="margin-top:125px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">2</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">4</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<!-- .wrapper -->
</div>
<!-- .wrapper-big -->
You could set position:relative to the parent container, and set position:absolute on the child element, so they will always stay together.
Read this post if you're interested in learning more about the details of how position works.
UPDATED DEMO
.cell .step-container {
position: relative;
}
.cell .number-outer-container {
position: absolute;
top: 0;
}
.left-cell .number-outer-container {
left: 390px;
}
.right-cell .number-outer-container {
left: -20px;
}
.left-face-notch,
.right-face-notch {
position: absolute;
top: 85px; /*200/2 - 30/2*/
}
Because of div.notch-outer-container and div.content-box, are taking up all the space. And since all the divs are inline-block.
If you set position:absolute; top:0; on div.number-outer-container and remove position:relative then it goes up.
http://jsfiddle.net/7dte3ru6/5/

Not able to set background color

I am not able to set the background color for the #widgetContainer div. I was wondering if there is a way to align the div so that the empty space left out while floating an element can be minimized?
My Fiddle: jsfiddle.net/rLzb0caq
Your #widgetContainer has no height because all elements are floating. You should set the background color of #widgetContent instead, to get the desired result.
#widgetContent {
height: 50%;
width: 50%;
margin: 0 auto;
border: 3px groove solid red;
outline: 2px solid black;
background-color:yellow;
}
http://jsfiddle.net/inuya5ha/8ef7Lsvt/
Insert this tag before closing tag of #widgetContainer :
<span style="clear: both; display: block;"></span>
This will clear the floating of elements.
Change #widgetContent class to
#widgetContent {
background: none repeat scroll 0 0 #CCC;
height: 50%;
margin: 0 auto;
outline: 2px solid black;
width: 50%;
}
If you simply want background color to widgetContainer div, add overflow:hidden to #widgetContainer
#widgetContent {
height: 50%;
width: 50%;
margin: 0 auto;
border: 3px groove solid red;
outline: 2px solid black;
}
#widgetHead {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: gray;
}
#widgetContainer {
height: 100%;
width: 100%;
background: gray;
color: black;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
#widgetContainer > div {
float: left;
width: 31%;
min-height: 75px;
margin: 1%;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
border: 0.25% solid;
}
#widgetContainer > div div {
width: 80%;
min-height: 75px;
padding: 1%;
margin: 2% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
border: 0.25% solid black;
}
.clean {
margin-bottom: 20px;
clear: both;
}
<div id="widgetContent">
<div id="widgetHead">
widgetData
</div>
<div id="widgetContainer">
<div id="node1" style="background-color: red;">
node1
<div id="vip1" style="background-color: red;">
vip1
<div id="obj1" style="background-color: gray;">
obj1
</div>
<div id="obj2" style="background-color: green;">
obj2
</div>
<div id="obj3" style="background-color: green;">
obj3
</div>
</div>
<div id="vip2" style="background-color: blue;">
vip2
</div>
</div>
<div id="node2">
node2
<div id="vip1" style="background-color: green;">
vip1
</div>
<div id="vip2" style="background-color: green;">
vip2
</div>
</div>
<div id="node3" style="background-color: red;">
node3
</div>
<div id="node4" style="background-color: red;">
node4
</div>
<div id="node5" style="background-color: red;">
node5
</div>
<div id="node6" style="background-color: red;">
node6
</div>
<div id="node7" style="background-color: red;">
node7
</div>
<div id="node8" style="background-color: red;">
node8
</div>
<div id="node1" style="background-color: red;">
node1
<div id="vip1" style="background-color: red;">
vip1
<div id="obj1" style="background-color: gray;">
obj1
</div>
<div id="obj2" style="background-color: green;">
obj2
</div>
<div id="obj3" style="background-color: green;">
obj3
</div>
</div>
<div id="vip2" style="background-color: blue;">
vip2
</div>
</div>
</div>
<div class="clean cf">
</div>
</div>