|
HTML - Help! Auto Expanding Table Or Div Heights...
hi again... Nobody replied to my last post, so I've simplified what I am having trouble with. I have a MAIN table (which holds all of the page content) that is set to automatically scale to 100% height of any size browser window. That part works fine.
My problem lies with the content in that main table. 1) I want the blue table to stay aligned to the top of the browser window. 2) I want the green table to automatically stretch vertically to fit any size browser window 3) I want the yellow table to stay aligned to the bottom of the browser window. When I resize the browser window, the green table does not expand properly. I've already tried different <div height="100%"> and <table height="100%"> values and none of them work. The smaller I resize the browser window , the more of the green table is cut off from the bottom, and the yellow table does not scale properly. So in short, the blue table stays at the top, the yellow table stays at the bottom, and i want the green table to scale vertically to fill the remaining space in between when the browser window is scaled vertically. Everything works fine when scaled horizontally. Can someone please help me with this!?!?!?!? Again, here is the basic stripped down version of the html code I have. HTML Code: <html>
<head>
<title>Site Title</title>
</head>
<style>
html, body
{
margin:0px;
height:100%;
width: 100%;
padding: 0px;
}
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%">
<tr>
<td valign="top">
<!-- Top table - Stays at the top of the browser window -->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="70" bgcolor="#00FFFF">
<p align="center">This table stays aligned to the top of the browser window and stays 70 pixels in height.
</td>
</tr>
</table>
</div>
<!-- End of top table -->
<!--Middle table - Stretches vertically to fill remaining space-->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" valign="top" bgcolor="#00FF00">
<p align="center">content in this table will be aligned to the top.<br>
I want this table to automatically expand vertically to fill the empty
space between the blue header and the yellow footer.</td>
</tr>
</table>
</div>
<!-- End of middle table -->
<!-- Bottom table - Stays at the bottom of the browser window -->
<div height=”100” valign=”bottom”>
<table height="100" border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="100" bgcolor="#FFFF00">
<p align="center">I want this footer to stay aligned to the bottom of
the browser window and stays 100 pixels in height</td>
</tr>
</table>
</div>
<!-- End of bottom table -->
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsHi guys, I'm really having a problem here. I'm creating a new instant messenger program and can't get the tables to stretch properly. Firstoff, when the messenger loads, you will not see the address bar, status bar, menu bar, etc. I want to be able to resize the browser (messenger) window to any size, just like you would with msn for example. I have 3 tables. 1) The first one will contain all the header graphics etc and I want this table to stay aligned to the TOP of the browser window. 2) The middle table is where the chat conversation text will go. The chat text will be aligned to the top of this window. This is the window that I need to stretch to vertically automatically when you resize the browser window. 3) The last table is where the message entry box will be. I want this to stay aligned to the BOTTOM of the browser window. Right now, my MAIN TABLE which contains all of the messenger content does stretch to fit the screen, but how the heck do I get the three tables inside it to be aligned how i need them??? Here is the basic code that I'm working with: <html> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="fullheight" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">Header goes here - Stays aligned to the top of the browser window</td> </tr> <tr> <td width="100%">Middle chat content - automatically stretches vertically when the browser window is resized</td> </tr> <tr> <td width="100%">Message entry box section - stays aligned to the bottom of the browser window</td> </tr> </table> </td> </tr> </table> </body> </html> This is the CSS code that I'm using which makes the MAIN table expand to fit the entire browser window: html, body { margin:0; padding:0; height:100%; border:none } #fullheight{height:100%} Can anyone please help me out? Thanks! Hi experts, would it be possible for any advice on a header issue please. I have created a website at www.ukdecals.com the website expands to fit most browsers and i've tried it in IE9 and Firefox, to me everything looks fine at my monitor settings of 1152 x 864 pxls But a friend has just sent me a screen shot from his screen on his computer in IE9 and the header seems to not be expanding in length across the page, would anyone one be able to view the source code and see if they could spy the problem, i've looked at it myself and i can't see it, but only learning html in the last couple of months, i'll admit that this ones got me stumped. I'd appreciate any help you could give. Kind Regards Jas.... I am creating a table that is taking data from database records. The table in question is the second one down (Previous Gigs) on the following page http://www.shotguneffect.com/?page_id=11 As you can see, some of the rows have a picture in, others don't. When I view this page in Firefox the rows automatically adjust their height so that the rows that just display text are only small, and the ones with a picture in are taller. However, when I view this page in IE8 (not sure what it does in other versions) all of the rows are identical height. As some of them contain images, it makes the rows that just contain text the same height. That is not the only thing though, it also breaks up the text in those rows so that it fills the height and therefore alters the widths also. Is there any way that I can get it so that the table row heights are only as tall as they need to be when being viewed in IE? (i.e. like they do in Firefox) Hello all, I have the following table, however, my height seem to be changing: Code: <table width="100%">
<tr>
<td height="50" width="50%">
CELL1</td>
<td rowspan="3" valign="top" width="50%">
WRITING GOES HERE</td>
</tr>
<tr>
<td height="50" width="50%">
CELL2</td>
</tr>
<tr>
<td height="100%" width="50%">
CELL3</td>
</tr>
</table>
I want cell1 and cell2 to always remain at 50px. cell3, may vary in size depending on how much information is entered into the 'WRITING GOES HERE' section. At present when there is a lot of wiriting in the 'WRITING GOES HERE', cell1 and cell2's height will be much larger that 50px. Any ideas how i can get cell1 and cell2 to remain constan and cell3's height to vary? Much Appreciated. I'm working on a website and I'm running into a problem with the left side cells. http://www.kbrmarketing.com/kbrnew/pages/problem.html If you look at the side on FF (3) is looks correct, but when you look at in in IE (i'm using 7) it's gets stretched out. I want only the bottom cell to expand as the page gets longer. Here's some pictures to help explain < IE < FF I just inserted those line breaks to extend the page to show you guys the problem. Eventually those breaks will be replaced with text and pictures. (the <br>'s are in the right cell, which causes the left cells to then expand) I have a table and it expands. One bottom "Author" row expands when I put data in the top row "Words". How do I stop this from happening. Code: <div id="apDiv20">
<table width="231" height="190" border="0">
<tr>
<td height="23" colspan="3"><div align="justify"><span class="style4 style10">';echo $Title[1]; echo'</span></div></td>
<td height="23"> </td>
</tr>
<tr>
<td height="135" colspan="3">';echo $Words[1]; echo'<div align="justify">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div></td>
<td height="135"> </td>
</tr>
<tr>
<td width="48" height="23"><span class="style9">Author:</span></td>
<td width="73"><div align="justify"><strong><span class="style3 style10">';echo $author[1]; echo'</span></strong></div></td>
<td width="52"><span class="style13">share</span></td>
<td width="40"><pre class="style2"> </pre></td>
</tr>
</table>
</div>
How do i stop a table from expanding, When i place a image in it that is larger then the table size. The catch is, I dont want to set the any size peramiters in the 'img' tag. table width = 100 px image width = 200 px 100 px = of pixel page killings Thanks Hi all, I have a table with some data in it. Sometimes the data in one of the cells fills up and it messes up the formatting of the rest of the table. I would like to have the table show a "...." when this happens and then when the user hovers his mouse over this then I want the remaining data to float over the table. Somewhat like a tooltip text. Is there anyway to do this? Thanks in advance for any help, Jehan can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! I there. I'm trying to buid a page that once selected an item from a list, auto-reads files in a folder and and sort them in a table, with a calendar look. The files are being feed to the folder with the name "ZON YY-MM-DD.gif" "PSI20 YY-MM-DD.gif" "JMAR YY-MM-DD.gif" i.e. "MONDAY" | "TUESDAY" | "WEDNESDAY" | "THURSDAY" | "FRIDAY" | -------------------------------------------------------------------- YY-MM-DD | YY-MM-DD | YY-MM-DD | YY-MM-DD | YY-MM-DD | .... .... .... -------------------------------------------------------------------- 08-10-20 | 08-10-21 | 08-10-22 | 08-10-23 | 08-10-24 | -------------------------------------------------------------------- 08-10-13 | 08-10-14 | 08-10-15 | 08-10-15 | 08-10-16 | -------------------------------------------------------------------- Until now for each week I was coding in manually the new row for each item, but it's a pain changing the date and item. <tr> <td><div align="center">07-07-2008</div></td> <td><div align="center">08-07-2008</div></td> <td><div align="center">09-07-2008</div></td> <td><div align="center">10-07-2008</div></td> <td><div align="center">11-07-2008</div></td> </tr> <tr> <td><div align="center"> <p><img src="ZON 08-07-08.gif" width="220" height="129" /></p> </div></td> <td><div align="center"> <p><img src="ZON 08-07-08.gif" width="220" height="129" /></p> </div></td> <td><div align="center"> <p><img src="ZON 09-07-08.gif" width="220" height="129" /></p> </div></td> <td><div align="center"> <p><img src="ZON 10-07-08.gif" width="220" height="129" /></p> </div></td> <td><div align="center"> <p><img src="ZON 11-07-08.gif" width="220" height="129" /></p> </div></td> </tr> How can I do this automatically? Doing it with FOR's WHILE's and IF's seems very troublesome. Any code or pointers are welcome. BLopes Hello Please see my a page on my site http://www.unofficiallyfleet.com/0607fixres.php. In IE the TD heights in the table are my desired finish, but in FF it makes all the heights the same as the biggest, if you see what I mean, meaning the table is extended outside my outer box. I have tried making all the TD's vAligh="top", and height="12", but FF wont budge! Anyone got any other ideas? Thanks. I'd be really grateful if someone could spot the problem in my coding which is splitting one column which has two rows so that both rows have equal height. Instead I want it to size the top row depending on contents, with the bottom row filling the rest of the table. The page is at http://www.clwydscouts.org.uk/news.php The column I mean is the left hand one which has promo images/links up top with a green menu on the bottom. It looks fine in Safari, just a problem in IE. Thanks in advance. Hi. I have a problem. I'm using tables to create a new design for my website and I have a td set to 90px with a padding of 30px on the top and bottom. There is a background image in the background. In Safari, the td is taller than in IE8. I don't know if this helps, but I also have a <!DOCTYPE /> tag. Is there a way so that when you click a link, it will push everything below it down and show what they requested to see. I am planning on this for suggestions and help without users needing to re-load the page. Thanks. Sean Hi all, I have a simple table: Code: <table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" rowspan="3">MAIN CONTENT</td>
<td>fixed</td>
</tr>
<tr>
<td>expandable</td>
</tr>
<tr>
<td>fixed</td>
</tr>
<tr>
<td>fixed</td>
<td>expandable</td>
<td>fixed</td>
<td>fixed</td>
</tr>
</table>
The 2 expandable tds need to expand / contract depending on the height and width of the main content cell (as they will have repeating backgrounds) When I try this it is always the other columns that expand or contract. (BTW, this is all for a shadow border for different image sizes) Anyone know how I can achieve this? Thanks! Hi everybody! OK..i am a complete newb when it comes to coding and web design. I have been trying to build a website for a new online business I'm starting. Its not finished but i thought i'd publish it and check it on a few browsers, its fine in Safari, Firefox but in IE7 it looks terrible. Dreamweaver is telling me i have an expanding box problem. I have read around and tried a few workarounds but nothing seemed to work, but then i don't really know what i'm doing! Can anybody help? the URL is: www.atomicaudio.co.uk any advice would be greatly appreciated thanks, Dan Hey i'm back and as idiotic as ever Ok when i over fill the tables they obviously expand but it destorys my template how can i make the images replicate or expand or whatever would be best, all help is good. Cheers EDIT: forgot to provide template link here I need help Im tryng to create my webpage so that there are no scroll bars on the right or bottom. I want the content to fit right on screen without the need to scroll to view more content. But my problem is, my page is not even filled up yet, i only have my navigation on top plus my table in the center. my table width is "100" and height="50". its small on the page but everytime i expand it abit more, it makes the entire webpage bigger then the scroll bars start appearing. Im tryna make a page that fits right on screen without need to scroll. Is there a code to fix this. ?/ Good afternoon. I am hoping someone can help. I've used tables to create the layout of my website (www.bongoscribbler.com) and I'm linking to a php script for the blog which essentially inserts blog.php into the middle cell. I want the cell to expand downwards so that scroll bars aren't necessary. It does this when viewing it on the iPhone or on the iPad but when viewing using Safari, IE and Firefox on the PC the cell doesn't expand downwards, but rather it stays the same size and scroll bars appear. If I disable the scroll bars, the cell still doesn't expand downwards to fit in all the content but the additional content is just outside the view of the cell. Does this make sense? Perhaps if you take a look at the site and click "read more" you'll see what I mean. <tr> <th background="pictures/s_image11_6.gif" width="141" height="683" border="0"></th> <th background="pictures/s_image11_7.gif" ALT="Main" width="777" height="683" border="0"> <iframe src="http://www.bongoscribbler.com/cgi-bin/preview.php" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> </th> <th background="pictures/s_image11_8.gif" width="82" height="683" border="0"></th> </tr> Does anyone know what attributes I need to give the cell/table to get it to expand downwards? I'll be very grateful for any help. Thanks a lot Tom I am looking for a code that when you click a link, it expands an area below it with out reloading the page or switching pages. I have seen it before, just click a link and it pops open a invisible box of (whatever) information you want, click the link again and the box turns invisible again. Sorry if I am not explaining this correctly. |
|||||||