Re: Need help solving DIV positioning problem

Yesterday, I asked a relatively long-winded question like "what's wrong
with my DIV" but with some supporting documents. Although I was
appreciative to recieve advice to use a table to coerce into position the
items in my "body" area, my goal is to better understand CSS/DIV
positioning issues.

So, after another day of testing alternatives, I have narrowed my
questions to a single one with a supporting link:

###

Why does the P tag (green border) and the H3 tag (blue border) appear to
go under the DIV tag (red border enclosing the image)?

<http://www.mediaweb.com/clients/gss/new_root/Products/PDA_Manage/index-test-03.html>

###

The containing box is outlined, too... (dull red or purple)

Any ideas on this?

I noticed one important thing about the table (yellow border). When the
TABLE width was set at 100%, evidently the calculation resulted in a width
that forced the rightmost portion of the table, permanently off the
browser's viewable area.

So I removed the table width attribute and the table started behaving by
staying inside the containing box, but also being pushed to the right by
the DIV holding the image.

I wonder if a similar calculation issue is occuring with the left side of
the P tag and the H3 tag.

So much for not being long-winded...

Cheers,
DK




On Tue, 24 Jun 2003 17:05:21 +0000, DK Smith wrote:

Hello,

I am experiencing difficulty achieving a certain outcome with positioned
DIV elements and other blocks. I would be most grateful for *any*
assitance.

I also welcome pointers to specific docs, particularly pertinent
sections of documents that might be useful in solving my simple issue.

Most of all, though... I am hoping someone can see what I am trying to
achieve and suggest a direction.

###

This link will take you to a page with pictures that attempt to
illustrate my (probably, simple) problem.

http://www.mediaweb.com/clients/gss/new_root/

Essentially... I am trying to determine the properties for a DIV that
would allow it to push (to the right) some adjacent HTML elements inside
a containing DIV element.

Below is screenshot of a mock-up, I indicate with a blue arrow (and box)
the DIV I would like inset. I want it to push over the H1, the P, and
the subsequent H3 and table. The red boxes are pre-existing DIVs.

Here are a some links to renderings of two different approaches. I have
tried this with an IMG tag alone (with large vspace attribute) as well
as with a DIV tag. I put a red background on the DIV version so it was
clear that a portion of the H3 tag goes underneath it. However, the H3
tag going underneath the image+vspace is also visible on certain
browsers like Mozilla and possibly Safari.

* IMG tag alone
http://www.mediaweb.com/clients/gss/new_root/Products/PDA_Manage/index-img_only.html

* DIV enclosing the IMG
http://www.mediaweb.com/clients/gss/new_root/Products/PDA_Manage/index-div1.html

I believe the correct way to accomplish this is with a surrounding DIV
tag. However I am wondering if I need to tell the H1, H3, P, and TABLE
elements to behave differently... such as overriding some attribute that
will casue them to move over to the right, without appearing to go
underneath the DIV tag.

Thank in
advance..