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>
Related
So I was trying to implement flexbox into my container and it got messed up. I want the text to go beneath the circles, spaced and centered neatly and have it done via flexbox please. I am so lost in this code that I cannot figure this out, any help is greatly appreciated. It says I need t add more details but I can't think of any so this is just type.
.bottom__container {
background-color:rgba(255, 236, 0, 0.7);
text-align: center;
margin:0;
padding: 8px;
color: black;
font-family: 'Kalam', cursive;
font-weight: bolder;
font-size: 1.5rem;
}
.bottom__container li {
list-style: none;
display: inline-block;
padding: 32px;
}
.btm-container__why {
font-size:2.5rem;
margin:0;
}
.btm-container__depends {
font-size: small;
text-align: right;
font-family: initial;
}
.circle {
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin: auto;
background-color: white;
}
.icon {
margin-top: 20%;
}
<section class="btm-containers">
<section id="scroll" class="bottom__container">
<div>
<h1 class="btm-container__why">Why Choose Us?</h1>
<ul>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fa fa-users fa-3x" aria-hidden="true"></i></div>
</div>
<p>Thousands of Clients</p>
</li>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fa fa-handshake-o fa-3x" aria-hidden="true"></i></div>
</div>
<p>Online/In-person Consultations*</p>
</li>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fas fa-directions fa-3x"></i></div>
</div>
<p>Guided Tours*</p>
</li>
<li>
<div class="circle">
<div class="icon"><i class="fa fa-building-o fa-3x" aria-hidden="true"></i></div>
</div>
<p>Affordable Rent!*</p>
</li>
</ul>
<p class="btm-container__depends">*Depends on service purchased.</p>
</div>
</section>
Is there a reason why you put "lists" as a class for both ul and li? and then in your CSS you also selected "lists li". Put another class or change it for one of them, and then you should be able to center it.
Try cleaning up your code first. You have various mistakes such as
<li class="lists">
<div class="circle">
<div class="icon"><i class="fas fa-directions fa-3x"></i></div>
<p>Guided Tours*</p>
</div>
</li class="lists">
<li>
and I think you'd have an easier time debugging if you had it organized.
The problem is with the class for both ul and li (lists) also with padding here is your desired result:
<section id="scroll" class="btm-container">
<div>
<h1 class="btm-container__why">Why Choose Us?</h1>
<ul class="lists">
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-users fa-3x" aria-hidden="true"></i></div>
<p>Thousands of Clients</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-handshake-o fa-3x" aria-hidden="true"></i></div>
<p>Online/In-person Consultations*</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fas fa-directions fa-3x"></i></div>
<p>Guided Tours*</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-building-o fa-3x" aria-hidden="true"></i></div>
<p>Affordable Rent!*</p>
</div>
</li>
</ul>
<p class="btm-container__depends">*Depends on service purchased.</p>
</div>
</section>
and CSS
.btm-container {
background-color:rgba(255, 236, 0, 0.7);
text-align: center;
margin:0;
padding: 8px;
color: black;
font-family: 'Kalam', cursive;
font-weight: bolder;
font-size: 1.5rem;
}
.bottom__container li {
list-style: none;
display: inline-block;
padding: 32px;
}
.lists {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 2rem;
text-align: center;
margin-top: 20px;
}
.btm-container__why {
font-size:2.5rem;
margin:0;
}
.btm-container__depends {
font-size: small;
text-align: right;
font-family: initial;
}
.list-item {
flex-grow: 1;
flex-basis: 0;
p {
position: absolute;
padding: 0 70px;
}
}
.circle {
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin: 0;
background-color: white;
}
.d-flex {
display: flex
}
.align-items-center {
align-items: center;
}
.flex-column {
flex-direction: column;
}
.justify-content-center {
justify-content: center;
}
.position-relative {
position: relative;
}
I want to place image floated left, next to image, floated left one under another would be Authro, Date and Category, than, after this other elements will be floated on right side...
Like this...
https://i.imgur.com/tcKwalP.png
This is what I have so far...
https://jsfiddle.net/fbn9r3y4/
This is html...
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<span class="entry-author">
Ester
</span>
<span class="entry-date">September 3, 2019</span>
<span class="entry-category-single">
Music
</span>
<span class="meta-right">
<span class="entry-views"><span class="view-count">998</span> Views</span>
<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</span>
</span>
</div>
This is css...
.entry-meta {
font-family: Arial, sans-serif;
display: block;
align-items: center;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image {
display: block;
float: left;
}
.entry-author {
display: block;
float: left;
width: 200px;
}
.entry-date {
display: block;
float: left;
width: 200px;
clear: left;
}
.entry-category-single {
display: block;
float: left;
width: 200px;
clear: left;
}
.meta-right {
margin: 0 10px 0 0;
margin-left: auto;
order: 2;
float: right;
}
.entry-like {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
.entry-views {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
I changed up your markup a little bit and added a wrapping meta-left around the content of the left side. I also simplified your CSS. There were several CSS properties that were invalid or not necessary.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-meta::after {
content: '';
clear: both;
display: block;
}
.meta-left {
float: left;
}
.meta-right {
float: right;
margin: 0 10px 0 0;
}
.entry-image {
float: left;
}
.meta-info {
float: left;
margin-left: 10px;
}
.entry-like {
min-width: 32px;
line-height: 1;
}
.entry-views {
min-width: 32px;
line-height: 1;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Here's a version using display: flex that's even simpler. Same markup.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.meta-left {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.meta-info {
margin-left: 10px;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Esteros. Please check this link
https://codepen.io/juricon/pen/QWLOZea
HTML:
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<ul class="left-float-list">
<ol>
<a href="" title="" rel="author">
Ester
</a>
</ol>
<ol>
September 3, 2019
</ol>
<ol>
<a href="">
Music
</a>
</ol>
</ul>
<ul class="right-float-list">
<li class="items-reverse">
<span class="entry-views">
<!--do not miss nesting rules <tag><tag1></tag1</tag> -->
998
</span>
<span class="view-count">
Views
</span>
</li>
<li>
<span class="entry-like">
<span class="sl-wrapper"> <!--do not miss nesting rules <tag><tag1></tag1</tag> Also, you don't have in CSS classes like .sl-wrapper .sl-button, .sl-count, sl-loader -->
<a href="" class="sl-button">
<span class="sl-count">
500<em>Likes</em>
</span>
<!-- it is a bad idea to use <em> with not cursive text in one <span>. Use CSS to style your text -->
</a>
<span class="sl-loader">
</span>
</span>
</span>
</li>
<li>
Whatever
</li>
</ul>
CSS:
*{ /*clear styles*/
margin:0;
padding:0;
/*clear styles*/
}
.entry-meta {
font-family: Arial, sans-serif;
display: block;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image{
float: left;
}
.left-float-list{
float: left;
width: 200px;
list-style:none;
background: green;
margin-left:.4em;
}
.right-float-list{
float: right;
list-style:none;
background: red;
margin-right:1em;
}
.entry-views, .entry-like {
min-width: 32px;
line-height: 1;
}
Esteros, here you will find a great web development free course https://www.freecodecamp.org/ and
https://www.w3schools.com/html/default.asp.
It will help you a lot. Good luck!
P.S.: Use Flexbox instead of "float" and you won't regret.
Vue chat application
I'm creating this chat app like a little project, but I can't make the messages align properly. The messages sent by the user (light blue) should be on the right side, the CSS looks like:
.received {
text-align: left;
background-color: #0A2472;
margin: 1%;
color: white;
padding: 1%;
max-width: fit-content;
}
.sent {
text-align: right;
align-content: right;
background-color: #A6E1FA;
margin: 1%;
padding: 1%;
max-width: fit-content;
}
It looks fine, until "max-width: fit-content" is added to the style.
Any solutions or other approaches?
The main problem is that your messages are only as wide as their text, so the alignment doesn't matter.
I made a container to hold them. I like CSS Grid for laying out almost everything. The chat messages are just rows in the grid, some justified left and some right.
.chatboard {
display: grid;
width: 100%;
grid-gap: 0.6rem;
max-width: 40rem;
}
.sent,
.received {
padding: 1%;
min-width: 20rem;
border-radius: 0.6rem;
}
.received {
justify-self: left;
background-color: #0A2472;
color: white;
}
.sent {
text-align: right;
justify-self: right;
align-content: right;
background-color: #A6E1FA;
}
<div class="chatboard">
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
</div>
I have an example of how you can achieve this. I will paste the code below. Look in the css for the specific style you want. It looks like the style rules would be the style modifying the <p> tag in the example the specific css rules modifying it are
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
here is the html
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"
</head>
<body>
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
<div class="srch_bar">
<div class="stylish-input-group">
<input type="text" class="search-bar" placeholder="Search" >
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span> </div>
</div>
</div>
<div class="inbox_chat">
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mesgs">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test, which is a new approach to have</p>
<span class="time_date"> 11:01 AM | Yesterday</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Apollo University, Delhi, India Test</p>
<span class="time_date"> 11:01 AM | Today</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>We work directly with our designers and suppliers,
and sell direct to you, which means quality, exclusive
products, at a price anyone can afford.</p>
<span class="time_date"> 11:01 AM | Today</span></div>
</div>
</div>
</div>
<div class="type_msg">
<div class="input_msg_write">
<input type="text" class="write_msg" placeholder="Type a message" />
<button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<p class="text-center top_spac"> Design by <a target="_blank" href="#">Sunil Rajput</a></p>
here is the css
.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
background: #f8f8f8 none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}
.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
float: left;
width: 11%;
}
.chat_ib {
float: left;
padding: 0 0 0 15px;
width: 88%;
}
.chat_people{ overflow:hidden; clear:both;}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}
.active_chat{ background:#ebebeb;}
.incoming_msg_img {
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 60%;
}
.sent_msg p {
background: #05728f none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#fff;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
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.
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