Topic: fluid width in one column and also 100% height.

I present to you a page that has a little "issue". I'm trying to get the map div (#map) to fill the width of the parent div (#innerContentColumn). It needs to be fluid so resizing isn't an issue. But everything I've tried is just ALMOST enough, but not quite. I'm sure I'm close, but....

CSS is in simple.css and complex.css

Help? :-(

BTW - I'm already aware of the IE issue with the left side border. I'll figure that out later.

Hmm that page is breaking for me but usually if I want an inner div to fit a parent I just set the margins to 0 and it fills it.



.:[ Never resist a perfect moment ]:.

Um...don't set its width to 400px and it will expand.

reisio - I was having a problem getting it to display at all, so that's why the 400px was put in there. I did get it to expand, but I'm still having an issue with getting it to do height: 100%; I'm thinking I'm just going to have to hard code it and leave it that way.

Haha, I *love* the copyright notice. What is it you're doing here? It looks like you've found a way to make the google maps API take an address instead of just coordinates?

It looks like when you get too wide, the map doesn't fill in all the way on the right side.

100% height with CSS has always been difficult, and is generally faked with background images. You might consider scripting it.


 

Actually, I do feed the map latitude & longitude coordinates. I use a SOAP call to geocoder.us to convert a street address to coordinates, and then plot the map. There are a ton of things that you don't see yet.

I was hoping I wouldn't have to script it, but it looks like I might have to.

Ah okay - I'll get back to this later tonight or tomorrow when I get up.

Huh, I thought I'd post this already but apparently not...

Is the XML declaration important to you? Do you want this to work in IE?

(Edited by reisio on 08-23-2005 03:07)

Yeah, the XML declaration is important. I'd prefer to serve as XHTML 1.1 as application/xhtml+xml

I've noticed, while working on this, that if I do something like

body,html {height: 100%;}
#map {height: 100%;}

it will work fine IF there is no DOCTYPE defined. As soon as I define either an XHTML 1.0 or XHTML 1.1 DOCTYPE, it no longer works, and I end up with a div that's two pixels high (top & bottom border).

Ideas? I've been working on this for a while. I'd prefer to use a DOCTYPE.



(Edited by Pugzly on 08-23-2005 20:30)