Dynamically maximising map to fill remaining space using CSS

[Marky1124]

Hi,

I am hoping that someone can offer me some advise. I am new to CSS
layouts and I've struggled to produce the screen layout that I
wanted.
Here's my demonstration page:-

http://www.holleydesigns.com/pudo/demo3m.html

My design goals were:

1) To work on IE, FF and Opera on Windows.
2) To dynamically hide or show route directions on the left and a
control bar at the top
I've created buttons at the bottom of the page to do this.
3) To resize the map portion of the screen to maximise any remaining
viewport space
4) To dynamically resize as the browser window changes size.

I have finally got it working to meet my criteria but I feel that I
have compromised on my use of CSS. I had hoped that I could use CSS
to
anchor the container div that the map lives in to the edges of the
viewport. However my attempts to do this using properties such as
right-margin:0 and right:0 failed. Eventually I was forced to give up
and use a javascript function to dynamically calculate the size of
the
div's and set their values directly.

I would have loved to avoid using my own calculations. Can anyone
enlighten me? Can it be done in CSS directly?

Thanks very much in advanced for your consideration,
Cheers,
Mark

[Andy Dingley]

On 5 Oct, 09:49, Marky1124 <[e-mail]:

2) To dynamically hide or show route directions on the left and a
control bar at the top

Maybe _too_ fluid?

On my desktop I see the LHS bar above the map, unless I full-screen
the window. This is often cited as an example of good fluid design,
but I think it's going too far here. Maybe keeping them side by side
(use a 1x2 <table>) would be better than floating separarate <div>s.

[Marky1124]

Thanks for your reply Andy.

On Oct 5, 10:48 am, Andy Dingley <[e-mail]:

On my desktop I see the LHS bar above the map, unless I full-screen
the window.

Oh dear. Which browser was that? I've been unable to test against IE7
as yet. All my testing has been IE6.

On Oct 5, 10:48 am, Andy Dingley <[e-mail]:

Maybe keeping them side by side (use a 1x2 <table>) would be better
than floating separarate <div>s.

That was the original design that I'm attempting to move away from. I
found problems with calculating the maximum map size in IE. IE would
introduce a wide (inch or two) white space gap to the left of the map.
I had problems trying to identify exactly which element was causing
that, because I've yet to meet good tools to examine the DOM
dynamically. I primarily use firebug in Firefox for inspecting layout
and javascript code.

Hence that was the reason I was hoping that it was possible to use CSS
to float the route directions on the left and then have the rest
dynamically size to fill the rest of the visible area.

Cheers,
Mark

[dorayme]

In article
<11*********************@50g2000hsm.googlegroups.c om>,
Marky1124 <ma*******@gmail.comwrote:

Hi,

I am hoping that someone can offer me some advise. I am new to CSS
layouts and I've struggled to produce the screen layout that I
wanted.
Here's my demonstration page:-

http://www.holleydesigns.com/pudo/demo3m.html

Have you tried validating it?

--
dorayme

[Marky1124]

On Oct 5, 11:58 pm, dorayme <[e-mail]:

Have you tried validating it?

Thanks dorayme, Yes I've done that at http://jigsaw.w3.org/css-validator/
and the only compliant it had was the colour lightgreen.

Cheers,
Mark

[dorayme]

In article
<11**********************@g4g2000hsf.googlegroups. com>,
Marky1124 <ma*******@gmail.comwrote:

On Oct 5, 11:58 pm, dorayme <[e-mail]:

Have you tried validating it?

Thanks dorayme, Yes I've done that at http://jigsaw.w3.org/css-validator/
and the only compliant it had was the colour lightgreen.

When I looked again, I got some serious mistakes, not just that
one. Take a look at

<http://tinyurl.com/ys9s8n>

There may be issues to do with the way you are serving XML.
Frankly, much of this stuff is a bit beyond my pay grade as they
say... (I should charge less!) but you could take a look at a
couple of things:

http://www.w3.org/International/articles/serving-xhtml/

http://www.spartanicus.utvinternet.ie/no-xhtml.htm

http://www.spartanicus.utvinternet.ie/custom_dtd.htm

It is lovely for me. I trust what many of the very clever people
are saying around these parts and I stick to 4.01 Strict almost
exclusively. It feels good too.

