I am creating a design page in left side there is 2 box and in right it is 3 box.
It's working fine on desktop, now i wanted the box should be show single on mobile devices but unable to figure out.
Following is the my code :
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
/* div partition */
#homecategory { clear: both; padding: 0 10px; max-width: 1230px; margin: 0 auto;}
.category { position: relative; margin-bottom: 20px;}
.left-image { float: left; width: 49%; margin-right: 1%;}
.right-image { float: left; width: 49%; margin-left: 1%;}
/* animation start here */
.cf:before,.cf:after{ display: table; content: " ";}
.cf:after{ clear: both}
.catnamediv { position: absolute; top: 35%; width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-size: 25px; z-index: 99; font-weight: bold; }
.catnamediv a { display: none; width: 180px; margin: 30px auto; background: #297fca; color: #fff; font-size: 20px; padding: 10px 0; text-decoration: none;}
.fancy-card:hover .shopnow{ display: block;}
/*fancy card styling*/
.fancy-card{ background: #eee; width: 100%; display: block; float: left; position: relative; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: all 250ms ease-in; min-height:288px; background-size: cover; background-position: center center; margin-bottom: 30px; }
.fancy-card .bg-overlay{ background: rgba(0,0,0,0.25); position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; transition: all 200ms linear;}
.category :hover p { border-bottom: 1px solid #fff; display: inline; padding-bottom: 12px;}
/*horizontal border elements (top & bottom)*/
.fancy-card .v-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; }
.fancy-card .v-border:before,.fancy-card .v-border:after{ width: 0%; height: 1px; left: 50%; transition: all 250ms ease-out; background: #fff; }
.fancy-card .v-border:before{ content: ''; top: 3%; position: absolute;}
.fancy-card .v-border:after{ content: ''; bottom:3%; position: absolute;}
/*horizontal elements (left & right)*/
.fancy-card .h-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;}
.fancy-card .h-border:before,.fancy-card .h-border:after{ height: 0%; top: 50%; width: 1px;
transition: all 250ms ease-out; background: #fff;}
.fancy-card .h-border:before{ content: ''; left: 3%; height: 0%; position: absolute; }
.fancy-card .h-border:after{ content: ''; right:3%; position: absolute; }
/*hover states for interactivity*/
.fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{ width: 94%; left: 3%; }
.fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{ height: 94%; top: 3%; }
/*hovering over card, adjust background overlay*/
.fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{ background: rgba(0,0,0,0.45); }
/*medium and large profiles*/
#media screen and (min-width: 768px){
.fancy-card{ width: 30%; margin: 0% 1.66% 3.33% 1.66%; }
}
/* title decorate */
.cattilewrap { text-align: center; padding: 20px 0; text-transform: uppercase; position: relative;
background: #fff; z-index: -1;margin-top: 2%;}
.catdnamediv2 { font-size: 30px; font-weight: 500; background: #fff;}
.catdnamediv2 span { display: inline-block; position: relative; }
.catdnamediv2 span:before,.catdnamediv2 span:after { content: ""; position: absolute; height: 5px;
border-bottom: 1px solid #0088cc; border-top: 1px solid #0088cc; top: 0; width: 100%;}
.catdnamediv2 span:before { right: 100%; margin-right: 15px;}
.catdnamediv2 span:after { left: 100%; margin-left: 15px;}
</style>
</head>
<body>
<div id="homecategory" class="home-category ">
<div class="cattilewrap">
<div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
<div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
</div>
<div class="row cf ">
<div class="col-md-6">
<div class=" left-image" >
<div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:593px;height:436px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:593px;height:436px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class=" right-image" >
<div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also pasted this code in jsfiddle https://jsfiddle.net/arunendra/w8yhmt70/1/#&togetherjs=Mt5zNmbI7k
This code is written in html and bootsrap4
you can put width:100%;height:100%; in your code instead of width:593px;height:436px; and also add the below code for single box in mobile view.
#media screen and (max-width: 768px){
.left-image { width: 100%; margin-right: 0;}
.right-image { width: 100%; margin-left: 0;}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
/* div partition */
#homecategory { clear: both; padding: 0 10px; max-width: 1230px; margin: 0 auto;}
.category { position: relative; margin-bottom: 20px;}
.left-image { float: left; width: 49%; margin-right: 1%;}
.right-image { float: left; width: 49%; margin-left: 1%;}
/* animation start here */
.cf:before,.cf:after{ display: table; content: " ";}
.cf:after{ clear: both}
.catnamediv { position: absolute; top: 35%; width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-size: 25px; z-index: 99; font-weight: bold; }
.catnamediv a { display: none; width: 180px; margin: 30px auto; background: #297fca; color: #fff; font-size: 20px; padding: 10px 0; text-decoration: none;}
.fancy-card:hover .shopnow{ display: block;}
/*fancy card styling*/
.fancy-card{ background: #eee; width: 100%; display: block; float: left; position: relative; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: all 250ms ease-in; min-height:288px; background-size: cover; background-position: center center; margin-bottom: 30px; }
.fancy-card .bg-overlay{ background: rgba(0,0,0,0.25); position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; transition: all 200ms linear;}
.category :hover p { border-bottom: 1px solid #fff; display: inline; padding-bottom: 12px;}
/*horizontal border elements (top & bottom)*/
.fancy-card .v-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; }
.fancy-card .v-border:before,.fancy-card .v-border:after{ width: 0%; height: 1px; left: 50%; transition: all 250ms ease-out; background: #fff; }
.fancy-card .v-border:before{ content: ''; top: 3%; position: absolute;}
.fancy-card .v-border:after{ content: ''; bottom:3%; position: absolute;}
/*horizontal elements (left & right)*/
.fancy-card .h-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;}
.fancy-card .h-border:before,.fancy-card .h-border:after{ height: 0%; top: 50%; width: 1px;
transition: all 250ms ease-out; background: #fff;}
.fancy-card .h-border:before{ content: ''; left: 3%; height: 0%; position: absolute; }
.fancy-card .h-border:after{ content: ''; right:3%; position: absolute; }
/*hover states for interactivity*/
.fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{ width: 94%; left: 3%; }
.fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{ height: 94%; top: 3%; }
/*hovering over card, adjust background overlay*/
.fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{ background: rgba(0,0,0,0.45); }
/*medium and large profiles*/
#media screen and (min-width: 768px){
.fancy-card{ width: 30%; margin: 0% 1.66% 3.33% 1.66%; }
}
/* title decorate */
.cattilewrap { text-align: center; padding: 20px 0; text-transform: uppercase; position: relative;
background: #fff; z-index: -1;margin-top: 2%;}
.catdnamediv2 { font-size: 30px; font-weight: 500; background: #fff;}
.catdnamediv2 span { display: inline-block; position: relative; }
.catdnamediv2 span:before,.catdnamediv2 span:after { content: ""; position: absolute; height: 5px;
border-bottom: 1px solid #0088cc; border-top: 1px solid #0088cc; top: 0; width: 100%;}
.catdnamediv2 span:before { right: 100%; margin-right: 15px;}
.catdnamediv2 span:after { left: 100%; margin-left: 15px;}
</style>
</head>
<body>
<div id="homecategory" class="home-category ">
<div class="cattilewrap">
<div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
<div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
</div>
<div class="row cf ">
<div class="col-md-6">
<div class=" left-image" >
<div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class=" right-image" >
<div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Hi I'm following a tutorial. As far as I can see I have written exactly the same thing in my code but it is behaving differently.
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('./juskteez-vu-TIrXot28Znc-unsplash.jpg')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('./casey-horner-fsJB3KT2rj8-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
</div>
</div>
</body>
but on the screen the panel that's active loses all the css from the panel class instead of using both. Any ideas why this might be? Thanks!
Actually it works but the problem is you are using 100% size of your images so its looks like this:
I added border to demonstrate
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
The solution is using background-size: cover; instead
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
Try to change value of background-size property to cover (background-size: cover). I think this is what you need
I ran your code in codepen. I only changed the background-images to colors since the were loaded locally. It is behaving as it should, the panel active div displaying everything defined in the panel class aswell. What are you missing?
https://codepen.io/wischn/pen/OJwOQxp
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
In my situation there are two boxes and each boxes have a small child box. Both the parent and child boxes are positioned absolute. My requirement is to position the small box inside first box to stack on top of the second big box. How can we achieve using z-index. or is there any other way we can achieve this.
HTML
<div id="boxes">
<div id="dd-demo-1" class="dd-demo">
<strong>A</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>12</span>
<div id="div1">
<strong>a</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>14</span>
</div>
</div>
<div id="dd-demo-2" class="dd-demo">
<strong>B</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
<div id="div2">
<strong>b</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
</div>
</div>
</div>
CSS
#dd-demo-1 {
position: absolute;
z-index: 12;
}
#div1 {
position: absolute;
z-index: 14;
left: 42px;
top: 165px;
}
#dd-demo-2 {
position: absolute;
top: 235px;
z-index: 12;
}
#div2 {
position: absolute;
left: 30px;
top: 29px;
z-index: 12;
}
.dd-demo {
text-align: center;
border: 1px inset #ccc;
color: #fff;
height: 14em;
width: 15em;
padding-top: 5px;
position: absolute;
z-index: 12;
}
#div1,
#Aafield {
background-color: #00ffff;
color: #000000;
}
#dd-demo-1,
#Afield {
background-color: #0066ff;
color: #ffffff;
}
#dd-demo-2,
#Bfield {
background-color: #006600;
color: #ffffff;
}
#div2,
#Bbfield {
background-color: #00ff00;
color: #000000;
}
#div1,
#div2,
#div3 {
text-align: center;
margin: 1em auto;
height: 6em;
width: 11em;
border: 1px outset #ccc;
}
Codepen Link: https://codepen.io/nhjsph/full/NzgPVP/
I have changed some part of your CSS.
Updated these styles
#dd-demo-1 {
z-index: 12;
}
#div1 {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0 !important;
}
#dd-demo-1 {
z-index: 12;
}
#div1 {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0 !important;
}
#dd-demo-2 {
position: absolute;
top: 235px;
z-index: 12;
}
#div2 {
position: absolute;
left: 30px;
top: 29px;
z-index: 12;
}
.dd-demo {
text-align: center;
border: 1px inset #ccc;
color: #fff;
height: 14em;
width: 15em;
padding-top: 5px;
position: absolute;
z-index: 12;
}
#div1,
#Aafield {
background-color: #00ffff;
color: #000000;
}
#dd-demo-1,
#Afield {
background-color: #0066ff;
color: #ffffff;
}
#dd-demo-2,
#Bfield {
background-color: #006600;
color: #ffffff;
}
#div2,
#Bbfield {
background-color: #00ff00;
color: #000000;
}
#div1,
#div2,
#div3 {
text-align: center;
margin: 1em auto;
height: 6em;
width: 11em;
border: 1px outset #ccc;
}
<div id="boxes">
<div id="dd-demo-1" class="dd-demo">
<strong>A</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>12</span>
<div id="div1">
<strong>a</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>14</span>
</div>
</div>
<div id="dd-demo-2" class="dd-demo">
<strong>B</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
<div id="div2">
<strong>b</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
</div>
</div>
</div>
Change like this:
#div1 {
position: absolute;
z-index: 14;
left: 42px;
top: 165px; <--------Removed
bottom: 0; <--------Added
margin-bottom: 0!important;
//If you do not want space between small box and big box.
}
#dd-demo-1 {
position: absolute;
z-index: 12;
}
#div1 {
position: absolute;
z-index: 14;
left: 42px;
bottom: 0;
margin-bottom: 0!important;
}
#dd-demo-2 {
position: absolute;
top: 235px;
z-index: 12;
}
#div2 {
position: absolute;
left: 30px;
top: 50px;
z-index: 12;
}
.dd-demo {
text-align: center;
border: 1px inset #ccc;
color: #fff;
height: 14em;
width: 15em;
padding-top: 5px;
position: absolute;
z-index: 12;
}
#div1,
#Aafield {
background-color: #00ffff;
color: #000000;
}
#dd-demo-1,
#Afield {
background-color: #0066ff;
color: #ffffff;
}
#dd-demo-2,
#Bfield {
background-color: #006600;
color: #ffffff;
}
#div2,
#Bbfield {
background-color: #00ff00;
color: #000000;
}
#div1,
#div2,
#div3 {
text-align: center;
margin: 1em auto;
height: 6em;
width: 11em;
border: 1px outset #ccc;
}
<div id="boxes">
<div id="dd-demo-1" class="dd-demo">
<strong>A</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>12</span>
<div id="div1">
<strong>a</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>14</span>
</div>
</div>
<div id="dd-demo-2" class="dd-demo">
<strong>B</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
<div id="div2">
<strong>b</strong>
<br>position:
<span>absolute</span>
<br>z-index:
<span>not set</span>
</div>
</div>
</div>
I am trying to get a div height take the remaining space between two divs.
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
Here is the JS Fiddle: https://jsfiddle.net/xqLpqsdk/
I need to make .contact_lists to fill the space between .col_title and .edit_bar so the scroll bar is only displayed between those 2 divs
I've tried making .contact_lists position absolute but that didn't work.
If I am not wrong this will solve your issue. Please take a look at this,
#contact_editor_wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 10000;
}
#contact_editor {
display: block;
position: absolute;
width: 100%;
max-width: 1400px;
height: 100%;
min-height: 400px;
max-height: 800px;
background-color: #99AFC5;
border: solid 1px black;
border-radius: 10px;
margin: 0 auto;
padding: 2.5px 5px;
}
#x_contact_editor {
display: inline-block;
position: absolute;
right: 5px;
cursor: pointer;
}
.contact_editor_row {
margin: .5% 0;
}
#contact_editor_title_wrapper {
display: block;
width: 100%;
height: 4%;
}
#contact_editor_title {
padding: 6px 0;
text-align: center;
font-size: 20px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
#contact_columns {
display: flex;
height: 89%;
width: 100%;
flex-direction: row;
justify-content: center;
}
.contact_columns {
display: flex;
flex-flow: column;
height: 100%;
background-color: white;
margin: 0 .25%;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
}
#type_col {
width: 14.5%;
}
#company_col {
width: 42%;
}
#contact_col {
width: 42%
}
#contact_editor_btns {
display: block;
width: 100%;
height: 4%;
}
.col_title {
display: block;
text-align: center;
width: 100%;
height: auto;
margin-top: 9px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-bottom: 1px solid black;
}
.contact_lists {
position: relative;
height: 100%;
overflow-y: scroll;
}
.edit_bar {
display: block;
//position: absolute;
bottom: 0;
width: 100%;
height: auto;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
background-color: #00162C;
}
.edit_btn {
color: white;
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
border-right: 1px solid black;
transition: all .5s ease;
}
.edit_btn:hover {
background-color: #99AFC5;
transition: all .5s ease;
}
.edit_btn i {
margin: 4px 8px;
}
#company_delete_btn, #contact_delete_btn {
margin-left: -2.5px;
}
<div id='contact_editor_wrapper' class='hide_contact_editor'>
<div id='contact_editor'>
<div id='x_contact_editor'>
<i class='fa fa-times' aria-hidden='true'></i>
</div>
<div id='contact_editor_title_wrapper' class='contact_editor_row'>
<div id='contact_editor_title'>Contact Editor</div>
</div>
<div id='contact_columns' class='contact_editor_row'>
<div id='type_col' class='contact_columns'>
<div id='type_title' class ='col_title'>
<h3>Type</h3>
</div>
<hr>
<div id='type_list' class='contact_lists'>
</div>
</div>
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
<div id='contact_col' class='contact_columns'>
<div id='contact_title' class ='col_title'>
<h3>Contact</h3>
</div>
<hr>
<div id='contact_list' class='contact_lists'>
</div>
<div id='contact_edit_bar' class='edit_bar'>
<div id='contact_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='contact_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
</div>
<div id='contact_editor_btns' class='contact_editor_row'>
</div>
</div>
</div>
So, I'm using a while loop with PHP. The while loop makes the following code:
<img src='$user_six' class='avatar_friend'>
Please don't worry about $user_six or the background info on the while loop. I know it works. I'm trying to put three avatars on top of a movie. The problem is that each image takes space and is ruining the spacing with the movies.
This is the information of .avatar_friend:
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
I think absolute positioning works better, but the images overlap each other.
This is the information of .avatar_friend:
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
How can I have the best of both positions? I want proper spacing, but no overlapping. How can I achieve this effect?
EDIT:
I've tried doing the following:
html
<div id='container'> <img src='$user_six' class='avatar_friend'> </div>
css
#container {
position: absolute;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
This did not work...
EDIT 2:
html
<!DOCTYPE html>
<html>
<head>
<title> Movies </title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body>
<!-- Navigation -->
<div id='nav'>
<!-- Profile Wrapper -->
<ul class="profile-wrapper">
<li>
<!-- user profile -->
<div class="profile">
<img src="avatars/default.png" />
MatthewMalan <i class="fa fa-caret-down" id="caret-down"></i>
<!-- more menu -->
<ul class="menu">
<li>Sign Out</li>
<li>Sign Out</li>
<li>Sign Out</li>
</ul>
</div>
</li>
</ul>
<!-- End of Profile Wrapper -->
</div>
<!-- End of Navigation -->
<!-- Movie Content -->
<div id='movie_content2'>
<div id='movie_line'>
<div id='movie_line2'></div>
<!-- Dropdown Selection -->
<nav>
<ul id="dropdown_selection">
<li>Most Recent
<ul>
<li> Most Liked </li>
<li> My History </li>
<li> My Likes </li>
</ul>
</li>
</ul>
</nav>
<!-- End of Dropdown Selection -->
<div id='descriptive_div' number='1'> <i class='fa fa-caret-left' id='descriptive_caret' number='1'></i> <a href='like.php?number=7&page=1'><a href='like.php?number=7&page=1&code=1&sorting=recent'> <div class='like_button' number='1'> Like </div> </a></a> <span id='descriptive_div_text'> Professional, Clean, Ready to Go </span> <div id='files_left'> 3 Copies Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_length' number='1'> <div id='movie_length_text' number='1'> 1h 20m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_rating3' number='1'> <span id='movie_rating_text' number='1'> G </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <img src='covers/inside.jpg' class='movie_size' number='1'> </a><div id='descriptive_div' number='2'> <i class='fa fa-caret-left' id='descriptive_caret' number='2'></i> <a href='like.php?number=8&page=1'><a href='like.php?number=8&page=1&code=1&sorting=recent'> <div class='like_button' number='2'> Like </div> </a></a> <span id='descriptive_div_text'> s </span> <div id='files_left'> 1 Copy Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_length' number='2'> <div id='movie_length_text' number='2'> 2h 16m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_rating' number='2'> <span id='movie_rating_text' number='2'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <img src='covers/star wars.jpg' class='movie_size' number='2'> </a><img src='avatars/sam.jpg' class='avatar_friend'><img src='avatars/traek.jpg' class='avatar_friend'><img src='avatars/jessie.jpg' class='avatar_friend'><div id='descriptive_div' number='3'> <i class='fa fa-caret-left' id='descriptive_caret' number='3'></i> <a href='like.php?number=9&page=1'><a href='like.php?number=9&page=1&sorting=recent'> <div class='liked_button' number='3'> Like </div> </a></a> <span id='descriptive_div_text'> r </span> <div id='files_left'> 7 Copies Left </div> </div><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_length' number='3'> <div id='movie_length_text' number='3'> r </div> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_rating4' number='3'> <span id='movie_rating_text' number='3'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <img src='covers/56e068530dc9f9.52895782.jpg' class='movie_size3' number='3'> </a><br><div class="complete_page">1</div> </div>
</div>
<!-- End of Movie Content -->
</body>
</html>
css
/* Rating of Movie Content */
.movie_rating, .movie_rating2, .movie_rating3, .movie_rating4, .movie_rating5, .movie_rating6, .movie_length, .movie_length2 {
display: inline-block;
width: 100px;
height: 30px;
background: #E10E0D;
color: white;
text-align: center;
position: absolute;
z-index: 5;
font-family: 'Days One', sans-serif;
cursor: pointer;
margin-top: -10px;
margin-left: 16px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #FE4042;
}
.movie_rating4, .movie_rating5, .movie_rating6 {
background: #7D5505;
border: 1px solid #F9BA01;
}
.movie_length, .movie_length2 {
width: 120px;
background: #02477D;
border: 1px solid #97D0F2;
margin-top: 239px;
}
.movie_length2 {
width: 75px;
}
.movie_rating2, .movie_rating5 {
width: 60px;
}
.movie_rating3, .movie_rating6 {
width: 40px;
}
#movie_rating_text, #movie_length_text {
font-size: 25px;
position: relative;
top: 0px;
font-family: 'Days One', sans-serif;
letter-spacing: 1px;
}
/* Description of Movie */
#descriptive_div {
position: absolute;
width: 400px;
min-height: 241px;
background: black;
color: white;
z-index: 6;
margin-left: 228px;
margin-top: -10px;
font-size: 16px;
line-height: 25px;
padding-bottom: 30px;
border: 5px solid #ccc;
display: none;
}
#descriptive_div_text {
width: 370px;
display: inline-block;
position: relative;
left: 14px;
top: 14px;
text-align: left;
}
#descriptive_caret {
color: #ccc;
font-size: 51px;
position: absolute;
margin-left: -19px;
margin-top: 115px;
display: none;
}
/* End of Description of Movie */
/* Movie Line */
#movie_line2 {
width: 1px;
height: 635px;
background: #ccc;
position: absolute;
left: 1120px;
top: 10px;
z-index: 2;
}
/* End of Movie Line */
/* End of Rating of Movie Content */
/* Like Button */
.like_button, .liked_button {
background: #0566AE;
width: 50px;
padding: 3px;
color: white;
text-align: center;
position: absolute;
margin-left: -95px;
z-index: 6;
border-radius: 3px;
cursor: pointer;
font-family: 'Days One', sans-serif;
font-size: 18px;
letter-spacing: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.liked_button {
background: #2C599D;
margin-left: -95px;
margin-top: 0;
}
.like_button:hover {
background: #2C599D;
}
.show {
opacity: 1;
}
/* End of Like Button */
/* End of Movie Content */
/* Tab System for admin.php */
h1, h2, h3, h4 {
padding: 0;
margin: .1rem 0;
border-left: 4px solid #4F2CCA;
padding-left: 8px;
}
.material-tabs {
display: block;
float: left;
padding: 16px;
padding-top: 0;
width: 100%;
max-width: 480px;
left: calc(50% - 480px/2);
position: relative;
margin: 96px auto;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
border-radius: 2px;
}
#media all and (max-width: 480px) {
.material-tabs {
max-width: 100%;
left: 0;
}
}
.visible {
position: relative;
opacity: 1;
width: 100%;
height: auto;
float: left;
-webkit-transition: opacity .35s ease;
transition: opacity .35s ease;
z-index: 3;
}
.hidden {
position: absolute;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 0s ease;
transition: opacity 0s ease;
}
.hidden img {
display: none;
}
[class*="tabbed-section-"] {
float: left;
color: #000;
}
[class*="tabbed-section-"] img {
display: block;
width: 80%;
margin: auto 10%;
}
.tabbed-section__selector {
position: relative;
height: 32px;
top: -31.2px;
left: -16px;
padding: 0;
margin: 0;
width: 100%;
float: left;
}
.tabbed-section__selector [class*="-tab-"] {
float: left;
display: block;
height: 32px;
line-height: 32px;
width: 100px;
text-align: center;
background: #fff;
font-weight: bold;
text-decoration: none;
color: black;
font-size: 14px;
}
.tabbed-section__selector [class*="-tab-"].active {
color: #4F2CCA;
}
.tabbed-section__selector a:first-child {
border-top-left-radius: 2px;
}
.tabbed-section__selector a:last-of-type {
border-top-right-radius: 2px;
}
.tabbed-section__highlighter {
position: absolute;
z-index: 10;
bottom: 0;
height: 2px;
background: #4F2CCA;
max-width: 100px;
width: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block;
left: 0;
-webkit-transition: -webkit-transform 0.23s ease;
transition: -webkit-transform 0.23s ease;
transition: transform 0.23s ease;
transition: transform 0.23s ease, -webkit-transform 0.23s ease;
}
.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.divider {
background: rgba(0, 0, 0, 0.1);
position: relative;
display: block;
float: left;
width: 100%;
height: 1px;
margin: 8px 0;
padding: 0;
overflow: hidden;
}
/* End of Tab system for admin.php */
/* Create */
#title, #length {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
}
#title:focus, #description:focus, #length:focus {
border: 1px solid #A9A9A9;
}
#description {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
resize: vertical;
max-height: 70px;
}
#rating_text {
position: relative;
top: -10px;
}
#length_text {
position: relative;
top: -10px;
}
/* End of Create */
/* Dropdown Selection */
nav {
margin: 10rem auto;
width: 220px;
position: absolute;
left: 1150px;
top: -140px;
}
nav ul {
color: #fff;
font-family: sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
}
nav a {
background: #1A1A1A;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
nav ul ul a:hover {
background: #666;
}
nav ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
nav ul:hover ul {
display: block;
}
nav ul:first-child:hover > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
nav ul ul > li:not(:last-child) {
border-bottom: 1px solid white;
}
nav ul > li:first-child:before {
content: "";
position: absolute;
}
nav ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
left: 175px;
top: 30px;
}
.fa {
margin-right: .5rem;
}
/* End of Dropdown Selection */
/* Files Left */
#files_left {
color: red;
width: 110px;
padding: 1px;
border: 1px solid red;
text-align: center;
border-radius: 10%;
position: relative;
left: 15px;
top: 20px;
}
/* End of Files Left */
/* Avatar */
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
/* End of Avatar */
Some of the CSS may be for other pages. I realize this is a lot of information. Let me know if you need anything else...
First of all, you use the same id in 6 elements for every movie, which you shouldn't. An id is unique, so change that to like 'descriptive_div_1', 'descriptive_caret_1', etc (I did that in the samples below so you can see where).
This is how a movie section looks like (repeated for each movie, no wrapper around each of them)
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
So to be able to target each avatar_friend in each movie section, you need CSS rules like this
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+1) {
left: 0px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+2) {
left: 36px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+3) {
left: 72px;
}
The problem with this is you need to know how many avatars_friend's it is, as you need to change the nth-of-type counter and the amount of CSS rules accordingly.
By adding a wrapper like this for the avatar's, will fix it for you
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
.avatar_friend_wrapper {
position: absolute;
left: 0;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
What I recommend to do, would be to change your PHP loops so they generate something like this instead, where each movie item has its own wrapper.
With that you get a completely different control how to layout each movie info item based on screen size etc.
<div class='movie_div_2' number='2'>
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
</div>
To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>