I 've got 3 items and need to align their contents horizontally, in center. So itemAContainer and itemCContainer will displayed as itemB in the middle and not at the left side..(White bordered Boxes)
Is there anyway to do this without changing itemAContainer and itemCContainer and their childs? I tried many solutions with no luck.
#wrapper {padding-top:2px;color:#ff0000;background:#3a3a39;border-radius:4px; margin-top:44px; width:100%;}
.section-wrapper {display: flex;height: 100%;display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
align-items: center; justify-content: center;}
.left, .center, .right {min-width: 166px;}
.left { flex: 0 33%;}
.center { flex: 33%;}
.right { flex: 0 33%;}
.home-left {margin:-1px 4px -1px -4px; border:1px solid #fff;border-top-left-radius:8px; border-bottom-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;z-index:1;}
.home-center {display:table-cell; background-color:#3a3a39; margin:-1px 4px -1px -4px; width:33.3%; text-align:center;z-index:1;}
.home-right {margin-right:2px;border:1px solid #fff;border-top-left-radius:8px;border-bottom-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;z-index:1;}
<div id="wrapper">
<div class="section-wrapper">
<div class="left">
<div class="home-left">
<div id="itemAContainer" style="position:relative;width:168px; height:440px;">
<div id="itemAImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191427cf89.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
<div class="center"><div class="home-center"><img src="https://i.imgsafe.org/19143b4e85.png" width="166" height="420" border="1" alt=""/></div></div>
<div class="right">
<div class="home-right">
<div id="itemCContainer" style="position:relative;width:168px; height:440px;">
<div id="itemCImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191452f4ea.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
</div>
</div>
You need to make your home-left and home-right classes flex-containers as well.
#wrapper {
padding-top: 2px;
color: #ff0000;
background: #3a3a39;
border-radius: 4px;
margin-top: 44px;
width: 100%;
}
.section-wrapper {
display: flex;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.left,
.center,
.right {
min-width: 166px;
}
.left {
flex: 0 33%;
}
.center {
flex: 33%;
}
.right {
flex: 0 33%;
}
.home-left {
margin: -1px 4px -1px -4px;
border: 1px solid #fff;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: 1;
display: flex;
justify-content: center;
}
.home-center {
display: table-cell;
background-color: #3a3a39;
margin: -1px 4px -1px -4px;
width: 33.3%;
text-align: center;
z-index: 1;
}
.home-right {
margin-right: 2px;
border: 1px solid #fff;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: 1;
display: flex;
justify-content: center;
}
<div id="wrapper">
<div class="section-wrapper">
<div class="left">
<div class="home-left">
<div id="itemAContainer" style="position:relative;width:168px; height:440px;">
<div id="itemAImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191427cf89.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
<div class="center">
<div class="home-center">
<img src="https://i.imgsafe.org/19143b4e85.png" width="166" height="420" border="1" alt="" />
</div>
</div>
<div class="right">
<div class="home-right">
<div id="itemCContainer" style="position:relative;width:168px; height:440px;">
<div id="itemCImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191452f4ea.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
</div>
</div>
Related
Good morning,
I am having a challenge with centering a flexbox container itself. I have managed to center all 5 elements within the flexbox but cannot actually get the container itself to center horizontally into the middle of the page.
I have watched a tutorial after getting stuck on this and can see my code is the same except for the naming of containers. Timestamp provided for the exact second where you can see their code: https://youtu.be/fJc18fT4T3s?t=542. In their tutorial, the "trend-container" which is my "image-container" is centered whereas mine is not. I have tried using margin: 0 auto; but this does nothing and the container stays on the left side of the page.
I have had to add text-align: center to mine as the text was not aligning.
If anyone can advise what I have done wrong to not allow this flexbox container to center that would be great as I am a bit stumped!
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
Changing display: inline-flex to display: flex and adding margin: 0 auto to the <div class="image-container"> container fixes the center alignment issue for that section of the page.
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
for "image-container" the parent that is "body" is not a flex or grid item. quick fix set: body to be a flex container and "flex-direction to column, then for "image-container" set "align-self: center;" like so:
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
}
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
}
Sharing here the demo UI. In this UI, I would want to show the CALENDAR outside the parent window just by using CSS. The Calendar should overflow over the Submit/cancel button div n outside that too]1
Code snippet:
Here, the class date-picker-wrp should come outside the complete MODAL box.
.modalwindow {
z-index: auto;
position: fixed;
box-shadow: 0 0 20px #333;
background-color: #fff;
border-radius: 0;
overflow: inherit;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.zc-form > div {
max-height: 80vh;
display: flex;
flex-direction: column;
height: 100%;
width: 550px;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.zc-form-body {
max-height: 500px;
overflow: auto;
padding: 10px 30px 30px;
}
.posrel {
position: relative;
}
.zc-form-input{
border-radius: 4px;
line-height: 33px;
padding: 0 18px 0 15px;
font-size: 14px;
color: #2d3138;
position: relative;
height: 35px;
border: solid 0.5px #dedede;
background-color: #fff;
}
.date-picker-wrp{
position: absolute;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
width: 100%;
margin-top: 2px;
}
.datepicker{
text-align: left;
padding: 10px 7px;
}
.zc-form-footer{
height: 85px;
background-color: #fff;
display: flex;
align-items: center;
padding: 0 30px;
justify-content: space-between;
flex-shrink: 0;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>
<div id="winhead" class="mheader ">Create Modal</div>
<section class="zc-form-body">
<div inputs="">
<div class="font14 mrgT20 posrel">
<div class="zc-form-input-hdr">
<span>date</span>
<span class="clr9 zc-form-hint">Enter the due date</span>
</div>
<div class="posrel cur">
<input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
<span class="zc-form-icons">
<div loading="" class="form-input-loader dN">
<span></span>
<span></span>
<span></span>
</div>
<span class="msi-calndr zcclr font15"></span>
<span class="msi-close zcclr"></span>
</span>
<div class="date-picker-wrp" style="display: block;">
<div element="calendar" class="date-picker">
<div class="datepicker" style="display: block;">
<div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="zc-form-footer">
<div class="w100 h100 dflx fjustifySB">
<div class="flexC">
<button class="buttn_pos">Add Task</button>
<button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
</div>
</footer>
</div>
</div>
Expected result:
I want the calendar dom to appear like the dropdown in below shortcut, but ONLY BY USING PURE CSS ( no javascript calculation)
Please refer this JS Fiddle link: https://jsfiddle.net/dilip96025/gzh26fej/28/
Here, the Country dropdown should come outside the box with con class.
As far as I could reproduce your problem with your current included code, you need to remove overflow: hidden from .zc-form > div and remove overflow: auto from .zc-form-body. The cause of your problem was that overflow: hidden really hides everything that goes beyond its own height and width.
.modalwindow {
z-index: auto;
position: fixed;
box-shadow: 0 0 20px #333;
background-color: #fff;
border-radius: 0;
overflow: inherit;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.zc-form > div {
max-height: 80vh;
display: flex;
flex-direction: column;
height: 100%;
width: 550px;
position: relative;
border-radius: 5px;
}
.zc-form-body {
max-height: 500px;
padding: 10px 30px 30px;
}
.posrel {
position: relative;
}
.zc-form-input {
border-radius: 4px;
line-height: 33px;
padding: 0 18px 0 15px;
font-size: 14px;
color: #2d3138;
position: relative;
height: 35px;
border: solid 0.5px #dedede;
background-color: #fff;
}
.date-picker-wrp {
position: absolute;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
width: 100%;
margin-top: 2px;
}
.datepicker {
text-align: left;
padding: 10px 7px;
}
.zc-form-footer {
height: 85px;
background-color: #fff;
display: flex;
align-items: center;
padding: 0 30px;
justify-content: space-between;
flex-shrink: 0;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>
<div id="winhead" class="mheader ">Create Modal</div>
<section class="zc-form-body">
<div inputs="">
<div class="font14 mrgT20 posrel">
<div class="zc-form-input-hdr">
<span>date</span>
<span class="clr9 zc-form-hint">Enter the due date</span>
</div>
<div class="posrel cur">
<input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
<span class="zc-form-icons">
<div loading="" class="form-input-loader dN">
<span></span>
<span></span>
<span></span>
</div>
<span class="msi-calndr zcclr font15"></span>
<span class="msi-close zcclr"></span>
</span>
<div class="date-picker-wrp" style="display: block;">
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
test6<br>
<div element="calendar" class="date-picker">
<div class="datepicker" style="display: block;">
<div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="zc-form-footer">
<div class="w100 h100 dflx fjustifySB">
<div class="flexC">
<button class="buttn_pos">Add Task</button>
<button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
</div>
</footer>
</div>
</div>
Edit: second code snippet in answer to comment.
.modalwindow {
z-index: auto;
position: fixed;
box-shadow: 0 0 20px #333;
background-color: #fff;
border-radius: 0;
overflow: inherit;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.zc-form > div {
max-height: 80vh;
display: flex;
flex-direction: column;
height: 100%;
width: 550px;
position: relative;
border-radius: 5px;
}
.zc-form-body {
max-height: 500px;
overflow: auto;
padding: 10px 30px 30px;
}
.posrel {
position: relative;
}
.zc-form-input {
border-radius: 4px;
line-height: 33px;
padding: 0 18px 0 15px;
font-size: 14px;
color: #2d3138;
position: relative;
height: 35px;
border: solid 0.5px #dedede;
background-color: #fff;
}
.date-picker-wrp {
position: absolute;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
width: 100%;
margin-top: 2px;
}
.datepicker {
text-align: left;
padding: 10px 7px;
}
.zc-form-footer {
height: 85px;
background-color: #fff;
display: flex;
align-items: center;
padding: 0 30px;
justify-content: space-between;
flex-shrink: 0;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>
<div id="winhead" class="mheader ">Create Modal</div>
<section class="zc-form-body">
<div inputs="">
<div class="font14 mrgT20 posrel">
<div class="zc-form-input-hdr">
<span>date</span>
<span class="clr9 zc-form-hint">Enter the due date</span>
</div>
<div class="posrel cur">
<input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
<span class="zc-form-icons">
<div loading="" class="form-input-loader dN">
<span></span>
<span></span>
<span></span>
</div>
<span class="msi-calndr zcclr font15"></span>
<span class="msi-close zcclr"></span>
</span>
<div class="date-picker-wrp" style="display: block;">
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
test6<br>
<div element="calendar" class="date-picker">
<div class="datepicker" style="display: block;">
<div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="zc-form-footer">
<div class="w100 h100 dflx fjustifySB">
<div class="flexC">
<button class="buttn_pos">Add Task</button>
<button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
</div>
</footer>
</div>
</div>
In the calendar's css add "z-index:1000"
Eg:
<div class="calendar" style="z-index:1000"></div>
I am trying to create 3 div's inside parent, but no luck to any attempt i was made.. (that's what i am getting http://prnt.sc/bytx6l)
The idea is to create 3 div's 33% height (i dont want to use height by 137 pixels each).
The second is to have absolute centered any content inside 3 div's.
(that's what i want http://prnt.sc/bytzu1)
PS. I dont want to use just divs
What i am doing wrong? Any help?
body {background-color: #111;margin-left: 0px;margin-right: 0px;margin-bottom: 0px; color: #ffffff;}
#tbl {display: table; width:100%; margin-top:-4px;}
#row {display: table-row; width:100%;}
.title {font-weight:400; font-size: 170%; color:#ebebeb;}
#a {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
width:170px; text-align: center; }
#a-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#a-left {height: 100%; width:100%; display:block; background-color: rgba(31,30,30,1);}
#empty {display: table-cell; background-color: #3a3a39; width:10px; text-align: center; }
#b {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
width:170px; text-align: center; }
#b-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#b-left {height: 100%; width:100% ;display:block; background-color: rgba(31,30,30,1);}
.j-left {border:1px solid #dc6210; margin:-1px 4px -1px -4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.j-right {border:1px solid #dc6210; margin-right:2px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#spacer {display: table-row; height: 6px;}
#block {width:100%; height: 33% /*137px*/;}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
Because #a-choose and #a-left is relative position (by default), height: 33% of #block can not be calculated.
So, you should add style position: absolute to #a-left and position: relative to #a-choose.
This will be helpful.
body {
background-color: #111;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #ffffff;
}
#tbl {
display: table;
width: 100%;
margin-top: -4px;
}
#row {
display: table-row;
width: 100%;
}
.title {
font-weight: 400;
font-size: 170%;
color: #ebebeb;
}
#a {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
width: 170px;
text-align: center;
}
#a-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#a-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
#empty {
display: table-cell;
background-color: #3a3a39;
width: 10px;
text-align: center;
}
#b {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
width: 170px;
text-align: center;
}
#b-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#b-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
.j-left {
border: 1px solid #dc6210;
margin: -1px 4px -1px -4px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.j-right {
border: 1px solid #dc6210;
margin-right: 2px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#spacer {
display: table-row;
height: 6px;
}
#block {
width: 100%;
height: 33% /*137px*/;
}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
height is relative. Therefore all elements above it must also have a height element in them.
a-left
a-choose
row
tbl
Once you have a height: 100%; in all of these it works.
I got a problem with flexbox containers with absolute positioned childrens.
FIDDLE; if the window getting smaller (in width) the titles getting smaller, what is absolutly correct, the problem is in the digits that are overlapping over the other watches. I tested a bit around with z-Index, background-color but doesn't get anything work.
HTML:
<div class="stopwatch">
<div class="stopwatch__panel">
<div class="stopwatch__header">
<div class="stopwatch__title">Random Title 404531</div>
</div>
<div class="stopwatch__body">
<div class="stopwatch__counter">
<div class="stopwatch__segment stopwatch__segment--five">
<div class="stopwatch__segmentTopLeft"></div>
<div class="stopwatch__segmentTop"></div>
<div class="stopwatch__segmentTopRight"></div>
<div class="stopwatch__segmentMiddle">
<div class="stopwatch__segmentMiddleTop"></div>
<div class="stopwatch__segmentMiddleBottom"></div>
</div>
<div class="stopwatch__segmentBottomLeft"></div>
<div class="stopwatch__segmentBottom"></div>
<div class="stopwatch__segmentBottomRight"></div>
</div>
<div class="stopwatch__segment stopwatch__segment--five">
<div class="stopwatch__segmentTopLeft"></div>
<div class="stopwatch__segmentTop"></div>
<div class="stopwatch__segmentTopRight"></div>
<div class="stopwatch__segmentMiddle">
<div class="stopwatch__segmentMiddleTop"></div>
<div class="stopwatch__segmentMiddleBottom"></div>
</div>
<div class="stopwatch__segmentBottomLeft"></div>
<div class="stopwatch__segmentBottom"></div>
<div class="stopwatch__segmentBottomRight"></div>
</div>
</div>
</div>
</div>
<div class="stopwatch__panel">
<div class="stopwatch__header">
<div class="stopwatch__title">Random Title 714895</div>
</div>
<div class="stopwatch__body">
<div class="stopwatch__counter">
<div class="stopwatch__segment stopwatch__segment--nine">
<div class="stopwatch__segmentTopLeft"></div>
<div class="stopwatch__segmentTop"></div>
<div class="stopwatch__segmentTopRight"></div>
<div class="stopwatch__segmentMiddle">
<div class="stopwatch__segmentMiddleTop"></div>
<div class="stopwatch__segmentMiddleBottom"></div>
</div>
<div class="stopwatch__segmentBottomLeft"></div>
<div class="stopwatch__segmentBottom"></div>
<div class="stopwatch__segmentBottomRight"></div>
</div>
</div>
</div>
</div>
</div>
CSS:
.stopwatch {
position: fixed;
right: 0;
bottom: 0;
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
width: 100%;
}
.stopwatch__panel {
background-color: #ffffff;
border: 1px solid #dddddd;
display: flex;
flex-flow: column;
min-width: 0;
}
.stopwatch__header {
background-color: #f5f5f5;
display: flex;
align-items: center;
order: 1;
}
.stopwatch__title {
flex: 1 1 auto;
padding: 5px;
border-left: 1px solid #dddddd;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stopwatch__body {
display: flex;
align-items: stretch;
}
.stopwatch__counter {
background-color: #333333;
padding: 15px;
flex-grow: 1;
text-align: center;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.stopwatch__segment {
position: relative;
float: left;
margin: 6px;
width: 18px;
height: 35px;
transition: all 200ms ease-in-out;
}
.stopwatch__segment--zero .stopwatch__segmentTopRight {
border-right-color: #e6e6e6;
}
/* [...all numbers from zero to nine... (only coloring borders) ] */
.stopwatch__segment--nine .stopwatch__segmentBottom {
border-bottom-color: #e6e6e6;
}
.stopwatch__segmentTop {
position: absolute;
left: 1px;
height: 0;
width: 10px;
border-top: 3px solid #424242;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
transition: all 200ms ease-in-out;
}
.stopwatch__segmentTopRight {
position: absolute;
left: 15px;
top: 1px;
height: 10px;
width: 0;
border-right: 3px solid #424242;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
transition: all 200ms ease-in-out;
}
/* [... the other segments parts ...] */
add overflow:hidden; to .stopwatch__counter
.stopwatch__counter {
background-color: #333333;
padding: 15px;
flex-grow: 1;
text-align: center;
color: #ffffff;
display: flex;
overflow:hidden;
align-items: center;
justify-content: center; }
see this fiddle:
https://jsfiddle.net/grassog/jcgyce3g/2/
I have a product grid with Bootstrap and I added flexbox styles for the products .item box have same height.
You can check the grid here:
https://jsfiddle.net/oet3c3dp/2/
I add the basic flexbox styles, for the parent element .product-list:
.product-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
And then I added the styles for the child's elements:
.product-list .item {
padding: 0 10px 10px 0px;
margin-left: 0;
float: left;
text-align: center;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
Why this not works fine?
You are missing classes .container and .row (which they are part of the bootstrap grid), plus you need to change your flex: 0 0 auto to flex:1
.product-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.product-list .item {
padding: 0 10px 10px 0px;
margin-left: 0;
float: left;
text-align: center;
-webkit-flex: 1;
flex: 1;
}
.product-list .color-swatch {
width: 16px;
height: 16px;
border: 1px solid;
border-color: #d8d9db;
display: inline-block;
vertical-align: middle;
-webkit-border-top-right-radius: 50%;
border-top-right-radius: 50%;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
background-clip: padding-box;
-webkit-box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
}
.product-list h3 {
font-size: 14px;
margin: 0px;
text-transform: uppercase;
margin-top: 2px;
}
.item-inner {
position: relative;
padding: 0 18px;
border: 1px solid #e0e0e0;
background-color: #fff;
/*min-height: 300px*/
}
.product-img {
padding-top: 10px;
text-align: center;
/* min-width: 210px;
height: 220px;*/
overflow: hidden;
/*width: 170px;*/
}
.product-info {
position: relative;
/*height: 73px;*/
padding-top: 20px;
}
.product-info span.extra-info {
display: block;
color: #455A64;
font-size: 12px;
}
.product-img img {
display: inline-block;
vertical-align: middle;
/* max-width: 210px;
max-height: 210px;*/
}
.product-list .item .price {
color: #37474F;
font-weight: 700;
font-size: 18px;
margin-right: 10px;
}
.product-list .item .product-id {
color: #455A64;
}
.product-list .item-inner:hover {
box-shadow: 0 3px 6px 0 rgba(51, 51, 51, .2);
}
.product-list .item a:hover {
color: #651fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="product-list row">
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/1728/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">9,95 €</span>
<span class="product-id">#1728</span>
</div>
<h3>TAZA CERAMICA</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/2100/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">16 €</span>
<span class="product-id">#2100</span>
</div>
<h3>MATRICULA MINI</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/2638/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">29 €</span>
<span class="product-id">#2638</span>
</div>
<h3>RELOJ PULSERA ZAC</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/5407/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">39 €</span>
<span class="product-id">#5407</span>
</div>
<h3>BOLSO VAQUERO PEQUEÑO</h3>
</div>
</a>
</div>
</div>
</div>
</div>