--
dorayme

[Marky1124]

Thanks dorayme. This morning when I replied I couldn't get to
validator.w3.org. I've now fixed the missing DOCTYPE in my example and
fixed other minor errors. All that remains is a compliant about UTF-8
and body onresize attribute. The main reason I have a onresize
function is to demonstrate the page I ended up building. My main goal
with this forum thread was to discover whether it is possible to
achieve my goals in CSS without using Javascript to resize the map
div. I know Google requires that I call map.checkResize() when the map
div changes size, but I don't want to be setting the height and width
values myself.

So my main question is whether it's possible to achieve the page
layout with CSS alone. I've put together another small demo which is
even more minimal.

http://www.holleydesigns.com/pudo/demo6.html

I've tried to use CSS to anchor the container and gmap div to the
edges of the viewport. That doesn't work. Is it possible?

Cheers,
Mark

P.S. Thanks for those other links. As you say that's all heavy duty
stuff. I've always tried to be a minimalist HTML page creator myself,
however the use of Google Maps API has pushed me to use special
DOCTYPE declarations etc.

[Ben C]

On 2007-10-08, Marky1124 <ma*******@gmail.comwrote:
[...]

So my main question is whether it's possible to achieve the page
layout with CSS alone. I've put together another small demo which is
even more minimal.

http://www.holleydesigns.com/pudo/demo6.html

I've tried to use CSS to anchor the container and gmap div to the
edges of the viewport. That doesn't work. Is it possible?

Change the HTML to move fl and fr out of container to in front of it:

<div class="fl">Sits on left
</div>
<div class="fr">Sits on right
</div>
<div id="container" class="container">
<div id="gmap">
This is the map
</div>
</div>

Then try this for the styles:

body, html
{
height: 100%;
margin: 0;
padding: 0;
}

div.container
{
position: relative;
background-color: lightgreen;
overflow: hidden; /* So it's a block-formatting-context root, and fits
between the floats */
height: 100%;
}

#gmap
{
position: absolute;
background-color: gray;
left:0px;right:0px;bottom:0px;top:0px;
}

div.fl {float: left; background-color: blue;}
div.fr {float: right; background-color: red;}

Is this the effect you want?

[Marky1124]

On Oct 8, 2:18 pm, Ben C <[e-mail]:

Is this the effect you want?

Hi Ben,

That's very impressive. That's much closer to the effect I want but
unfortunately the map sits on top of the text I'd aim to have above
and below it, presumably because it's set to absolute.

http://www.holleydesigns.com/pudo/demo3mm.html

I have to confess I've only spent a couple of minutes trying to
understand your example and make it work with a map as well. The
reason is that I'm due to go on holiday in a few hours time and I'm
rushing to finish off things before I leave.

So thank you very much for your example. It's closer but it doesn't
quite work like this page demonstrates:

http://www.holleydesigns.com/pudo/demo3m.html

After my holiday I'll have to ponder more on the way of things. I
certainly need to understand fully how and why your example works.
I've not spent the time yet getting to grips with it.

Thanks again,
Cheers,
Mark

[Ben C]

On 2007-10-08, Marky1124 <ma*******@gmail.comwrote:

On Oct 8, 2:18 pm, Ben C <[e-mail]:

>Is this the effect you want?

Hi Ben,

That's very impressive. That's much closer to the effect I want but
unfortunately the map sits on top of the text I'd aim to have above
and below it, presumably because it's set to absolute.

If you don't mind setting explicit heights for the regions above and
below then it's easy-- just put a header div inside container above
#gmap and a footer div below it, set them to 4em each, and make #gmap
top: 4em; bottom: 4em instead of top: 0; bottom: 0.

[...]

After my holiday I'll have to ponder more on the way of things. I
certainly need to understand fully how and why your example works.
I've not spent the time yet getting to grips with it.

The thing is you might not actually need auto widths for the left and
right columns. If you can set those widths explicitly then you can just
use margins to get the middle column between them instead of using
overflow: hidden to make a block formatting context and therefore force
a normal flow block to squeeze between floats.

Your simpler example was good. The thing to be clear about though is
where you can set width and height explicitly, and where you want them
fitted either to the content or to the viewport. It's the combination of
those requirements that makes all the difference to the options you have
about how to do it.