This issue is driving me nuts. I've tried to implement every answer I've found on Google and on SO. I just want the text under the images to wrap correctly in IE11 like every other browser does in this container. The content is a table with flexbox properties. I have set the container to a set width. When I allow fluid, it doesn't wrap anywhere. But I'm not worried about that. I've tried adding width:100% and max-width:100% to the children, parents and grandparents. I've also tried adding flex-basis:100% everywhere I can think. Any help on this would be much appreciated.
body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr class="d-flex flex-row">
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Here is a JSBin of the example as well: https://jsbin.com/qewijuhoco/1/edit?html,css,output
JSFiddle does not support IE11 anymore so had to use JSBin
UPDATE: If it makes any difference, I tried swapping out all the <table>, <tr>, and <td> tags with <div> tags. This didn't seem to have any affect.
In HTML, there is no such thing as "a <table> with flexbox properties".
The CSS table-model as defined in CSS Level 2 specs has specific rules regarding what elements can be children of what elements and under which conditions.
In your example, you can't have display:flex elements as immediate children of display:table-row-group elements. Furthermore, if <tr> (display:table-row elements) are placed directly under a <table> element, you'll notice browsers automatically add a <tbody> (display:table-row-group) wrapper around them.
These rules are important for the table display model and how it generates column sizes. You should also note the table model is a very complex and slow model for rendering and you'll notice performance issues when dealing with more than 50 items, particularly if you're performing DOM manipulations on each cell, which is not the case of box model, flexbox model or grid layout model.
The fact that your code "works" in some browsers is irrelevant. Since your CSS rules are invalid, browsers are free to do what they consider optimal, and that differs from browser to browser, since there is no official recommendation for it.
There are several ways to fix your layout but you probably you want to remove d-flex from <tr>s and <td>s and wrap the <td> contents in a d-flex wrapper according to your needs (=> solution 1).
Also note using <table> elements for layout is generally regarded as a bad idea (=> solution 2).
Using <table>s:
body {
box-sizing: border-box;
}
.container {
width: 500px;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
td {
position: relative;
}
a {
text-decoration: none;
}
td > a > * {
flex-grow: 0;
}
td > a > .flex-fill {
flex-grow: 1;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td {
width: 33.33%;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Using flexbox:
body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 0 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}
.row {
display: flex;
width: 100%;
}
.row > div {
flex: 0 1 33%;
padding: 0 .5rem .5rem;
box-sizing: border-box;
display: fLex;
flex-direction: column;
}
.row > div > a {
flex-grow: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<div class="row">
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Note I didn't clean them up. My advice: start from scratch and don't use !important.
Related
I'm working on a specific layout using Bootstrap 5 and attempt to render a tag outside his original container, taking the full page width.
I tried using absolute position on the img tag, however, doing this, footer is going over the tag which is not expected.
More than words, this is what I trying to do
The ideal DOM structure would be as follow :
<article>
<header>
<div>
<img />
<h3 />
</div>
<div class="meta" />
</header>
<div class="content" />
<footer />
</article>
img should get full x-width
img should stay in the overal y position (meaning nothing coming after it - should go over it, like a page footer or anything else)
h3 should be over the img tag
any idea would get a warm welcome, I'm trying to make that small thing working since over a week now :')
you're right
my current best attempt it this, so I split the overall structure in three distinct container box, which sounds like a bit hacky to me - and I have issues when it's rendered on mobile (ie: title is going outside down the box, instead staying stick to the bottom of the image)
<body class="position-relative">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
</div>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner d-flex position-relative">
<img style="object-fit: cover;position: absolute;height: 300px;left: 0;right: 0;/*! width: 200%; */" class="w-100" src="...">
<div class="container-fluid container-lg position-relative">
<div class="position-absolute bottom-0 start-0 right-0" style="background: rgba(0, 0, 0, 0.4);">
<h3 class="display-3 p-4">The War of the Worthies: the spectre of Cardan’s aggression</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid container-lg"></div>
<footer class="container-fluid container-lg"></footer>
</article>
</section>
</main>
<div class="container-fluid container-lg">
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee"><div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-39418180; transform: translateX(1084px);" class="js-marquee-wrapper"><div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
However, the render is good https://imgur.com/a/9wBse0Q
My previous attempt was that one, and with that, the marquee box is going inside the article banner. This, and the title is going outside the image which is rendered using a after anchor.
<body class="position-relative customize-support">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner"></div>
<div class="d-flex">
<h3 class="display-3">Change of course for Eskari Industries</h3>
</div>
</header>
<div></div>
<footer></footer>
</article>
</section>
</main>
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee">
<div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-33044180; transform: translateX(1084px);" class="js-marquee-wrapper">
<div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
/*
Theme Name: Galaxy One
Theme URI: https://galaxyone.news
Author: Loic Leuilliot
Author URI: https://github.com/warlof
Description: Galaxy One Gazette default template
Tags: newspaper, rising constellation, game, news
Version: 0.1
Requires at least: 5.0
Tested up to 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or Later
License URI: https://www.gnu.org/Licenses/gpl-2.0.html
Text Domain: galaxyone
*/
#font-face {
font-family: "Gtek Technology";
src: url("./assets/fonts/Gtek Technology.ttf") format('truetype');
font-weight: bold;
}
header h1 {
font-size: calc(1.375rem + 3vw);
font-family: "Gtek Technology", sans-serif;
margin-bottom: 0;
border-bottom: solid 4px var(--bs-primary);
}
.navbar-nav {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.navbar-nav > li {
flex-grow: 1;
}
.navbar-nav .nav-link {
text-align: center;
text-transform: uppercase;
padding: .7rem 1rem;
border-top: 1px solid var(--bs-primary);
border-bottom: 1px solid var(--bs-primary);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: var(--bs-primary);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
color: #fff;
background-color: var(--bs-primary);
}
.go-news .card-img-top {
height: 250px;
object-fit: cover;
object-position: 50% 0;
}
.go-news .stretched-link:hover::after {
background: #282c34dd url("./assets/img/plus-circle.svg") center no-repeat;
background-size: 50%;
transition: background-color 0.5s ease;
}
.go-category-link {
border-radius: 0;
border: none;
padding: 0.5rem;
text-transform: uppercase;
text-decoration: none;
}
.go-category-link.category-sport {
background-color: var(--bs-primary);
}
.go-category-link.category-politics {
background-color: var(--bs-danger);
}
.go-category-link.category-financial, .go-category-link.category-people {
background-color: var(--bs-warning);
}
.go-category-link.category-miscellaneous {
background-color: var(--bs-success);
}
.go-category-link.category-sciences {
background-color: var(--bs-secondary);
}
.page-item {
margin-right: 20px;
}
.page-item:last-child {
margin-right: 0;
}
.page-item:first-child .page-link {
border-radius: 0;
}
.page-item:last-child .page-link {
border-radius: 0;
}
.page-item.disabled .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.page-link {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
}
.page-link:hover {
color: var(--bs-primary);
}
.page-link.dots:hover {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
cursor: default;
}
.go-article-banner {
height: 300px;
}
.go-article-banner::after {
background: #333 url('...') no-repeat center;
background-size: cover;
content: "";
position: absolute;
height: 300px;
left: 0;
right: 0;
}
.go-streaming-news .marquee-wrapper {
background-color: #4472c455;
padding: 0.5rem;
}
.go-streaming-news .marquee {
overflow: hidden;
}
.go-streaming-news .marquee .list-inline-item {
border-right: solid 3px var(--bs-primary);
margin: 0;
padding: 0 0.5rem;
}
.go-streaming-news .marquee .list-inline-item:last-child {
border-right: none;
}
Well, I finally figure a way to do it properly (I think so at least).
Overall reference is this blog post https://css-tricks.com/full-width-containers-limited-width-parents/
I'm using the very last alternative as detailed by "No calc() needed" which is probably the more flexible solution.
First, here is the global DOM structure
<div class="container-fluid container-lg">
<header>
<nav></nav>
</header>
<article>
<header>
<div class="go-article-header">
<div class="go-article-banner" style="background-image: url('...');"></div>
<div class="go-article-title-wrapper">
<h3 class="display-3 m-0">Article title</h3>
</div>
</div>
</header>
<div class="go-article-content">
<p>...</p>
</div>
<footer></footer>
</article>
<footer></footer>
</div>
We have a unique container which is covering the overall page
Inside this container, there are a global header and footer with navigation inside the header
Between both, we have an article, container its own header and footer
The header is containing a few wrapper for extra styling (like background under title, and so on) - I also switched from img tag to a background in order to be able to use cover property. But here again, it's much more a design choice
Now, the styling :
.go-article-header {
height: 300px;
position: relative;
}
.go-article-banner {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
height: 100%;
margin-left: -50vw;
margin-right: -50vw;
background-image: url("assets/img/eskari.png");
background-color: #333;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.go-article-title-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
}
Everything is happening with the .go-article-banner class which is first aligning the tag (using the left and right properties) and then make it start outside the box (using the margin properties). Last but not least, the width property using view width metric is ensuring the tag will use the full screen width.
Regarding title, we just need to fix it left/right/down using parent container. This is done with the .go-article-title-wrapper class.
Here is the final render
I need to keep box-sizing:border-box for most of then page but need to remove it in the footer. The following isn't quite working
*, ::after, ::before {
box-sizing: border-box;
.footContainer *,.footContainer ::after, .footContainer ::before{
box-sizing:content-box;
}
.footerContainer {
display:flex;
background-color: #538231;
padding: 0vw;
justify-content:space-evenly;
align-items:center;
font-size:1vw;
}
.socialMedia a{
display:flex;
flex-direction:column;
color: white;
border: 0px solid white;
margin: 1vw;
justify-content:center;
align-items:center;
}
.socialMedia a {
outline: none;
color: white;
text-decoration: none;
}
.fa2 {
padding: 0 1vw;
font-size: 2.25vw!important;
width: 2.5vw;
text-align: center;
text-decoration: none;
margin: 0;
}
#footContainer *,#footConatiner ::after,#footContainer ::before{
box-sizing:unset;
}
<div class="footerContainer" style="margin-bottom:1vw;box-sizing: unset;">
<span style="color:white" class="cr">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </span>
<div style="display:flex;justify-content:center;box-sizing: unset;">
<div id="zero" class="socialMedia" style="
box-sizing: unset;
">
<a href="mailto:swag#sustainablewestonma.org">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/mail3-whiteongreen.png">
<!--Send us an email-->
</a>
</div>
<div id="first" class="socialMedia">
<a href="https://www.facebook.com/groups/1960906387454685/">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/facebook-square-brands-green.png">
<!-- Like us on Facebook-->
</a>
</div>
<div id="second" class="socialMedia">
<a href="https://twitter.com/Weston_SWAG">
<img style="border:solid 1px white;border-radius:50%" class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/twitter-square-brands-green.png">
<!-- Follow us on Twitter-->
</a>
</div>
<div id="third" class="socialMedia">
<a href="https://instagram.com/sustainablewestonactiongroup/">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/instagram-brands-green.png">
<!--Follow us on Instagram-->
</a>
</div>
</div>
</div>
You didn't have a closing bracket after your first selector block, and in the selector block where you're reseting your box-sizing property, you named the class .footContainer instead of .footerContainer
*, ::after, ::before {
box-sizing: border-box;
}
.footerContainer *,.footerContainer ::after, .footerContainer ::before{
box-sizing:content-box;
}
.footerContainer {
display:flex;
background-color: #538231;
padding: 0vw;
justify-content:space-evenly;
align-items:center;
font-size:1vw;
}
.socialMedia a{
display:flex;
flex-direction:column;
color: white;
border: 0px solid white;
margin: 1vw;
justify-content:center;
align-items:center;
}
.socialMedia a {
outline: none;
color: white;
text-decoration: none;
}
.fa2 {
padding: 0 1vw;
font-size: 2.25vw!important;
width: 2.5vw;
text-align: center;
text-decoration: none;
margin: 0;
}
#footContainer *,#footConatiner ::after,#footContainer ::before{
box-sizing:unset;
}
<div class="footerContainer" style="margin-bottom:1vw;box-sizing: unset;">
<span style="color:white" class="cr">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </span>
<div style="display:flex;justify-content:center;box-sizing: unset;">
<div id="zero" class="socialMedia" style="
box-sizing: unset;
">
<a href="mailto:swag#sustainablewestonma.org">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/mail3-whiteongreen.png">
<!--Send us an email-->
</a>
</div>
<div id="first" class="socialMedia">
<a href="https://www.facebook.com/groups/1960906387454685/">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/facebook-square-brands-green.png">
<!-- Like us on Facebook-->
</a>
</div>
<div id="second" class="socialMedia">
<a href="https://twitter.com/Weston_SWAG">
<img style="border:solid 1px white;border-radius:50%" class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/twitter-square-brands-green.png">
<!-- Follow us on Twitter-->
</a>
</div>
<div id="third" class="socialMedia">
<a href="https://instagram.com/sustainablewestonactiongroup/">
<img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/instagram-brands-green.png">
<!--Follow us on Instagram-->
</a>
</div>
</div>
</div>
When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Just add something like gap: 5px to your container with flex layout
Thanks to #AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap
Add margin-right to the element if you want to stick to flexbox.
Otherwise - try out css grid, super easy with grid-gap to add the gap you need.
https://www.w3schools.com/css/css_grid.asp
You can add this CSS rule:
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
I have a layout composed of divs displaying as table, 3 table rows, and up to 5 table cells per row. My problem is twlofold:
1) I can't figure out how to center the table cells within the rows if there are less than five cells in the table., and
2) I can't figure out how to keep the integrity of the shapes when there are less than 5 in a row.
The number of cells in a row will be variable (between 3 and 5), and I have to use divs -- I can't use real tables.
Here is a codepen: http://codepen.io/Jaemaz/full/aCboe
Here is the source:
HTML:
<div class="focus-container">
<div class="focus-row">
<div class="focus-element circle">
<span class="ng-scope">
Option A
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option B
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option C
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option D
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option E
</span>
</div>
</div>
<div class="focus-row">
<div class="focus-element circle" ng-class="{unknown: unknown, square: square, circle: circle, selected: selected, shouldHaveBeenSelected: shouldHaveBeenSelected, shouldNotHaveBeenSelected: shouldNotHaveBeenSelected}" ng-click="click()" ng-transclude="" focuschoice="" identifier="F" enabled="true">
<span class="ng-scope">
Option F
</span>
</div>
</div>
</div>
CSS:
.focus-container {
width: 560px;
height: auto;
display: table;
background-color: #000;
border-spacing: 15px;
table-layout: fixed;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.focus-row {
width: 100%;
height: 100%;
display: table-row;
}
.focus-element {
width: 90px;
height: 90px;
display: table-cell;
color: #fff;
background: #808080;
border: 2px solid #BFBFBF;
vertical-align: middle;
text-align: center;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
max-width: 94px;
}
.focus-element.circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
}
Screen Shot:
Tables won't do that, but tables in table will. 1) Use single-cell rows in outer table and a new table within each cell, and center the inner table within the row. 2) You might use fixed (or some relative) width and height on each cell within inner tables.
ADDED:
This will work for display:table as well as old-school table.
Outermost table should only have one cell in each row, and in that cell place the inner table.
Building on #Jojje 's suggestion, the answer lies in creating an extra "inner" level (display:table) within the div structure. Solution is on CodePen here: http://codepen.io/Jaemaz/pen/spbKf
In case Codepen goes away, here is sample HTML and CSS:
HTML
<div class="focus-container">
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>ahem</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>hello</span>
</div>
<div class="focus-element circle">
<span>there</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>what</span>
</div>
<div class="focus-element circle">
<span class="content">is</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
</div>
</div>
</div>
CSS
.focus-container {
width: 560px;
background-color: #000;
padding: 5px;
}
.focus-container .focus-row {
height: 110px;
background-color: #000
}
.focus-container .focus-row .inner {
display: table;
margin: 0 auto;
height: 110px;
}
.focus-container .focus-row .inner .focus-element {
float: left;
text-align: center;
margin: 0 auto;
width: 94px;
height: 94px;
background-color: #009900;
}
.focus-container .focus-row .inner .focus-element span {
margin-top: 40px;
display: block;
}
.focus-container .focus-row .inner .circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
margin: 8px;