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/
Related
I'm pretty new to HTML and I decided to make a small sign up page as practice. For some reason, it won't scroll (There is no scrollbar and it just cuts off at the bottom of the screen). The HTML code can be found here: http://jsfiddle.net/7sukbe0t/1/. I have a hunch that the reason for the problem is
table-layout:fixed
but without that line, I'm unable to get my column sizes to be of equal size. How can I fix this?
Change the table position to:
relative
<table style="width:300px; min-height: 100px; position:relative; top:300px; left:200px; table-layout:fixed;">
or
absolute
<table style="width:300px; min-height: 100px; position:absolute; top:300px; left:200px; table-layout:fixed;">
Edit:
Check these out to see the differences between the position values
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://www.yorku.ca/nmw/facs1939f13/week02/css_relVSabsVSfixed.html
You should change the position to relative instead of fixed, like so:
<table style="width:300px; position:relative; top:300px; left:200px; table-layout:fixed;">
I have a "pop-up" table which is a fixed element. The table is sometimes to high to fit on some screens so I have set overflow to auto. However the scrollbar appears detached from the pop-up table as the parent div is the width of the screen and the table is less. Is there a way to get the scroll bar to attach directly right of the pop-up table without the gap, while keeping the table centered? here is a demo to show you what I mean. Thank you.
html
<div id = "blanket">
<div>
<table align = "center" id = "popUpTable">
<tr>
<td>fixed pop uptable</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>four</td>
</tr>
</table>
</div>
</div>
<div>background stuff<br>background stuff<br>background stuff<br></div>
css
#blanket{
position:fixed;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(255,555,255,0.5);
overflow-y:auto;
}
#popUpTable{
border:1px solid gray;
margin-top:2%;
background-color:#fff;
}
#popUpTable td{
height:150px;
text-align:center;
border:1px solid gray;
}
The problem is position:fixed; left:0; right:0;, that makes it 100% width.
You should remove right:0, and set some padding on the left for displaying the "background stuff" content.
Updated Demo: http://jsfiddle.net/ssjkgb22/33/
This isn't currently supported in IE, but adding this will to you stylesheet will do what you want in Firefox Chrome and Safari, with proper centering.
width:-moz-fit-content;
width:-webkit-fit-content;
margin:auto;
See it here:
http://jsbin.com/yetoto/1/watch?css,output
When width is not auto, setting both margin-left and margin-right to auto will center things. But you need a value for width that will just fit your content, and fit-content does just that, in the browsers that support it.
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 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>