|
HTML - Container/layout Table Height 100% Not Filling Up The Page
The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page.
It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. Similar TutorialsHi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though I want to know how to make a div stretch to the full height of a container! Here is the html: Code: <!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>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */
/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */
/* START - Content */
/* END - Content */
/* START - Footer - No change */
/* END - Footer - No change */
The "leftside" image is supposed to be the full length of the header + content. Thanks! Hi all, Current code available for viewing he http://www.joomlatemplatesearcher.com/testtemplate/ I'm trying to position a div so that it sits (near) the bottom of a container. I'd assumed position:relative / bottom: 10px would do the trick, but no joy, and I can't figure out why that's not aligning. If anyone could offer help, I'd be very appreciative. Ultimately I'm trying to get the aqua-coloured box sitting inside the black area of the monitor (aligned from the bottom, as the div containing the monitor background is bottom-aligned to a container with variable height. Any suggestions greatly appreciated. With thanks, - SuperGrover I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. Hi guys, All of my pages are centered in the middle of the screen except my contact_us.html page which shifts half a centimeter to the right (still in the middle of the page but it moves slightly). This page contains a form inside a table. Why does it move?? I can put code up if the answer cannot be resolved from the info provided Thanks, Raggy Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. Hello all, I am making a website with the lay-out based on a table (I know I shouldn't, when will I ever learn? ;-)). The problem is the following: I have divided my page into several blocks: The lowest <td> row has been set at 544px while the top row has been set at auto. Firefox gives the correct output. In IE the lowest row is longer than 544 px (the red line gives the height it should have, the red arrow points to the real hight). Putting the height on 100% doesn't help because it stretches the top row over the complete page, leaving the bottom row out of the screen (the positive side of this is that now the bottom row is 544 px as I had orderd it to)... So does anyone have advice for me (besides the fact that I should make my lay-out with div's: tried it, but it just doesnt work for me :-)). Thanks for the help, JuliusV ps. I've checked my code (html and css) with w3 and no errors have been found. Hi, I am looking to get a table along the side of my page to stretch from top to bottom. I tried <table height="100%"> and .high {height:100%} ... <table class="high"> but it didn't work it only shows until the end of the table's content. Is there a way to do this? Thanks Hi @ all! I am working on a layout with XHTML + CSS by use of a table, wich fills 100% of the browser window's height. Now here's my example: http://dennishoene.de.funpic.de/index2.html (Please just ignore the advt. popping up) I designed a simple grid for prospective contents. In Firefox, Safari and Opera it works fine, in IE not. I used fixed heights for the first line (30px), the second line (120px), the third line (30px) and the fifth line (30px). The fourth line should be variable (due to different screen resolutions), but in the end, the table should be of 100% height (see CSS-indications in <head>). It seems as the Internet Explorer simply does not take any notice of these values, whereas Firefox & the rest do (in detail: IE accepts the height: 100% statement, but ignores or deranges the fixed height values of the particular table cells/lines). How can I solve my problem? Any suggestions? Thanks in advance. Dennis Im having an issue with the table row heights on my page, i have three rows: The top row has the navigation menu, the second had a sub navigation menu (previous and next) to go between pages and then the third is has the content. I want the top to rows to snug up with the top of the table (like the top 25%) and then the content to be in the middle of the bottom row. Barring putting 'height="25%"' in the tr tag, is there a good way to do this? Thanks I have a table row with a form with several buttons. The row is twice the height of the buttons and I haven't been able to control the height. Here is snippet: <html> <head> </head> <body> <center> <table border='1' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <form> <input type='button' value='Prev month' id='btnPrevID' onClick='MonthYearChange("prev")'> <input type='button' value='Next month' id='btnNextID' onClick='MonthYearChange("next")'> <input type='button' value='Change Mo/Yr' id='btnChgID' onClick='DropDownChangeMonthYear()'> </form> </td> </tr> </table> </body> </html> I'm using the following code to display a table with three columns. The first and third column each have a background image, so that these graphics will appear behind any text. The middle column does not have a background image. Instead, it has three images stacked on top of each other, whose combined height equal the height of the background images on the left and right (30+83+81=194). The table and three cells are given the same dimensions as their contents or background images. Code: <table border="0" cellpadding="0" cellspacing="0" width="584" height="194"> <tr> <td width="239" height="194" align="left" valign="middle" background="left.png"> START </td> <td width="117" height="194"> <img width="117" height="30" src="middle-top.png" border="0" /><br /> <img width="117" height="83" src="middle-middle.png" border="0" /><br /> <img width="117" height="81" src="middle-bottom.png" border="0" /> </td> <td width="228" height="194" align="right" valign="middle" background="right.png"> END </td> </tr> </table> In IE8 this seems to work fine, as it does in Firefox and Chrome. However, in IE7, I get this: You can see that the background begins to repeat at the bottom of the left and right columns, indicating that the table is higher than the dimension specified. Why is this? How can I fix it (without ruining the display in other browsers/versions)? Any suggestions much appreciated! Hi, Please review the following code and give me your thoughts... HTML Code: <table width="500" border="1"><tr> <td width="200"><p>This</p><p>is</p><p>very</p><p>very</p><p>very</p><p>LONG</p><p>text</p></td> <td width="300" height ="100%" valign="top"> <table width="300" height ="100%" border="1" cellspacing="0"> <tr><td width="300" valign="top">This should be at the TOP</td></tr> <tr><td width="300" valign="bottom">This should be at the BOTTOM</td></tr> </table> </td> See the attachment for what I am trying to achieve... The thing to focus on is the second column and how it has 2 rows which are trying to stretch to fill the height of the single row first column. It works in Firefox 3.6 but not at all in IE8. Any ideas? And please don't talk me out of tables for this thread... I know they aren't the greatest thing ever, I'm just trying to fix what I have. Thanks! - Jeff I have just started using strict XHTML instead of HTML (because it makes my drop-down menus work in all browsers). But now all table rows that contain images using image tags are too high. Look here, where I have used background colors to show row heights: http://colatinaexit.com/index1.shtml This is a stripped-down page that I am using to try to figure this out. But I'm missing something (I just don't know what). Look at the rows under the main image. The first row has no image tag and a partial green background color. It uses a CSS class and a background image for the corner. The second row is identical. Notice that the heights are correct and they are aligned right next to each other vertically. Now look at the 3rd row. It contains several image tags and the partial blue background color shows that it is too high. It is defined as 10 high, all the images are defined as 10 high (and, in fact, they ARE 10 pixels high). Look at the 4th row (partial green background). No image tags, no CSS. and the height is right. The 5th row? Partial blue background color. It has an image tag, plus a CSS class that defines its height as 10px, and no background image. Too high overall. I've tried all the combinations I can think of. And every combination that includes an image tag is too high. Why? What am I missing? BTW, I know that I should be using only CSS and div tags, but I have an older version of Dreamweaver and it doesn't do WYSIWYG for CSS very well. So it would be really helpful for me to understand why table rows with images are overly high. Thanks, Paul Hi, First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread. What I have is a simple table with two sections just like this: Code: <table>
<tr>
<td width='50%' valign='top'> Content goes here... </td>
<td width='50%' valign='top'> Content 2 goes here... </td>
</tr>
</table>
Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be). The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way. I tried setting height attribute but to no avail. Any thoughts how this can be achieved? Thank you in advance for your help! Hello I'm building a website for someone and because I built the website in a way that if the browser window width becomes smaller, the width of the content on the page becomes smaller as well, so the page's height increases. Normally, using height="100%" inside a image tag would work to get the image height to be the same as the height of the page, but because of some scripts I've had to use, that only seems to set the height of the image to its original size. Also, I can't use the CSS equivalent either, that still doesn't do the trick. So I was wondering if there is an alternative to the height property that I could use. By the way, the image is inside a table if that helps at all. Thanks Drider Hello I have a very annoying problem: I have a table inside a td and I want the table the strech its height to the height of the <td> , but somehow I can't do it... <td valign="top" style="width:14px; border:solid 1px black;"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%; height:100%; min-height:100%; max-height:100%" > <tr> <td class="CommonSeperetorUp" > </td> </tr> <tr> <td class="CommonSeperetorMiddle" > </td> </tr> <tr> <td class="CommonSeperetorDown" > </td> </tr> </table> </td> int the class "CommonSeperetorMiddle" I set the height to 100% ... anyone? Hi, My site is here I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table. Anyone know how I can get this to look the same in Firefox and IE? Bit of a numpty so please be gentle Thanks Jon Hi Everyone: I'm having difficulty getting a table row height of "1" to display as only one pixel in height. Please see the attached files for reference. The JPG is what I want it to look like, and the index.txt file is the HTML I've currently setup that is not working. The table should have four white strips. On the right side, this is above and below the large black box, as well as under the green box. On the left side, this is between the light green box and the slightly darker green box. As you can see, all of these white strips appear to be larger than one pixel in height, and I'm not understanding why. Can anyone please explain to me why this is occurring, and what I can do to fix it? Also, once fixed, will I be able to merge cells of the same color (i.e make the big black box one merged cell, the below green box one merged cell, etc...)? Any help will be greatly appreciated. Thanks! Philip |
|||||||