<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Chris,<br>
<br>
Chris Hettinger wrote:
<blockquote cite="mid:20080312214759.3B253560086@pop.visionary.com"
type="cite">
<meta http-equiv="Content-Type" content="text/html; ">
<meta name="Generator" content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
<div class="Section1"><font face="Arial" size="2"><span
style="font-size: 10pt; font-family: Arial;"><o:p></o:p>An
illustration of what I am looking for can be viewed by
visiting <a moz-do-not-send="true" href="http://www.redfin.com/">www.redfin.com</a>.
Complete a real
estate search in one of their markets; you will be taken to a results
page that
fills the browser with a map, a summary box to the right and grid of
data
below.<o:p></o:p></span></font>
<p class="MsoNormal"><font face="Arial" size="2"><span
style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span
style="font-size: 10pt; font-family: Arial;">I need to recreate one
aspect of what they are doing, that
is on window resize, I must grow/shrink the map div to fill the browser
window.<o:p></o:p></span></font></p>
</div>
</blockquote>
Using the css width property in percent<br>
<br>
#map {<br>
width: 100%;<br>
}<br>
<br>
will get the layout you want. Although you will probably need to
specify a minimum width, which is more challenging in css assuming you
want to support ie6. The other issue is that you will probably want to
recompute the map, so you will need to attach a handler to the window's
resize event<br>
<br>
By the way, redfin is doing a poor job of browser sniffing and giving
me a fixed width layout in firefox 3 because it says I'm using an
'unsupported' browser. and I should go download firefox :-).<br>
<br>
<pre class="moz-signature" cols="72">--
Roger Roelofs
Datacomp Appraisal Services
3215 Eaglecrest, NE E: <a class="moz-txt-link-abbreviated" href="mailto:rer@datacompusa.com">rer@datacompusa.com</a>
Grand Rapids, MI 49525 W: <a class="moz-txt-link-freetext" href="http://www.datacompusa.com">http://www.datacompusa.com</a>
</pre>
</body>
</html>