Develop Reference

How to make table rows take up full width of table and be underneath table headers

I'm struggling to get my table data to be directly underneath my table headers it's currently looking like this on inspection:
enter image description here
this is what it looks like with a space around
, but how can I make it more centered?

I give you an example for your reference:
/* DivTable.com */
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"> cxvv</div>
<div class="divTableCell"> xcvxcv</div>
<div class="divTableCell"> xcvx</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vxvx</div>
<div class="divTableCell"> wewrwe</div>
<div class="divTableCell"> xcvxv</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> xxcvxcv</div>
<div class="divTableCell"> dsf</div>
<div class="divTableCell"> sdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vfsdf</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> dsfsdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> cxvxcv</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> sdf</div>
</div>
</div>
</div>
You can browse the web site to generate the div table.

This is a pure flexbox example:
.cell,
.cellEnd,
.cellTail,
.container,
.headerRow,
.row {
display: flex;
flex-grow: 1;
}
.cell,
.cellEnd,
.cellTail {
border-top: 1px solid black;
border-left: 1px solid black;
}
.cellBottom {
border-bottom: 1px solid black;
}
.cellEnd {
border-bottom: 1px solid black;
}
.cellEnd,
.cellTail {
border-right: 1px solid black;
}
.container {
flex-direction: column;
}
.headerRow .cell,
.headerRow .cellTail {
font-weight: bold;
justify-content: center;
}
.row .cell,
.row .cellEnd {
padding: 3px;
}
<div class="container">
<div class="headerRow">
<div class="cell">
1
</div>
<div class="cell">
2
</div>
<div class="cellTail">
3
</div>
</div>
<div class="row">
<div class="cell cellBottom">
1000
</div>
<div class="cell cellBottom">
2000
</div>
<div class="cellEnd">
3000
</div>
</div>
</div>

Select nth element (among elements with same class name) and style :after pseudo element [duplicate]

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
i have 5 elements with the classname picked. each element has a div with classname title. i added :after pseudo element for each .title and need to set different background for each pseudo element.
it would be best if it could be done in pure CSS, but i couldn't find anything and maybe it needs javascript.
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>
ps. i have set background: #000; so that they are visible in the preview.
tnx in advance!

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(1) .title:after {
background: red;
}
.picked:nth-of-type(2) .title:after {
background: yellow;
}
.picked:nth-of-type(3) .title:after {
background: green;
}
.picked:nth-of-type(4) .title:after {
background: pink;
}
.picked:nth-of-type(5) .title:after {
background: blue;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

Did you look at :nth-of-type(n)?
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(2) .title:after {
background: red;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

I have included an example for the second child.
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-child(2) .title:after {
background: red;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
margin: 5px;
}
.picked:nth-child(1) .title:after {background: red}
.picked:nth-child(2) .title:after {background: green}
.picked:nth-child(3) .title:after {background: blue}
.picked:nth-child(4) .title:after {background: yellow}
.picked:nth-child(5) .title:after {background: orange}
<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>

Sort and append content based on value difference of specific data attribute

I'm attempting to create a function that sorts elements based on their numerical separation from the data-attribute value of a designated "leader."
Here's what I'm trying to achieve:
If the participant data-title value is less than or equal to 4 from the data-title of the "leader" then they are appended to playoffs
If the data-title value is greater than 4 from the data-title of the "leader" than they are appended to out.
I'm hoping to keep the leader in place and only sort/append the elements that are equal to or larger than the leader data-title into their respective categories. How can I adjust the code below to facilitate something like this?
var participant = $('.participant')
var leader = $('#leader')
$(participant).sort(function (a, b) {
var contentA = parseInt( $('.participant').data('title'));
var contentB = parseInt( $(leader).data('title'));
if (contentA - contentB <= 4) {
$(participant).appendTo('#in-race');
}
else {
$(participant).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>

To keep the leader in place and only sort the other participants you can do this:
var participant = $('.participant:not(:has(#leader))');
var leader = $('#leader')
participant.each(function() {
var contentA = parseInt($(this).find(".score").data("title"));
var contentB = parseInt(leader.data("title"));
if (contentA - contentB <= 4) {
$(this).appendTo('#in-race');
} else {
$(this).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>

How do you wrap four cards around a centered card?

I want to create a homepage with 5 card elements.
I want to have 4 items surrounding the 5th element that is centered.
This is a picture of what I'm trying to do. https://imgur.com/a/3jvHicq
I have tried searching but I haven't found an example that talks about breaking the "wrap" text on the next row as it shows in the picture. I just don't know what else to search for.
I tried absolute position but that was NOT what I needed. I tried changing left: 100px and such to align the items but they wouldn't even move without the absolute position (I don't understand why). I tried using floats but it just created a mess.
.hp-container {
background: rgb(139, 174, 250);
flex: flex;
justify-content: center
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px 10px 10px 550px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
Color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>

You can use css grid system. This example shows the basics but you can modify it and make it work as required
.hp-container {
background: rgb(139, 174, 250);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
[class^='home-card-'] {
background: grey;
color: white;
text-align: center;
}
.home-card-2 {
margin: 10px 0;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class='col-1'>
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class='col-3'>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

If you are using flex, then you need to modify your html structure a little bit. CSS flex works in 1-d only (for 2-d you should use css grid). Still, if you want to use flex, you need to modify the html structure in such a manner that there are 3 columns with left containing 2 divs, mid containing 1 div and right containing 2 divs:
.hp-container {
background: rgb(139, 174, 250);
display: flex;
justify-content: center;
flex-direction: row;
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="left-wrap">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="mid-wrap">
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="right-wrap">
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>
for css grid, #brk as given a good answer.
Hope it helps. Revert for any doubts.

You can use flex like this:
.hp-container{
display: flex;
flex-direction: row;
}
.card{
color: red;
width: 150px;
height: 200px;
background: yellow;
margin: 10px;
text-align: center;
padding: 5px;
}
.home-card-3{
height: 420px;
}
<div class="hp-container">
<div class="col1">
<div class="card home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="card home-card-2">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="col2">
<div class="card home-card-3">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="col3">
<div class="card home-card-4">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="card home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/