I have a table inside an absolute positioned div. The div stretches using top 0 and bottom 0,
and it seems it stretches as expected cross-browser. (I checked, I put on a border on it and it stretched as expected).
Now, inside the div I have a table. I want the table to stretch on all of the div space,
and in Google Chrome it does. But in Internet Explorer and Firefox it is not, the table stretches to the width, but ignores the height property, and its height is determined by its contents.
Is there a way to fix it, or bypass it somehow?
Here is the code:
<div
style=
"position:absolute;
top:40px;
left:0px;
right:0px;
bottom:0px;">
<table
width="100%"
cellpadding="0"
cellspacing="0"
style="height:100%;">
</table>
</div>
Define a height of your div,
<div style="position:absolute; top:40px; left:0px; right:0px; background-color: #f90; bottom:0px; height: 400px">
<table width="100%" cellpadding="0" cellspacing="0" style="height:100%;">
</table>
</div>
Related
I am trying to create a header-container layout. The header height is variable and the container should always fill the rest of space (width, height).
IE (9,10) and latest Opera computes the height of the layout table wrong so as scroll bars appear. The rest of the browsers computes it right (Safari, Chrome, Firefox).
<div class="header-container-layout">
<table border="0" cellspacing="0" cellpadding="0">
<tr class="layout-hdr">
<td style="background:#aaa">
asdasdas asdasd
</td>
</tr>
<tr class="layout-content" >
<td style="height:100%;">
<div class="layout-content-inner" style="background:#ccc;">
</div>
</td>
</tr>
</table>
</div>
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.layout-content-inner{
height:100%;
position:relative;
overflow:hidden;
}
table{
width:100%;
height:100%;
}
You can see here the situation: http://jsfiddle.net/95und/9/
Is there a solution for this without javascript ?
Thanks!
EDIT: My problem does not have to do with scroll bars appearence, I could avoid them with overflow:hidden. The problem is that I want to position content absolute to the bottom of the container.
Well, adding overflow:hidden to the .header-container-layout makes the scrollbar go away in Opera:
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
***overflow:hidden;***
}
I can't actually test on IE terribly easily right now but I suspect it would probably behave the same.
The only problem with this, of course, is that if your content is particularly long, it could get cut off. Depends what your plans are I guess.
http://jsfiddle.net/yochannah/95und/10/
I have a table with 3 columns and first and third column are divided by a vertical line for which i used table with with 100% height and background color which works in fine in FF but doesn't work in Chrome or IE.
Now i replace the table with div tag but empty div doesn't show up. Below is the sample code i tried so many thing now i am confused what to use. Need help from CSS Gurus.
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
}
<table height="100%">
<td width="60px" valign="top" align="center" >
<div class="PageLine2V"></div>
</td>
</table>
I am not sure how i can make this empty div show up and grow with table height also
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
height: 100%;
}
Give the div a height of 100%
Also add something in the div such as a space it won't render without content.
<table height="100%">
<td width="60px" valign="top" align="center" >
<div class="PageLine2V"> </div>
</td>
</table>
Setting height to 100% requires that the parent have an explicitly defined height. Add height: 100% to the td (the parent of the div). Tested and working with jsfiddle.
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
height: 35px; /* As required */
display:inline-block;
}
Hope this will work. As I tried, I've used the same code with a fixed height in pixels and added display:inline-block;. Next you may try adjusting the parent height parameters for further positioning.
give it a position:absolute;
http://jsfiddle.net/eg6DP/
you can see it on the far left,and while you're at it give the table a position as well.
Here's an example on JSFiddle.
Excerpt of code:
<table style="height:100%">
<tr height="20"><td></td></tr>
<tr>
<td>This gray cell fits all available height of table</td>
</tr>
<tr height="20"><td></td></tr>
</table>
There is a table with three rows. Row in the middle fits all available height of table.
I took this solution from here.
Problem is that impossible to make overflow-y for middle cell. It seems that the middle cell has a min-height property equals height of it's content.
So does it possible to turn on scrolling (overflow-y:auto) somehow and if it doesn't how to implement this layout in divs?
UPD. Thanks. Seems like this is working example: http://jsfiddle.net/haGWe/6/
But it's still interesting how to implement this with divs.
Here it is.
Basically, add a div inside your td element, add a fixed height (I chose 20px) and overflow: auto.
Wrap the contents of middle row in a div and apply the css to the div.
<div class="widget">
<table cellpadding="0" cellspacing="0">
<tr class="widget-header">
<td>20 px above</td>
</tr>
<tr class="widget-content">
<td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td>
</tr>
<tr class="widget-footer">
<td>20 px below</td>
</tr>
</table>
</div>
.widget{
position:absolute;
min-width:200px;
width:200px;
outline:1px solid gray;
right:50%;
top:20px;
}
.widget > table{
height:100%;
width:100%;
}
.widget-header{
height:20px;
}
.widget-content{
vertical-align:top;
background:gray;
}
.widget-footer{
height:20px;
}
#myDiv
{
height:40px;
overflow-y:scroll;
}
http://jsfiddle.net/2YvG6/
I have a curious issue that's proving difficult. I have five divs stacked vertically in a table cell. I'd like the even-numbered divs to fold behind the middle div but in front of the others with z-indexing so that the stack appears as 1-3-5 by default (and all touching, no whitespace), with the even divs' placement and movement not affecting those of the odd-numbered divs. However, if I put the even divs into the middle div, the z-indexing of the evens is completely ignored and they appear on top of the middle guy instead of under it.
I need everything here positioned relative to the containing table cell. Absolute positioning sends any one of these elements travelling to places they shouldn't go. The cell alignment specs are needed as well. Ultimately I want to be able to expand out and contract in the even items with a mouseover (javascript) without moving the odd ones.
<style type="text/css">
.oddStationary {
position:relative;
width:100px;
height:120px;
z-index:1;
border:solid red;
}
.evenMover {
position:relative;
width:100px;
height:120px;
z-index:2;
border:solid yellow;
}
.middleStationary {
position:relative;
height:300px;
width:200px;
z-index:3;
border:solid orange;
background-color:pink;
}
</style>
<table width="600">
<tr>
<td valign="top" align="center">
<div class="oddStationary"></div>
<div class="evenMover"></div>
<div class="middleStationary"></div>
<div class="evenMover"></div>
<div class="oddStationary"></div>
</td>
</tr>
</table>
You need to establish a common reference point for your absolute positioning. By default absolutes go up the HTML tree until they encounter the first "position:relative", which becomes the new origin. If you don't have one defined, the "origin" becomes the BODY tag. You can either set TD as "position:relative" or wrap the whole thing in a DIV that has "position:relative". That's a good start.
set evenMover position to absolute and then put the evenmover tag inside the div tag of those divs where u want it.
<td valign="top" align="center">
<div class="oddStationary">
<div class="evenMover"></div></div>
<div class="middleStationary">
<div class="evenMover"></div></div>
<div class="oddStationary"></div>
</td>
I didn't get your question properly:
while this is the answer to your question whatever I understand from this article:
May be it's helpful:
<style type="text/css">
.oddStationary {
position:relative;
width:100px;
height:120px;
z-index:1;
border:solid red;
}
.evenMover {
position:absolute;
width:100px;
height:120px;
z-index:2;
border:solid yellow;
}
.middleStationary {
position:relative;
height:300px;
width:200px;
z-index:3;
border:solid orange;
background-color:pink;
}
</style>
<table width="600">
<tr>
<td valign="top" align="center">
<div class="oddStationary">
<div class="evenMover"></div></div>
<div class="middleStationary">
<div class="evenMover"></div></div>
<div class="oddStationary"></div>
</td>
</tr>
</table>
I'm trying to set a width for a child element which parent's position is relative. But when I give a width to child larger than parent's width, the parent's width in FireFox will be changed. And which in IE6/IE7, I must change the parent's width then the child's can be changed. Now, I need to change the child's width but not change it's parent's.Thx!
#container {
width:300px;
height:300px;
position: relative;
background:#666;
}
#box {
height:100px;
position: absolute;
top: 100px;
left: 50px;
background:#006;
max-width:300px;
min-width:220px;
}
<div id="container" style="float:left;">
<div id="box">
<div>
<table style="border:none;padding:0 0 0 0; margin:0 0 0 0em;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:300px; word-wrap:break-word; word-break:break-all;">
bmkmgklkldfbmm bmsdfkmsdfl vmsdfklvmkbsbndfbf msdvmkdvsdfkmvcnas dcbnasdjkcn asdjudhcud cadjkcnasdcbnasd jkcnasdj
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float:left;">
udhcudcadjkcnasdcbnasdjkcnasdj
</div>
Are you using a DOCTYPE? That is your best first step at ensuring that browsers act the same.
Try adding overflow: hidden; to #container. Another option is overflow: scroll;. This property describes what should happen to a container element when its children are bigger than it is. I'm guessing the default behavior is different in Firefox vs. IE.
Here's some documentation.