I've floating DIV on left side and right side ellipse div,
On mouse hover/out on left side div it is collapse/expand, in this case ellipses are not working.
I'm using two line ellipses
It is behaving differently based on content and window size
$(function() {
$(".left-content").mouseover(function() {
$(".left").width("30%");
}).mouseout(function() {
$(".left").width("50%");
});
})
div.left {
float: left;
border: solid 2px blue;
text-align: justify;
margin: 5px;
width: 50%;
overflow: hidden;
}
div.right {
float: left;
margin: 5px;
}
div.ellipses-twoline {
border: solid 2px blue;
width: 178px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
box-sizing: border-box;
margin-bottom: 5px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div class="left">
<div class="left-content">
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>
</div>
<div class="right">
<div class="ellipses-twoline">Located in Palm Springs and Santa Barbara, California, H3K Design specializes in design consultation and project management for house and building</div>
<div class="ellipses-twoline">
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help
</div>
</div>
View on JSFiddle
Related
I got stuck. I have a wrapping div on my page with height set to some value. In this div, I have another div with set height (the yellow one). Under it, there is a blue div, which height automatically grows with the content. I want that div to have a scrollbar when the content exceeds all available height.
here is an example you can play with:
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
overflow: hidden; /* why is that not hiding the excess text? */
}
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
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>
</div>
https://jsfiddle.net/674w4a09/
add height: calc(100% - 50px); to .body and it will work
the overflow didn't working on div.body because the height wasn't fixed
and to make it fit the rest of the container you use calc to substruct the height of the header plus 10px of the margin-bottom
jsfiddle
From MDN:
In order for the overflow property to have an effect, the block
level container must either have a bounding height (height or
max-height) or have white-space set to nowrap.
However, when you switch from a block formatting context to a flex formatting context, the requirement above doesn't apply and you can keep things simple:
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
overflow: hidden; /* switch to 'auto' for scrollbar */
color: #fff;
background-color: #63A4FE;
}
<div class="container">
<div class="header">Hi there!</div>
<div class="body">
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>
</div>
add height: calc(100% - 50px) to .body
50px = 40px (of header height) + 10px (of header bottom margin)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
overflow: hidden;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
height: calc(100% - 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
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>
</div>
</body>
</html>
So I want to achieve this using css and html
So I wrote this code that sets the width of each box to 33.33%
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
div > div {
background-color: gray;
border: 1px solid;
float: left;
}
.dummy_text {
clear: right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="chiken">Chicken
<p>
<p class="dummy_text">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="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="beef">Beef
<p>
<p class="dummy_text">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="col-dsk-3 col-tbl-1 col-mbl-1">
<p id="sushi">Sushi
<p>
<p class="dummy_text">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>
And the result is this:
The thing is that I need spacing between paragraphs, so what I though was to add some margin-left to the boxes, the thing is that when I add 10px, the result is that one of the three boxes goes to a new line, but I need the three in the same line.
This is what I did to add the margin, I modify the div > div part like this:
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-left: 10px;
}
And then result:
Use % values for all your layout widths.
Use :last-child to set the margin of the right div to zero.
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-right: 2%
}
div > div:last-child {
margin-right: 0;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 32%;
}
}
Here's a codepen:http://codepen.io/prime8/pen/LRympm
Use calc for with
.col-dsk-3 {
float: left;
width: calc(33.33% - 20px);
margin-right: 10px;
}
.col-dsk-3:last-child {
margin-right: 0px;
}
But I suggest you use flexbox instead
When adding the margin-left: 10px to each paragraph you are making their widths larger than 33.33% which results in being greater than 100% pushing the last paragraph down.
Like all things in CSS, there is a couple of different ways you can solve this, but the easiest and most direct answer to your question is using the calc CSS function. The calc function calculates a numerical value in CSS using basic math operations.
Using the calc function you can then set the width of each paragraph to be:
width: calc(33.33% - 10px);
Which will result in a 100% fit.
There are a number of things you can do about this.
1 - Use calc to reduce the width of elements currently set to 33.33% by 10px, and use 10px margin:
.col-dsk-3 {
float: left;
width: calc(33.33% - 10px);
margin-right: 10px;
}
2 - Wrap the content of your columns in another element, and apply a padding to your columns:
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div class="column-content">
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit....</p>
</div>
</div>
.column-content {
background-color: gray;
}
.col-dsk-3 {
float: left;
width: 33.33%;
padding: 10px;
background: none;
}
3 - use flexbox instead of floats for your columns. Remove the floats and the width: 33.33%, and add:
.row {
display: flex;
flex-direction: row;
}
.col-dsk-3 {
margin: 10px;
}
You use percentages to define the width, but add absolute values to the margins. Your widths add up to (almost) 100%, yet you add more margins, resulting in more than 100%, therefore to a value that is bigger than the space that is available.
Adjust your margins to use percentages as well and make sure you end up with 100% or less.
Try this. To use additional div wrapper in HTML.
This way has a good compatibility.
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
/* NOTE: `.row > div > div` is better than `div > div > div` */
div > div > div { /* changed */
background-color: gray;
border: 1px solid;
float: left;
}
.row > div > div { /* changed */
margin: 0 10px;
}
.dummy_text {
clear:right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="chiken">Chicken<p>
<p class="dummy_text">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>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="beef">Beef<p>
<p class="dummy_text">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>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<div>
<p id="sushi">Sushi<p>
<p class="dummy_text">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>
</div>
I'm trying to do a full-width split background colour with a centered content area. However, the content does not line up and is always off when the screen is resized.
The max-width is 1200px of the centered content area, the parent divs are split 60%/40%. When you do the math it's 720px/480px and should match the above div.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.site-content {
clear: both;
max-width: 1200px;
margin: 0 auto;
padding: 32px 0;
position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
border: 1px solid #000;
}
.left_container,
.right_container {
padding-bottom: 100%;
margin-bottom: -100%;
/*Fixes float height*/
}
.left_container >div,
.right_container>div {
position: relative;
}
.left_container {
float: left;
width: 60%;
background-color: #ced7db;
}
.left_container > div {
float: right;
max-width: 720px;
}
.right_container {
background-color: #999;
float: right;
width: 40%;
}
.right_container > div {
max-width: 480px;
}
<header>
<div class="site-content">
<h1>Heading<h2>
</div>
</header>
<div id="introduction" >
<div class="left_container">
<div>
<h2>Left</h2>
<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>
<div class="right_container">
<div>
<h2>Right</h2>
<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>
</div>
The desired outcome of this would be to have the heading area and content area aligned on the left and right edge, while the backgrounds extend to the end of the browser. I have tried using the gradient background method, the percentage width is still thrown off.
I wasn't able to do exactly what I wanted So I settled for the parent background gradient method. Example here:
CSS: Set a background color which is 50% of the width of the window
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/
I've got this container with 2 elements inside: http://jsfiddle.net/scQa2/1/ (JSFiddle doesn't seem to center properly so it's best to copy and paste the code)
test.html
<div id="main">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg" id="image"/>
<div id="text">
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>
test.css
#main {
width: 410px;
margin: auto;
}
#image {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid blue;
}
#text {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid red;
}
What I am to do is have the contents align in the centre of the container, rather than have the container centred as since the two elements are both using max-width.
If I set the margin of the container to auto and set it to a specific width (say 410px, just enough for the 2 max-widths of 200px) , I get this:
But if the child elements shrink below the max-width they do not align as the container has not changed width:
Is there a way I can ensure that the two child elements are centred horizontally at all times, preferably without JavaScript and with just pure CSS/HTML?
Try this, hope its what you're after...
#main {
border: 1px solid red;
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
.image{
vertical-align: top;
border: 1px solid blue;
display: inline-block;
}
.image img {
max-width: 200px;
}
#text {
vertical-align: top;
max-width: 200px;
border: 1px solid red;
display: inline-block;
}
html
<div id="main">
<p class="image">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg"/>
</p>
<p id="text">
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.
</p>
</div>