CSS Positioning Problem

[simX]

OK, I've been working on this problem for a long time and it's starting to really piss me off. Maybe someone can help me out and relieve me of my misery. I'm trying to create a page with two fixed divs as in this test page.

There's two problems: first, the red div on the left extends past the bottom of the screen even though I explicitly told it to be 100% height. Why the heck is that happening? For some reason this isn't happening in other pages, but it's happening in this reduced version.

The second problem is much more annoying. I'm trying to also get the black div to fix to the page so that it doesn't extend past the right side of the browser window, like the div is doing right now as shown by the black border. However, I really want the red and black divs to be iframes, and this whole positioning screws up if you use iframes. Why? Also note that when the content ends, the black div stops expanding, and the resulting text inside the black div is no longer correctly centered on the right side of the browser window. How do you fix that?

Any help would be really appreciated.

 

[bunkre]

box model

if i'm understanding your issue correctlty, it's because of the border itself: borders and margins extend "outside" the given width of an element. that is to say, your 200 pixel div is actually 204 pixels wide once you add the 2 pixel border on each side. since the divs on the right are aligned at 200 pixels, there is a 4 pixel overlap.

the really frustrating thing is that this is not the case in IEwin becuase they have been intentionally missinterperiting the box model for years!

i HIGHLY recommend reading david zeldman's "designing with web standards". it only like $25 and it's a huge help. it also reads very easily and can later be used for quick reference.

another amazing resource is www.alistaprt.com

hope that's what you meant!