Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically).
text-overflow: ellipsis; only works for 1 line text.
original text:
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit
wanted output (2 lines):
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum...
There's a way to do it using unofficial line-clamp syntax, and starting with Firefox 68 it works in all major browsers.
body {
margin: 20px;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
Unless you care about IE users, there is no need to do line-height and max-height fallbacks.
What you can do is the following:
.max-lines {
display: block;/* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em;
}
<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>
where max-height: = line-height: × <number-of-lines> in em.
Working Cross-browser Solution
This problem has been plaguing us all for years.
To help in all cases, I have laid out the CSS only approach, and a jQuery approach in case the css caveats are a problem.
Here's a CSS only solution I came up with that works in all circumstances, with a few minor caveats.
The basics are simple, it hides the overflow of the span, and sets the max height based on the line height as suggested by Eugene Xa.
Then there is a pseudo class after the containing div that places the ellipsis nicely.
Caveats
This solution will always place the ellipsis, regardless if there is need for it.
If the last line ends with an ending sentence, you will end up with four dots....
You will need to be happy with justified text alignment.
The ellipsis will be to the right of the text, which can look sloppy.
Code + Snippet
jsfiddle
.text {
position: relative;
font-size: 14px;
color: black;
width: 250px; /* Could be anything you like. */
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
line-height: 1.2em;
text-align:justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 4px;
}
/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
<span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.
Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
</span>
</div>
jQuery Approach
In my opinion this is the best solution, but not everyone can use JS.
Basically, the jQuery will check any .text element, and if there are more chars than the preset max var, it will cut the rest off and add an ellipsis.
There are no caveats to this approach, however this code example is meant only to demonstrate the basic idea - I wouldn't use this in production without improving on it for a two reasons:
1) It will rewrite the inner html of .text elems. whether needed or not.
2) It does no test to check that the inner html has no nested elems - so you are relying a lot on the author to use the .text correctly.
Edited
Thanks for the catch #markzzz
Code & Snippet
jsfiddle
setTimeout(function()
{
var max = 200;
var tot, str;
$('.text').each(function() {
str = String($(this).html());
tot = str.length;
str = (tot <= max)
? str
: str.substring(0,(max + 1))+"...";
$(this).html(str);
});
},500); // Delayed for example only.
.text {
position: relative;
font-size: 14px;
color: black;
font-family: sans-serif;
width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>
<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
<!-- Working Cross-browser Solution
This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->
As far as I can see, this would be possible only using height: (some em value); overflow: hidden and even then it wouldn't have the fancy ... at the end.
If that is not an option, I think it's impossible without some server side pre-processing (difficult because text flow is impossible to predict reliably) or jQuery (possible but probably complicated).
The following CSS class restricts text to two lines, and inserts an ellipsis to indicate overflowing text.
.two-line-ellipsis {
overflow: hidden;
width: 325px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
The solution from this thread is to use the jquery plugin dotdotdot. Not a CSS solution, but it gives you a lot of options for "read more" links, dynamic resizing etc.
This works for me:
div {
width: 200px;
}
p {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
height: 2.6em; /* Fallback for non-webkit, line-height * 2 */
line-height: 1.3em;
-webkit-line-clamp: 2; /* if you change this, make sure to change the fallback line-height and height */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
<div>
For the react guys using inline styles:
<p
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
lineClamp: 2,
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
>Some Text</p>
.class{
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
Currently you can't, but in future you will be able to use text-overflow:ellipis-lastline. Currently it's available with vendor prefix in
Opera 10.60+: example
I have a solution which works well but instead an ellipsis it uses a gradient. It works when you have dynamic text so you don't know if it will be long enough to need an ellipse. The advantages are that you don't have to do any JavaScript calculations and it works for variable width containers including table cells and is cross-browser. It uses a couple of extra divs, but it's very easy to implement.
Markup:
<td>
<div class="fade-container" title="content goes here">
content goes here
<div class="fade">
</div>
</td>
CSS:
.fade-container { /*two lines*/
overflow: hidden;
position: relative;
line-height: 18px;
/* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
height: 36px;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
.fade {
position: absolute;
top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
right: 0;
bottom: 0;
width: 26px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
blog post: http://salzerdesign.com/blog/?p=453
example page: http://salzerdesign.com/test/fade.html
As of (almost) 2023, some older css rules are no longer needed.
These show the minimum required, and work cross browser despite the prefixed syntax:
.line-clamp { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
I really like line-clamp, but no support for firefox yet.. so i go with a math calc and just hide the overflow
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
now lets say you want to remove and add this class via jQuery with a link, you will need to have an extra pixel so the max-height it will be 63 px, this is because you need to check every time if the height greather than 62px, but in the case of 4 lines you will get a false true, so an extra pixel will fix this and it will no create any extra problems
i will paste a coffeescript for this just to be an example, uses a couple of links that are hidden by default, with classes read-more and read-less, it will remove the ones that the overflow is not need it and remove the body-overflow classes
jQuery ->
$('.read-more').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$('.read-more').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-less').show()
$('.read-less').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-more').show()
If you want to focus on each letter you can do like that, I refer to this question
function truncate(source, size) {
return source.length > size ? source.slice(0, size - 1) + "…" : source;
}
var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);
If you want to focus on each word you can do like that + space
const truncate = (title, limit = 14) => { // 14 IS DEFAULT ARGUMENT
const newTitle = [];
if (title.length > limit) {
title.split(' ').reduce((acc, cur) => {
if (acc + cur.length <= limit) {
newTitle.push(cur);
}
return acc + cur.length;
}, 0);
return newTitle.join(' ') + '...'
}
return title;
}
var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);
If you want to focus on each word you can do like that + without space
const truncate = (title, limit = 14) => { // 14 IS DEFAULT ARGUMENT
const newTitle = [];
if (title.length > limit) {
Array.prototype.slice.call(title).reduce((acc, cur) => {
if (acc + cur.length <= limit) {
newTitle.push(cur);
}
return acc + cur.length;
}, 0);
return newTitle.join('') + '...'
}
return title;
}
var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);
.word-limit{
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
overflow: hidden;
}
Basic Example Code, learning to code is easy. Check Style CSS comments.
table tr {
display: flex;
}
table tr td {
/* start */
display: inline-block; /* <- Prevent <tr> in a display css */
text-overflow: ellipsis;
white-space: nowrap;
/* end */
padding: 10px;
width: 150px; /* Space size limit */
border: 1px solid black;
overflow: hidden;
}
<table>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
</td>
<td>
Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
</td>
<td>
Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
Ut dictum massa mi, sit amet interdum mi bibendum nec.
</td>
</tr>
<tr>
<td>
Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
nibh dui et erat.
</td>
<td>
Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
aliquet.
</td>
<td>
Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
</td>
</tr>
</tbody>
</table>
I've been looking around for this, but then I realize, damn my website uses php!!!
Why not use the trim function on the text input and play with the max length....
Here is a possible solution too for those using php:
http://ideone.com/PsTaI
<?php
$s = "In the beginning there was a tree.";
$max_length = 10;
if (strlen($s) > $max_length)
{
$offset = ($max_length - 3) - strlen($s);
$s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}
echo $s;
?>
I am aligning three images of equal size within a three-column layout.
This should lead to three images in a row.
It works as expected in IE11, Edge, FF, but Chrome does not what it should: It shows image 1+2 in the first column, image 3 is in the second column.
What is Chrome doing here? If I give the containing div a fixed height of e.g. 120px the three images are aligned as expected, side by side.
Snippet:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
imgs are inline elements by default, so you can give img {display: block;} and it will solve the issue:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
That is very interesting, and I can't explain why it behaves that way (other than welcome to cross browser development), but as a quick fix I can tell you if you add the CSS img {display: block} it will work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<br>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
</body>
</html>
I'm in the process of developing a blog and am trying to achieve a hover effect that slides up to reveal the full post preview on hover. The attached image is probably better at conveying the desired effect. Basically, only the title of the post is shown, then on hover the title slides up, also revealing the rest of the preview.
The only way I've been able to come close so far is by using two seperate div's, one with just the title and the other with the full preview (title included). Then fade the title div out while sliding the other up. It looked okay but it's just not as smooth as I'd like it to be. I would much prefer everything to slide up.
If any CSS wizards can help me, I'd appreciate it. Also, CSS-only would be great, JS as a last resort.
Thanks,
Oli.
Here's a quick / dirty solution:
HTML:
<div class="container">
<div class="post">
<div class="title">Bla bla bla</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>
</div>
CSS:
.container {
background-color: #00f;
width: 300px;
height: 300px;
position: relative;
}
.post {
cursor: pointer;
background-color: #fff;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.body {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
height: 0;
opacity: 0;
overflow: hidden;
}
.post:hover .body {
height: 200px;
opacity: 1;
}
DEMO: https://jsfiddle.net/y7rb77sk/
Of course you can add transitions to animate it and make it cooler
Here is a solution: http://jsfiddle.net/leojavier/gbuLykdj/4/
Incase of overflow, this solution will give you a scroll: http://jsfiddle.net/leojavier/gbuLykdj/5/
<div class="container">
<img src="http://placecorgi.com/300/400" alt="">
<article>
<h1>My Title</h1>
<p>san leo vestibulum non. Donec porttitor semper malesuada. Morbi vel felis venenatis, tempus mi in, ornare purus. Morbi hendrerit orci ipsum, a fringilla ante tristique in. Fusce sollicitudin venenatis neque eget ornare. Integer semper, ante ut vestibulum finibus, ipsum ex aliquam quam, qui</p>
</article>
</div>
CSS
.container{
position:relative;
width:300px;
height:400px;
}
article{
position:absolute;
width:100%;
max-width:280px;
height:auto;
background:rgba(255,255,255,0.8);
bottom:0;
padding:10px;
font-family:arial;
opacity:0;
transition: opacity 1s;
}
.container:hover > article {
opacity:1;
}
I have serious troubles with my css layout.
This is my workingbase: http://jsfiddle.net/UeVm8/1/
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0 auto;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
The site should always be 100% height at minimum with small distances to top and bottom.
There shouldn't be scrollbars, except the content is too big. Then it should fit to the content and the distances to top and bottom should stay.
But when you resize the window, the padding at the bottom disappears!?!
I already tried different settings and found a solution for Firefox: http://jsfiddle.net/UeVm8/7/
But this solution does not work in Chrome and IE.
I am totally annoyed by this nasty inconsistence in the CSS implementations.
Does anybody know how to solve this issue for all (modern) browsers?
Thanks.
PS: It's an stylesheet only for desktops.
I finally found the answer! :)
As mentioned I already found a solution for Firefox, but it was not working on Chrome.
After some fiddling I also had a solution for Chrome, which wasn't working on Firefox.
I think the issue is that there seems to be a bug in Google Chrome.
But I could combine both solutions by just overwriting settings just for chrome with some special selector.
The CSS solution: http://jsfiddle.net/UeVm8/8/
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0px auto 20px;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#container{
margin: 0px auto 0px;
}
html, body{
overflow:auto;
}
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
color:grey;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
I tested it on Firefox, Chrome, IE, Opera and Maxton and it worked.
Nevertheless CSS is a crazy chick.
I know this question has probably been asked before and I have tried several different ways of doing this, but I can not seem to get my inner DIV to expand to the full height of the viewport.
Here is my CSS:
html, body {margin: 0 auto; padding: 0; height: auto !important; min-height: 100%; height: 100%;}
p, h1 {font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;text-align:left;margin:1em 0}
/*******************************************************************************
Primary Container Structure
********************************************************************************/
#container {width: 100%; margin: 0px 0px; background-color: #fff; color: #333;}
#top {padding: .5em; background-color: #3b5998; color:White;}
#top h1 {padding: 0; margin: 0;}
#subcontainer {width: 90%; margin: 0px auto; line-height: 130%;}
#rightnav {height:100%; float: right; width: 244px; margin: 0; padding: 1em; max-width:244px;}
#content {height:100%; border-left: 1px solid gray; margin-right: 284px; border-right: 1px solid gray; padding: 1em;}
#leftnav p, #rightnav p {margin: 0 0 1em 0;}
#content h2 {margin: 0 0 .5em 0;}
#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
Here is my HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="SHELL.aspx.cs" Inherits="SHELL" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="top">
<h1>NAME</h1>
</div>
<div id="subcontainer">
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</form>
</body>
</html>
You cannot have a middle container first calculate a footer height, then subtract it from it's 100% height parent container.
You're only options with your current markup are:
Use javascript (unncessary overhead)
Use tables (probably not a good idea)
Here is an option that I had to rearrange your code: Code Here
I made your height and footer work, but it will require you to use faux columns, a common technique for bottom sticking footers. See this for an example.
Simply, assign a left border image to repeat-y on the body, and a right border image to repeat-y, background right, on the subcontainer.