Home/ Questions/Q 8796829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:42:42+00:00

The table below is used to display a map and some relevant data( I

  • 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0