help with div positioning

[myatia]

Hi,

I'm almost done with my layout, but I can't figure out one thing. On the following page, I want the red "e-quote" button in the right column to fall below the "News & Events" box.

http://www.eccentrix.com/members/mistyjgarrick/cgisite/index_xhtml.html

I've played around with putting it in its own div, but it just stays stuck at the top. Does anyone have any ideas?

Thanks,

Misty

 

[Vragabond]

Your entire site is absolutely positioned. Since absolute positioning is taken out of the normal flow of document, this means your document has little to no flow. If you put a div with no positioning it will placed at the end of the element that was not positioned absolutely and not floated. I guess that is where you have it. If you want to change that you can either:

1. Redesign the page so that it uses very little to none absolute positioning. RECOMMENDED.

2. Absolutely position the button so that it is where you want it. I know this is sometimes not possible because you want it at the bottom of (after) another element but that is unfortunately not possible with absolute positioning.

 

[myatia]

Can you recommend any starting points on redesigning this particular layout without any absolute positioning?

Misty

 

[Vragabond]

1. Until (including) top menu all positioning can be avoided. This is a simple normal flow of the document. Simply remove the positioning and you should be ok. Make sure you correct (that is, mostly delete) the positions as well (left, right, top, bottom).

2. Text will be your main part.

3. Float the three parts on the left. This will give you the desired effect.

4. For the news and updates, I guess an absolutely positioned element would be the easiest. Make sure you have a container for main with the background. This container should have the text as relatively positioned element, left menu as floated and right news part as absolute positioned. Inside the right news part, put both news and the bottom. That will make the bottom hover at the bottom.

This is probably the simplest and best way to do it.

 

[myatia]

Thanks so much for your help. I took out the absolute positioning and I'm getting a lot closer:

http://www.eccentrix.com/members/mistyjgarrick/cgisite/non_absolute.html

However, some new issues have popped up:

* The curve image behind E-Quote and Login is in a layer which is floated to the left. The main body copy text is wrapping around the rectangular JPG shape of the curve image -- that's why the 3 images are stacking instead of displaying horizontally in a line. Is there any way to override the wrapping of text around the floated left column element?

* I've set the margins on the body and topbar elements to 0. However, in Firefox, the top margin is about 10 pixels (top margin is 0 in IE). What do I need to do to remove the top margin?

* Also in Firefox (not IE) there's about a 30px gap between the top navigation (service, contact, etc.) and the main body of the page. I believe I have the margins on all relevant elements set to 0. What gives?

If Vragabond or anyone else has any advice, I'd really appreciate it!

Thanks,

Misty