How do I get divs within table cells to occupy the full height of the cell?
Setting div height=100% won't work unless the table cell has a fixed height on it, but I can't do this because the cells must have a liquid height depending on variable content.
I am trying to get all divs in each row to be the same full height of the row.
The code is below, see live example at
http://www.songtricks.com/CellDivBug.html
<!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>
<style type="text/css">
td
{
padding:0px;
vertical-align:top;
height:auto;
}
.box
{
margin:0px;
border:solid 2px red;
height:100%;
}
</style>
</head>
<body>
<table border="1" width="50%">
<tr>
<td width="50%">
<div class="box">
This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text.
</div>
</td><td width="50%">
<div class="box">
This box has a little text.
</div>
</td>
</tr>
</table>
</body>
</html>
After some more research and experimentation I came up with what may be the only solution using CSS. I'm too new to answer my own question, so I'm posting it here.
It basically consists of:
Put position:relative on table cells
Put position:absolute; top:0; left:0; right:0; bottom:0; on contained divs
Put content directly within cell, alongside div, not within it, to force cells to take height of content
See demo at
http://jsfiddle.net/ehLVM/
Could you use this? It makes all of the divs with this attached to it the same height.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source: http://www.cssnewbie.com/equal-height-columns-with-jquery/
Try this:
table { height: 100%; }
td
{
padding:0px;
vertical-align:top;
height:100%;
}
.box
{
margin:0px;
border:solid 2px red;
height:100%;
}
Working Sample (tested on FF4)
Did some Googling and found this thread in a forum. It seems to be impossible to do it via CSS. But this has a JavaScript solution. As suggested in my comment above, why not move the border CSS to the td?
Related
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
Why not wrap your content in a div, and set the properties to that?
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.
css
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/
HTML
<div id="wrapper">Test me!</div>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div .
This is what you are looking for.
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is:
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
Code Below:
ASPX
<!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>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
You can try two things...
1) changing the height of the wrapper, navigation, content and inner to something like 98%.
2) try adding a transparent 1px solid border to the wrapper and other elements. This often shifts the margin to margin relationship of elements.
Hope this helps
Consider the next code:
#container {
width:500px;
}
#inside {
padding:10px;
width:100%;
}
If I choose width:100%; will it be the same as stating "width 480:px" (that is, calculating the padding already) or will it be as "width:500px"
Thanks
Joel
It will be like width:500px and adding the padding it will push the insides of overflow the #container..
But if #inside is a block element, then just giving the padding will make it behave as if it were width:480px
Example at http://www.jsfiddle.net/uA9LV/
It will be the same width as the parent container provided it's a block level element. So #inside will be 500px wide with 10px of padding on every side.
I put this in a sample document and the container div only resized 3 sides (left, top, and bottom).. and the inside div pushed it's boundaries outside of the container by 20px to the right.
I tested in IE8, Firefox 3.6.10, and the latest Chrome. Using various doctypes had no effect.
The code I used was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
#container {
width:500px;
border: solid 1px blue;
}
#inside {
padding:10px;
width:100%;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="container">
<div id="inside">
Hello World!
</div>
</div>
</body>
</html>
Note: if you remove the Width declaration from the #inside div then you'll get exactly what you want. Which is an inner div that is 480px in width + 10px on each side for padding. See this link for more information on it: Solving the CSS Padding problem.
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now 10px wide left column) have the left grow back to 200px and have the right column shrink by that amount.
I can't figure out how to make the right column grown and shrink without knowing the exact width of the window.
I hope this makes sense, and I really hope someone can point me in the right direction.
Browser requirements are IE8, FF3.6, Safari, and Chrome, so in theory I can use some advanced CSS techniques. At least I don't have to support IE6.
If you float your left column (float: left;) with variably a width of either 10 or 200px, and simply add overflow: hidden; to the styles of the right column, the right column will expand and contract to fill the space, whatever the site of the left column is.
Something like this should do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css" media="screen">
html, body { height:100%;}
#container { overflow:hidden; height:100%; }
#sub-content { background:yellow; float:left; height:100%; width:200px; }
#main-content { background:red; height:100%;}
#container .shrink { width:10px; }
</style>
</head>
<body>
<div id="container">
<div id="sub-content">
Sub content
<a id="toggler" href="#">Toggle</a>
</div>
<div id="main-content">
Main content
</div>
</div>
</body>
<script type="text/javascript">
var link = document.getElementById('toggler');
link.onclick = function() {
var subContent = document.getElementById('sub-content');
if (subContent.className == 'shrink') {
subContent.className = '';
} else {
subContent.className = 'shrink';
}
return false;
}
</script>
</html>
it would help if you put your sample on http://jsbin.com/, but try the following:
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
and then make the right column width 100%.
Is this what your are looking for?: http://jsbin.com/uweqe3
Below is a simplified version of my problem. Considering the following piece of HTML:
<div id="div1" style="display:none">
text i do not want
<div id="div2" style="display:block">
text i want to keep
</div>
</div>
But of course, "text i want to keep" will not be displayed because the
parent div is not visible.
Question: How do you only dispaly the content of the inner div?
Due to the widget blogger uses, I have no access to the code and need to clear the outer div with some CSS. I have already ruled out font-size: 0; after reading this. Messing with negative margins too is ruled out, due to position of elements.
try this:
color: transparent;
background: transparent;
of course, that won't actually make the text non-selectable, just non-visible.
Really what you're trying to do is sort of against the box-model concept, and it'd be better if you were able to enclose the text you didn't want to see in a separate div of equal level to the one you do want to see, and then hide that other div, i.e.
<div id="div1">
<div id="div3" style="display:none">text i do not want</div>
<div id="div2" style="display:block">
text i want to keep
</div>
</div>
Due to the hierarchical nature of HTML, this is a hard nut to crack. The common solution is to move one element out of the other and style them so that they appear to be nested, but I assume you cannot do that in this case.
The only solution I can think of that will nullify the parent element while keeping the child element is absolute positioning, but that will be hard if you've got dynamic heights/widths on the elements.
But try this:
#div1 {
/* You might want to set a height here appropriate for #div2 */
position: relative;
text-indent: -10000px;
}
#div2 {
left: 0;
position: absolute;
text-indent: 0;
top: 0;
}
Do you want just the text to disappear or the space that the text takes up to collapse too?
If you just want the text to disappear, use
<div id="div1" style="text-indent:-9999px;">
text i do not want
<div id="div2" style="text-indent:0">
text i want to keep
</div>
</div>
try this it helped me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #fff;
font-size:100%;
}
#hide {
visibility:hidden;
}
#show {
visibility:visible
}
</style>
</head>
<body>
<div id="hide"> hide this text
<div id="show"> show this text </div>
hide this text too </div>
</body>
</html>
Enclose the 'Text I do not want' in another DIV or SPAN with display:none style.