0

The table below is used to display a map and some relevant data( I cleaned everything for better readability). The left part is a "vertically scrollable table". The right part is a div that shows the google map.

It is set to 500px now and I am wondering how can I make it "fill" the available screen real-estate.

<div id="maparea">
    <table style="width:100%; position:relative;border-bottom: 1px solid #888888;margin: 0 auto;" >
        <tr>
            <td width="120px">
                <div style="padding : 4px; width : 196px; height:500px; overflow : auto;">
                    <div>
                        <table width="100%" style="border:1px solid #888888;padding : 0px;">
                            <tr>
                                <td style="font-size:xx-small;">
                                    <b>Name: </b> name<br>
                                    <b>Unit ID:</b> this is id<br>
                                    <b>State:</b> IL     <br>
                                </td>
                            </tr>                    
                        </table>
                        <table><tr><td></td></tr></table></div>
                </div>         
            </td>
            <td width="100%" height="100%">
                <div id="googlemaps1" style="width:100%; height:500px;position:relative;margin: 0 auto;"> </div>
            </td>
        </tr>
    </table>
</div>
Andrew
  • 7,619
  • 13
  • 63
  • 117

3 Answers3

1

In order to stretch it out vertically, you have to set every nested element from html down to have height: 100%. Should look something like this:

html, body, #maparea, table, #googlemaps1 { height: 100%; }

For contrast:

McGarnagle
  • 101,349
  • 31
  • 229
  • 260
1

you can use a fixed or absolute position of the table and use bottom and top coordinates to fix the height.

table {
 position: absolute;
 top: 0px;
 bottom: 0px;
 width:100%;
}

greetings!

Mic
  • 523
  • 6
  • 18
1

Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.

Demo of clean coding for you here: http://jsfiddle.net/nshJH/

Using <div>'s you can just use the 

float: xxxx;
clear: xxxx;

This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...

Epik
  • 3,327
  • 4
  • 17
  • 23
  • Epik, I agree, keeping css in separate class is good, but after adding so many styles in one file, I do not even remember what I have done and should I re-use the syle, or create a new one (which, by accedent could have been created a week ago). Can propose a good solution to this problem? – Andrew Nov 07 '12 at 21:28
  • All you need to do to find a class you have previously used is go to the web page and view in HTML, look at the class that is applied to that div or span or p tag etc and then add the same class to the item you need the style for. Simple and clean! – Epik Nov 09 '12 at 00:21
  • The whole idea of using classes is so that you can re-use them multiple times. e.g

    Text here

    simply make this red using a class to define this property in CSS. Say you would like more text red in the body of your page, simply apply this class to it anywhere and it will work. Then you come to things such as ID's. An ID is a 'unique' tag... What this means is that you can only use this ONCE on each web page. This would be used in the case of say a header tag or footer tag so that you can focus on content placed in these uniquely rather then a possible repetitive tag etc.     – Epik Nov 09 '12 at 00:23