I use a flexbox that consists of a left and right part, both of equal width. The first displays an image and the right some text. The code wraps well in Google Chrome but for Internet Explorer 11, it does not wrap the right part until its width gets very low.
Here's a video illustration of the problem:
https://gyazo.com/b713844e85a2aafeb8054b5d2cdeabe1
How could I fix this? Thanks
.d1 {
display: flex;
flex-wrap: wrap;
padding: 4%;
}
.image-container {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
min-width: 200px;
}
.image-container img {
width: 100%;
height: auto;
}
.d1 .text {
background-color: lightblue;
flex: 1;
font-size: 40px;
padding: 2%;
}
<div class="d1">
<div class="image-container">
<img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
</div>
<div class="text">
Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I think it would help to add a min-width to the .text element.
Try this:
.d1 {
display: flex;
flex-wrap: wrap;
padding: 4%;
}
.image-container {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
min-width: 200px;
}
.image-container img {
width: 100%;
height: auto;
}
.d1 .text {
background-color: lightblue;
flex: 1;
font-size: 40px;
padding: 2%;
min-width: 50%; /* NEW */
}
<div class="d1">
<div class="image-container">
<img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
</div>
<div class="text">
Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Also, as I think I've suggested to you before, avoid using the flex property in IE11. It's too buggy.
flex property not working in IE
Related
I want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
I have a web-page, which has a body that expands over time (by user clicks and such), that I want to be centered (vertically).
I also want it to be scroll-able when the content exceeds the page's height (when it overflows), but then it has to be aligned to the top of the page.
I want it to behave like this, and I want to achieve it with flexbox:
Any ideas?
If possible define new tags with class attributes "container" and "box"
window -> .container
body -> .box
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
align-items: center;
height: 100vh;
overflow: scroll;
}
.box {
background-color: yellow;
}
<div class="container">
<div class="box">
this is box
</div>
</div>
here is one for the flex box
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.container {
position: relative;
background: darkcyan;
width: 60%;
padding: 5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.content {
background: cyan;
width: 80%;
overflow-y: scroll;
max-height: 400px;
text-align: center;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I'm fairly new to CSS Flexbox but I'm trying to create a horizontal card, where an image is on the left, and text/buttons are on the right. When the site is scaled down (for mobile use), the row items should wrap and the image should sit on top of the text. I've tried setting the wrap property to wrap but it wraps for large screens when it should only wrap for smaller screens. See code below:
* {
margin: 0;
padding: 0;
}
#box {
padding: 20px;
}
img {
width: 200px;
}
#outer-container {
display: flex;
flex-wrap: wrap;
border: solid 1px;
width: 70%;
margin: auto;
}
#inner-container {
border: solid 1px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
<div id="outer-container">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
<div id="inner-container">
<div>
<h3>Heading</h3>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
Other stuff
</div>
</div>
</div>
Should I attempt to use another approach (like Bootstrap's card layouts) or is there something obvious I'm missing?
Set a flex-basis to the text container to control when the wrap should happen.
Open the below on full screen and resize to see:
* {
margin: 0;
padding: 0;
}
#box {
padding: 20px;
}
img {
width: 200px;
}
#outer-container {
display: flex;
flex-wrap: wrap;
border: solid 1px;
width: 70%;
margin: auto;
}
#inner-container {
border: solid 1px;
display: flex;
justify-content: space-between;
flex-direction: column;
flex-basis:500px;
flex-grow:1;
}
<div id="outer-container">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
<div id="inner-container">
<div>
<h3>Heading</h3>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
Other stuff
</div>
</div>
</div>
The image is on the left.
The text is on the right.
As soon as the first line of text reaches the right side of the container, the entire item will wrap.
It's tempting to think that once the first line reaches the right-side limit, just the text will wrap.
That's not how it works.
That touch will trigger the entire item to wrap.
Try it out: jsFiddle demo
#outer-container {
display: flex;
flex-wrap: wrap;
border: solid 1px;
}
#inner-container {
border: solid 1px;
display: flex;
min-width: 0;
}
<div id="outer-container">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" width=50 height=50 alt="cat">
<div id="inner-container">
<p>Re-size the screen. Once this text touches the right side, the item will wrap.</p>
</div>
</div>
Use a media query to control the wrapping behavior.
Assuming I understood your question correctly, I believe I've come up with something that resembles a solution.
I altered your code ever so slighty, and worked with the flex-direction attritube. Basically what I've done is, when you're on desktop version, your card used the attribute flex-direction: row to have your items inside of your div be aligned like you described.
When you swicth to mobile version, the only thing I've done is add a media query that tells the div to use the flex-direction: column, in order to have the items inside you div be aligned like you described.
In this solution, you avoid switching to Bootstrap, by utilizing flexbox and the use of media queries like #DevLover mentioned.
* {
margin: 0;
padding: 0;
}
#box {
padding: 20px;
}
img {
width: 200px;
}
#outer-container {
display: flex;
border: solid 1px;
width: 70%;
flex-direction: row;
}
#inner-container {
border: solid 1px;
}
#media only screen and (max-width: 768px) {
#outer-container {
flex-direction: column;
}
}
<div id="outer-container">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
<div id="inner-container">
<h3>Heading</h3>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div>
Other stuff
</div>
</div>
</div>
I hope this solves your issue!
HTML:
<div id="outer-container">
<div class="content-wrapper">
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
<div id="inner-container">
<div>
<h3>Heading</h3>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
Other stuff
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
#box {
padding: 20px;
}
img {
width: 100%;
object-fit: cover;
}
#outer-container {
display: flex;
flex-wrap: wrap;
border: solid 1px;
width: 70%;
margin: auto;
}
#inner-container {
border: solid 1px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.content-wrapper {
display: flex;
flex-direction: column;
}
#media only screen and (min-width: 767px) {
.content-wrapper {
flex-direction: row;
}
img {
width: 200px;
}
}
A variation of this question has been asked many times, but I cannot seem to find any solution for this particular problem. I have a <div> container element with content that has a variable height depending on the elements inside of it. I want a section of the container to always appear at the bottom of the container div, even when the user scrolls the content, they should always see the section at the bottom of the container. I would prefer not to use position: fixed because that is relative to the browser size, not the div, and when I use position: absolute I can suffessfully get it on the bottom of my container div, but once I start scrolling, it does not act like a "fixed" element, and scrolls with the content.
Is this possible to achieve this with pure CSS?
Here is my current code:
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
Thanks!
The easiest way to accomplish this is to keep the "fixed" element outside the scrolling element, and use positioning based on the container to overlay the fixed element atop the scrolling one.
The only changes here were to move .bottom-section outside of .content, and setting position:relative on .container:
html,
body,
.container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.container {
position: relative
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
}
.content>p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
<div class="footer">FOOTER</div>
This might help, change those two classes as in snippet bellow, comment overflow: hidden in html, body, .container.
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
/* overflow: hidden;*/
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 33px;
height: 50px;
padding-top: 1em;
position: fixed;
z-index: 1;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
bottom: 0;
position: fixed;
width: 100%;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
I have this code:
html:
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
fiddle:
http://jsfiddle.net/v8Lhxk2v/
and I get this layout
but I need to get something like next image, without using js.
Can that be solved?
Depending on browser support you can use flex.
The container would need:
display: flex;
flex-flow: column;
Here's a quick demo with example markup:
http://jsbin.com/xuwina/3/edit?html,css,output
Look at this
http://jsfiddle.net/v8Lhxk2v/4/
playing with border-bottom and overflow:hidden on the parent element.
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
border-bottom: 22px solid #cecece;
overflow: hidden;
}
.tile h3{
min-height: 25px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
margin: 0 10px;
}
I would say try to position the content absolute to the bottom of the tile.
In that case you can set the space where the content should end. Still you need to add an extra class to your content with the smaller title to be it larger than the other tile with the larger title.
Your HTML would be:
<div class="tile">
<h3>short</h3>
<!-- Added an extra class to the div -->
<div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Within your CSS I changed this:
.tile .content{
height: 162px;
background-color:grey;
overflow: hidden;
margin: 0 10px;
position: absolute;
bottom:30px;
}
.tile .small{height:216px;}
And then you get this result: JSFIDDLE
Let me know if this is a solution that works for you.
Solving this problem is pretty simple with flexbox.
By creating a column flex container the flex items stack vertically. You can then apply flex: 1 to the text box (.content) which makes it expand the full available height of the container.
HTML
<div id="container"><!-- container to align .tile boxes in flexbox row;
(this flexbox is optional) -->
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
</div><!-- end #container -->
CSS
#container {
display: flex; /* establish flex container;
aligns flex items (child elements) in a row by default; */
}
.tile {
display: flex; /* establish (nested) flex container */
flex-direction: column; /* override default row alignment */
height: 300px;
width: 200px;
background: #cecece;
/* float: left; */
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
max-height: 61px;
/* display: inline-block; */
overflow: hidden;
}
.tile .content {
flex: 1; /* tells flex item to use all available vertical space in container */
height: 162px;
overflow: hidden;
margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Using Ellipsis (...)
If you want to apply ellipsis to a single line of text, CSS makes that somewhat easy with the text-overflow property. It's still a bit tricky (due to all the requirements), but text-overflow makes it possible and reliable.
If, however, you want to use ellipsis on multi-line text – as would be the case here – then don't expect to have any fun. CSS doesn't provide a single property for doing this, and the workarounds are hit and miss. For details and methods see my answer here: Applying Ellipsis to Multiline Text
Well, pretty easy... make <div class="move"></div> and put your h3 into it like:<div class="move"><h3>Short</h3></div> now style that move div like so:
.move{height:100px;}
it workd, you are done :)
PS: make it with both of your h3s :)
well, there is a code:
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
.move{height:100px;}
html:
<div class="tile">
<div class="move">
<h3>short</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<div class="move">
<h3>longLongLong longLongLong longLongLong</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
I would try another aproach. Using jquery you can calculate on window load the height of the highest h3 and then, apply that height to all your h3 inside your tiles.
I know you asked for a pure css solution, so it's ok if I don't get any credit, but I think this answer may be usefull for other users with the same problem so that's why I wrote it.
Something like this:
var maxHeight = -1;
$('.tile h3').each(function() {
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
});
$('.tile h3').each(function() {
$(this).height(maxHeight);
});
As you can see in this JSFIDDLE (notice I removed the fixed max-heightyou added to the header and add a third tilewith a "very long text" so you can check the exmaple better.
Try this use extra div with wrap. h3 & div.content tag are wrapped by extra div and some css to be change as following:
.tile > div {
height: calc(100% - 20px);
margin: 10px;
overflow: hidden;
line-height: 22px!important;
}
.tile {
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
display: inline-block;
overflow: hidden;
margin: 5px 0;
}
.tile .content {
margin: 0;
}
<div class="tile">
<div>
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div class="tile">
<div>
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
How about a fixed height:
.tile h3 {
height: 65px;
display: inline-block;
overflow: hidden;
}
Or accompanied by js (jQuery):
// Height handler
var headHeight = 0;
// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {
// Get current height
var currentHeight = jQuery( this ).height();
// If higher as handler set as handler
if( currentHeight > headHeight ) {
headHeight = currentHeight;
}
} );
// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );
This would be a pretty robust solution ...
you can resolve by the flexbox Flexible Box Layout Module:
.tile{
...
/* add the following line */
display: flex;
flex-direction: column;
justify-content: space-between;
...
}
http://jsfiddle.net/57yLgxsx/
This example works on Chrome you can check for the browser compability on caniuse.com
and then add the correct prefixes.
It depends on who you want to ensure compatibility ( last 2 vorsion of all browser, mobile or desktop or both ).
keep in mind that there are two versions of flexbox, the "old" and the "new". What I wrote above is the new.
This link can clarify some ideas
https://css-tricks.com/snippets/css/a-guide-to-flexbox/