I am trying to use CSS column-count property. My current HTML structure consist of a parent 'div' with inner 'p' tag and I applied column-count: 3 to the div and it works fine. But for certain break points column count showing is 2 instead of 3. Can any one explain why count changes for certain break points and how content is divided in each column?
HTML
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
voluptatum nemo illum, numquam aperiam minus sit cumque
perspiciatis dicta, molestiae inventore reiciendis aut, officiis
nobis deserunt provident commodi sunt aliquam!</p>
</div>
CSS
.wrapper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Column layout exhibits the following default behavior (on Chrome 67):
Regardless of the column-count setting, columns won't be wrapped unless they have at least 2 lines, except if ...
... typesetting this way would result in at max half of the columns being used.
You can control the way columns get filled by specifying the CSS properties orphans and widows which specify the minimum number of lines a block container must show at the top or the bottom of a column, respectively.
A value of 1 allows for height balancing in columns even for text that would only span a single line.
Setting the value to an integer n means that all used columns but the last one must contain at least n lines of text. The default value is 2 for both properties.
Successively increasing the integer values leads to successively fewer layout columns used for any given text.
Demo
I've tried to set up a reproducible test setting container dimensions and font-sizes. As is it covers 6 columns. Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
<!DOCTYPE html>
<html>
<head>
<title>CSS column count demo</title>
<style type="text/css">
.wrapper {
border: solid 1px black;
font-family: Times New Roman;
font-size: 12pt;
width: 800px;
height: 400px;
}
.wrapper p {
column-count: 6;
orphans: 1;
widows: 1;
}
</style>
</head>
<body>
<!--
The following text covers 6 columns.
Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
-->
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
voluptatum nemo illum, numq</p>
</div>
</body>
</html>
Increase your data it will show in 3 columns. If data is not there how it can be split in 3 columns. You have to put enough data so that data under P tag will split in 3 columns.
I think I have a wrong understanding of how specificity and !important works .
Consider the below HTML :
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class = "outer">
<div class = "inner1">
<div class = "inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam
quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia,
et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do
commodo..</p>
</div>
</div>
</div>
STYLE.CSS
.outer .inner1 {
color:green !important;
}
STYLE1.CSS
.outer .inner1 .inner2 {
color:red ;
}
My understanding was the rule in style.css will never be overwritten (as it has an important tag) even though the rule in syle1.css has more specificity .
I was thinking rules are applied as they are encountered in the HTML file ( style.css first and then style1.css) , and a value for a particular property of an element will be overwritten only if the rule is more specific ( important tag prevents this overriding no matter how specific the subsequent rule is ) . This apparently is not how it works . Could someone tell me how does !important and specificity work and when do you use !important ?
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
-- Specificity: Directly targeted elements vs. inherited styles
Note: the addition of the new contrived ruleset in Demo:
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
It has an incredibly ridiculously unnecessarily huge specificity score of 0,0,7,4 and !important as well. CSS reads from right to left:
Find an <aside> tag with the class of .inner3
It must have a parent <div> that has the class of .inner2.
Also that <div class="inner2">must have a parent <div> with a class of .inner1.
And it's imperative that <div class="inner1"> have a parent <div> with the class of .outer.
All of these specific rules of the selector must be met just so a deeply nested <aside> tag gets its style. Any descendant elements of .inner3 will inherit color: blue property and value, but it is easily overridden by the likes of i.inner2 with color:red.
<div class="inner3">
<p>This deeply nested text has <i class='inner2'>crazy specificity but this text is red.</i>
...
</p>
</div>
Note: the new ruleset at the bottom of CSS box:
div {
color: black !important
}
Now this selector is specific to all divs so here is how !important has just been assigned a selector with a far reaching scope. This is probably more like the behavior you were expecting.
BTW, you probably noticed the duplicate classes:
.outer.outer.outer
That is called selector chaining which will increase a selector's specificity score. See Online Specificity Calculator.
Demo
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
.outer .inner1 {
color: green !important;
}
.outer .inner1 .inner2 {
color: red;
}
div {
color:black !important;
}
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class="outer">
<div class="inner1">
This text will be green...
<div class="inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do commodo..
</p>
<aside class='inner3'>
<p>This deeply nested text has <i class='inner1'>crazy specificity</i>, yet it only applies to it and its descendants with no specific <b class='inner2'>`color` property</b>.</p>
</aside>
</div>
...and this text will be green as well.
</div>
</div>
I have the following code :
<h3 class="hideIfDivEmpty">title</h3>
<div id="divId"></div>
I would like to hide the h3 element when the div is empty.
I'm willing to change the html structure but the h3 has to be outside of the div because its content is dynamically changed.
Is there a way to do that in CSS ?
There is no syntax to select a parent element or any other non-child element from #divid. You can select #divid if it's empty, by #divid:empty, but there is no way you can select .hideIfDivIsEmpty in any browser by selecting that. According to this question there is such a thing in CSS4 (specs), but it is not supported in any browser as of now and according to the same specs, the selector is too slow to be implemented in browsers.
See the other answers for the javascript solution to this problem.
well wait you are going to get some very good answers here. but my solution would be make a css class then assign it to both the h3 and div tags then using jquery selectors get both of them using the css class. Now you will get an arry of tags if the the element at index 1's innertext = null or empty then the element at index 0 should hide. i hope this will help
I don't think that you can do it with CSS.
Use jQuery instead:
var divs = $(".hideIfDivEmpty");
divs.each(function () {
var div = $(this);
if (div.next().html() === "") {
div.hide();
}
});
JSFIDDLE
And like #Prinzhorn correctly said: there is a liner solution:
$('h3.hideIfDivEmpty + div:empty').prev().hide();
JSFIDDLE
Add your label using the ::before css selector.
Hide your label for empty/null values using the :empty selector
(Both require IE9+)
HTML
<div class="label l_colour"></div>
<div class="label l_size"></div>
<div class="label l_shape"></div>
CSS
/* HIDE IF EMPTY*/
.label:empty { display: none; }
/* LABEL STYLES */
.label::before { font-weight:bold; }
/* LABEL VALUES */
.l_colour::before { content:"Colour: "; }
.l_size::before { content: "Size: "; }
.l_shape::before { content: "Shape: "; }
This problem can only be solved client-side with JavaScript (or one of its libraries). With plain JavaScript, I'd suggest:
function hideIfNextEmpty(el) {
var text = 'textContent' in document ? 'textContent' : 'innerText';
if (el.nextElementSibling[text].replace(/\s/g,'').length === 0) {
el.style.display = 'none';
}
}
hideIfNextEmpty(document.querySelector('h3.hideIfDivEmpty'));
JS Fiddle demo.
A CSS-only version would not have very good browser support. It would involve putting the header tag after the content, followed by manipulating the positioning of the elements.
Here's a very hacked together CSS-only solution. IE 9+. You should do this using JavaScript instead as others have suggested.
http://jsfiddle.net/znLMe/
CSS
article p:empty + header {
display: none;
}
article p:empty {
margin: 0;
}
article p {
float:left;
}
article header {
position: absolute;
top: 0;
}
article header h1 {
margin: 0;
}
article > p:first-of-type:not(:empty) {
padding-top: 1em;
}
article {
position: relative;
}
/* include clearfix */
HTML
<article class="clearfix">
<p></p>
<header><h1>Hidden article</h1></header>
</article>
<article class="clearfix">
<p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
<header><h1>Porta Malesuada</h1></header>
</article>
How is the content of the <div> entered? Because a non-JS solution would simply involve entering classes (e.g. "is-hidden"). If you're manually entering content in the HTML, then you can add the classes yourself. If you're loading content dynamically through a template, then you should be able to write some simple logic that applies a class to the <h3> element based on the content to be entered into the <div>.
I'm willing to change the html structure...
The answer is YES with this structure flexibility. Have the DIV precede the H3 element and add the following CSS rule:
// testing purposes only | see css and new html structure
document.querySelector('button').addEventListener('click', function() {
var el = document.querySelector('#divId');
if(el.textContent.length > 0) {
el.textContent = "";
} else {
el.textContent = "Hello world!";
}
});
div#divId:empty + h3.hideIfDivEmpty {
display: none;
}
<div id="divId">Hello world!</div>
<h3 class="hideIfDivEmpty">title</h3>
<!-- Button adds and removes text within div -->
<button>Toggle Text</button>
I've seen this question and googled a bit, but nothing so far has worked. I figure it's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell's width and height using CSS?
I don't know what the width and/or height of the cell will be ahead of time, and setting the div's width and height to 100% does not work.
Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and position: relative does not apply to tds, so I need a wrapper div.
I had to set a fake height to the <tr> and height: inherit for <td>s
tr has height: 1px (it's ignored anyway)
Then set the td height: inherit
Then set the div to height: 100%
This worked for me in IE edge and Chrome:
<table style="width:200px;">
<tr style="height: 1px;">
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div>
Something big with multi lines and makes table bigger
</div>
</td>
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div style="background-color: red; height: 100%;">
full-height div
</div>
</td>
</tr>
</table>
div height=100% in table cell will work only when table has height attribute itself.
<table border="1" style="height:300px; width: 100px;">
<tr><td>cell1</td><td>cell2</td></tr>
<tr>
<td style="height: 100%">
<div style="height: 100%; width: 100%; background-color:pink;"></div>
</td>
<td>long text long text long text long text long text long text</td>
</tr>
</table>
UPD in FireFox you should also set height=100% value to the parent TD element
So, because everyone is posting their solution and none was good for me, here is mine (tested on Chrome & Firefox).
table { height: 1px; } /* Will be ignored, don't worry. */
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }
Fiddle: https://jsfiddle.net/nh6g5fzv/
--
Edit: one thing you might want to note, if you want to apply a padding to the div in the td, you must add box-sizing: border-box; because of height: 100%.
The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr><td>test</td><td>test</td></tr>
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
<img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>test</td>
</tr>
</table>
You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?
Edit
How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...
If your reason for wanting a 100% div inside a table cell was to be able to have a background color extend to the full height but still be able to have spacing between the cells, you could give the <td> itself the background color and use the CSS border-spacing property to create the margin between the cells.
If you truly need a 100% height div, however, then as others here have mentioned you need to either assign a fixed height to the <table> or use Javascript.
Since most of the solutions in this place are incorrect, the top answer is not even solving the issue and the chosen answer doesn't work.
To solve the issue in the shortest way possible, set table height to fit-content
the table-row height to 100% and you're done.
Works on Firefox, Chrome and Edge.
Example:
<table style="height:fit-content">
<tr style="height:100%">
<td>
<div style="height:100%"></div>
</td>
</tr>
</table>
if <table> <tr> <td> <div> all have height: 100%; set, then the div will fill the dynamic cell height in all browsers.
Since every other browser (including IE 7, 8 and 9) handles position:relative on a table cell correctly and only Firefox gets it wrong, your best bet is to use a JavaScript shim. You shouldn’t have to alter your DOM for one failed browser. People use shims all the time when IE gets something wrong and all the other browsers get it right.
Here is a snippet with all the code annotated. The JavaScript, HTML and CSS use responsive web design practices in my example, but you don’t have to if you don’t want. (Responsive means it adapts to your browser width.)
http://jsfiddle.net/mrbinky3000/MfWuV/33/
Here is the code itself, but it doesn’t make sense without the context, so visit the jsfiddle URL above. (The full snippet also has plenty of comments in both the CSS and the Javascript.)
$(function() {
// FireFox Shim
if ($.browser.mozilla) {
$('#test').wrapInner('<div class="ffpad"></div>');
function ffpad() {
var $ffpad = $('.ffpad'),
$parent = $('.ffpad').parent(),
w, h;
$ffpad.height(0);
if ($parent.css('display') == 'table-cell') {
h = $parent.outerHeight();
$ffpad.height(h);
}
}
$(window).on('resize', function() {
ffpad();
});
ffpad();
}
});
after several days searching I figured out a possible fix for this issue.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">
<tr>
<td>whatever</td>
<td>whatever</td>
<td>whatever</td>
</tr>
<tr style="height:100%;">
<td>whatever dynamic height<br /><br /><br />more content
</td>
<td>whatever</td>
<!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.
If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;
The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
-->
<td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">
<div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
Content inside DIV TAG
</div>
</td>
</tr>
</table>
</body>
</html>
Spanish language:
El truco es establecer la Tabla, el TR y el TD a height:100%. Esto lo hace compatible con FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.
English explanation: within the code commentaries
I propose a solution using the experimental Flexbox to simulate a table layout which will allow a cell's content element to fill up its parent cell vertically:
Demo
.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }
/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }
<div class='table'>
<aside><div class='fill'>Green should be 100% height</div></aside>
<aside></aside>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
</aside>
</div>
Because I do not have enough reputation to post a comment, I want to add a complete cross-browser solution that combined #Madeorsk and #Saadat's approaches with some slight modification! (Tested on Chrome, Firefox, Safari, IE, and Edge as of 2/10/2020)
table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div {
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100%);
width: 100%;
background: pink; // This will show that it works!
}
However, if you're like me, than you want to control vertical alignment as well, and in those cases, I like to use flexbox:
td > div {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
Ok nobody mentioned this so I figured I would post this trick:
.tablecell {
display:table-cell;
}
.tablecell div {
width:100%;
height:100%;
overflow:auto;
}
overflow:auto on that container div within the cell does the trick for me. Without it the div does not use the entire height.
This hack works for me : juste put a space in the div (then it takes all the height of the td)
<td>
<div>
<!-- some optional content filled by vuejs, angular or what you want -->
</div>
</td>
To make height:100% work for the inner div, you have to set a height for the parent td. For my particular case it worked using height:100%. This made the inner div height stretch, while the other elements of the table didn't allow the td to become too big. You can of course use other values than 100%
If you want to also make the table cell have a fixed height so that it does not get bigger based on content (to make the inner div scroll or hide overflow), that is when you have no choice but do some js tricks. The parent td will need to have the height specified in a non relative unit (not %). And you will most probably have no choice but to calculate that height using js. This would also need the table-layout:fixed style set for the table element
I encounter similar issues frequently and always just use table-layout: fixed; on the table element and height: 100%; on the inner div.
I ultimately found nothing that would work across all my browsers and all DocTypes / browser rendering modes, except for using jQuery. So here is what I came up with.
It even takes rowspan into account.
function InitDivHeights() {
var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
var rows = $('#MyTable tr');
var heights = [];
for (var i = 0; i < rows.length; i++)
heights[i] = $(rows[i]).height();
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var cells = $('td', row);
for (var j = 0; j < cells.length; j++) {
var cell = $(cells[j]);
var rowspan = cell.attr('rowspan') || 1;
var newHeight = 0;
for (var k = 0; (k < rowspan && i + k < heights.length); k++)
newHeight += heights[i + k];
$('div', cell).height(newHeight - spacing);
}
}
}
$(document).ready(InitDivHeights);
Tested in IE11 (Edge mode), FF42, Chrome44+. Not tested with nested tables.
you can do it like that:
<td>
<div style="width: 100%; position: relative; float: left;">inner div</div>
</td>
a bit late to the party but here's my solution:
<td style="padding: 0; position: relative;">
<div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
</div>
</td>
If the positioned element and its father element do not have width and height, then set
padding: 0;
in its father element,
This is probably not recommended.
I figured out a workaround which works if your div doesn't contain text and has an uniform background.
display: 'list-item'
gives the div the desired height and width, but with the big downside of having a list item bullet. Since the div has a homogeneous background-color I got rid of the bullet with those styles:
list-style-position: 'inside',
color: *background-color*,
If the table cell is the size that you want, just add this css class and assign it to your div:
.block {
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
width: 100%;
}
If you want the table cell to fill up the parent too, assign the class to the table cell too.
I'm not sure what you want to do but you might try this one:
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
The following should work. You have to set a height to the parent cell.
https://jsfiddle.net/nrvd3vgd/
<table style="width:200px; border: 1px solid #000;">
<tr>
<td style="height:100px;"></td>
</tr>
<tr>
<td style="height:200px;">
<div style="height:100%; background: #f00;"></div>
</td>
</tr>
</table>
Try this:
<td style="position:relative;">
<div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>
I think that the best solution would be to use JavaScript.
But I'm not sure that you need to do this to solve your problem of positioning elements in the <td> outside of the cell. For that you could do something like this:
<div style="position:relative">
<table>
<tr>
<td>
<div style="position:absolute;bottom:-100px">hello world</div>
</td>
</tr>
</table>
</div>
Not inline of course, but with classes and ids.
I does not watch here an old CSS-trick for <div> inside <td>. Hence I remind: simple set some minimal value for width, but what-you-need for min-width. For example:
<div style="width: 3px; min-width: 99%;">
The td's width, in that case, is up to you.
This is my Solution for extend 100% height and 100% width in a html <td>
if you delete the first line in your code you can fix it ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
because this doctype does not permit in some files to use the 100% percent inside of <td>, but if you delete this line, the body fails expanding the background to 100% height and 100% width, so I found this DOCTYPE that solves the problem
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
this DOCTYPE let you extends the background in your body as 100% height and 100% width, and let you take all the 100% height and 100% width into the <td>