I'm trying to build a footer that has two title columns and three content columns.
I'd like to use display: table-cell for the content columns, and believe I need to use display: table-header-group for the title columns.
While researching display: table-header-group, I could not find any documentation at all on how to use this CSS property. W3Cschools says the following.
table-header-group: Let the element behave like a thead element.
(source)
That unfortunately doesn't tell me how I should arrange my divs
So far I've got the following code, but I'm not sure if I'm using table-header-group correctly
.footer {
display: table;
}
.footer-box {
display: table-cell;
}
.footer-title-box {
display: table-header-group;
}
<div class="footer">
<div class="footer-title-box">
Title
</div>
<div class="footer-title-box">
Title
</div>
<div class="footer-box">
Content
</div>
<div class="footer-box">
Content
</div>
<div class="footer-box">
Content
</div>
</div>
If anyone has any experience with table-header-group and could shed some light on it, I would be incredibly grateful.
I don't have any experience with it but logic dictates that you can only have one thead so you can only have one table-header-group
So your structure should, perhaps, look more like this:
JSfiddle Demo Backup Link
.footer {
display: table;
width: 50%;
table-layout: fixed;
}
.footer-title-box {
display: table-header-group;
font-weight: bold;
}
.footer-row-box {
display: table-row-group;
}
.footer-box {
display: table-cell;
text-align: center;
}
<div class="footer">
<div class="footer-title-box">
<div class="footer-box">Title</div>
<div class="footer-box caption">Title</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
</div>
Related
So, I am creating a grid system based on flexbox and everything is going quite swimmingly. The basics of my grid are:
<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>
And in my css:
.row {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
}
.column {
padding: 10px;
flex: 1 1 0%;
}
Essentially, this makes the columns quite fluid, and they shrink/grow to fill all available space. This is great for me as I need to use this throughout various projects where I can't quite customize the grid for every single one. However, I have run into a small "issue". I was going to create a class called ".collapse" so I could collapse the left/right padding to have some columns fit right next together (for example: If I wanted a div with a background color (by adding a color class to the column=> .column .green) flush to an image in the next column). However, the spacing is all out of wack compared to row/columns above it.
<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>
example screenshot here
As you can see in my little example mockup, they do kinda line up, but the right and left margins have "decreased". Is there any smart way around this? I tried adding "left/right margins" to the first-of-type and last-of-type, but this just gets a bit hacky as then anything added in between start having odd alignment issues.
For this kind of grid system, you usually would discourage using structural styling on the grid cells directly, and it lets you do something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin-left: -10px;
}
.column {
flex: 1 0 0;
padding-left: 10px;
}
.collapse { margin-left: 0; }
.collapse > .column { padding-left: 0; }
.red,
.purple {
padding: 10px;
margin-bottom: 10px;
}
.red { background-color: red; }
.purple { background-color: purple; }
<div class="row">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
<div class="row collapse">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
This approach uses no margins on the outer ends, which I find way more convenient.
It's worth noting that this kind os system is not all that useful anymore, with the advent of CSS Grid Layout, but there you have it.
On a side note, 0 is always 0, and it never needs a unit.
I want to stack div differently for small screens and I want to use css for it.
What I want to achieve is following:
for one page, the div class="three has to go UNDER the .header
for another page (uses the same code), the div class="two" has to go ABOVE the .header
I only managed to make .two go above .header, but the result is that I cannot make the .three go below the .header on my other page (the actual result is that the .three is also placed ABOVE the .header because of my css code). How to fix?
#media(max-width: 460px) {
.container {
display: flex;
flex-direction: column;
}
.header {
order: 2;
}
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class='sidebar'>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>
</div>
Your two and three are within in a div called sidebar. You can't remove them from this div and order them with header using CSS because header is not the same level as them. You should possibly consider re-structuring your HTML?
I have amended your example slightly to show you what I mean.
.container {
display: flex;
flex-direction: column;
}
.header {
order: 2;
}
.two {
order: 1;
}
.three {
order: 3;
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>
What you want is tricky because your HTML is grouping items two and three.
The very best solution is to rearrange your HTML.
Just in case that it is not possible, you can set a workaround with display: contents on the sidebar element (this makes the element disappear from the flow)
#media(max-width: 4600px) {
.container {
display: flex;
flex-direction: column;
background-color: lightblue;
}
.header {
order: 2;
}
.three {
order: 3;
}
.sidebar {
display: contents;
}
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class='sidebar'>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>
</div>
Imagine the following HTML:
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
Now, we all know that we can use CSS to make this a two-column table:
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.contestant, .score {
display: table-cell;
}
This will render the contestant’s name and country within one cell, and the score in another.
What I want is to be able to have three columns, with the name, country, and score, but without changing the HTML. Is this possible?
In other words, ideally, I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
This is what display:contents; will do (https://caniuse.com/#feat=css-display-contents)
causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.score,
.name,
.country{
display: table-cell;
padding:10px;
}
.contestant {
display:contents;
}
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
I have an image that takes up the fold, below a fixed nav. I Want to vertical align: middle the #fold-text and chevron over the image.
html markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
This CSS below usually works when I want to center one div within another, but not luck on this (maybe because the img height is set to "auto" ? ) . Can anyone tell me how to correct this?
.background-image {
height: auto;
width: 100%;
display: table;
}
#fold-container {
display: table-cell;
vertical-align: middle;
}
#fold-text {
font-size: 1.6em;
font-weight: bold;
background-color: rgba(black, 0.3);
color: white;
display: table-cell;
}
.fa.fa-chevron-down {
z-index: 500;
color:white;
text-align: center;
font-size: 2em;
font-weight: normal;
display: table-cell;
}
Your desired markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
... is not valid HTML. <img> tags don't contain any other markup, so what the browser sees is more like this:
<div class="row">
<!-- note the self closing img tag -->
<img class="background-image" src="images/1400px_splash.jpeg"/>
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
<!-- </img> don't know what to do with this, because img tags close themselves -->
</div>
What you need to do is more like this:
<div class="row">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
<img class="background-image" src="images/1400px_splash.jpeg"/>
</div>
</div>
... and just make sure the appropriate stylings are added to your elements to position them appropriately.