Text running over bottom of DIV ...

[ManChild]

I am kinda new to CSS and undertook a project to big for a noob.
Either way I am almost done and have learned a lot, even in the last
few days. I had an issue where I could not get a border to appear
around the layout, I was advised here that using float would do that.
I re-ordered the HTML a bit, abandoned the float and came up with the
following layout. I had my victory dance today and then realized I had
yet again failed.

I have two columns defined in the css as .menu and .content. They are
both wrapped in a div called page. I applied a background to page and
it has replaced the background color of .menu for now - this seems to
grow and shrink with .menu just fine. If the content of .content is
greater than in length than the content of .menu it runs over the
bottom of the div, kills the border in firefox and can cause the final
div on the page to appear in the incorrect position.

I believe this is because I am using one final float: right; to
position .content -- but I dont know how else to get it where it is
supposed to be. position: relative as far as I understand things
positions an element relative to its actual position on the page, as
this section moves depending on the length of the menu I dont see how I
could ever put an appropriate figure in ...

Check it out in IE to see how it should look, then Firefox to see bit I
am struggling with.

http://dubyadubyadubyadotcom.com/mob...related&kv=219

The stylesheet is here.

http://dubyadubyadubyadotcom.com/mob...stylesheet.css

Please help if you can - I have but a few days to get this delivered.

[ManChild]

Solution found -- unless somebody can explain how to do it without the
float, I'd rather understand alternatives rather than just applying
this.

http://www.positioniseverything.net/easyclearing.html

[me]

"ManChild" <st******@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...

I am kinda new to CSS and undertook a project to big for a noob.
Either way I am almost done and have learned a lot, even in the last
few days. I had an issue where I could not get a border to appear
around the layout, I was advised here that using float would do that.
I re-ordered the HTML a bit, abandoned the float and came up with the
following layout. I had my victory dance today and then realized I had
yet again failed.

I have two columns defined in the css as .menu and .content. They are
both wrapped in a div called page. I applied a background to page and
it has replaced the background color of .menu for now - this seems to
grow and shrink with .menu just fine. If the content of .content is
greater than in length than the content of .menu it runs over the
bottom of the div, kills the border in firefox and can cause the final
div on the page to appear in the incorrect position.

I believe this is because I am using one final float: right; to
position .content -- but I dont know how else to get it where it is
supposed to be. position: relative as far as I understand things
positions an element relative to its actual position on the page, as
this section moves depending on the length of the menu I dont see how I
could ever put an appropriate figure in ...

Check it out in IE to see how it should look, then Firefox to see bit I
am struggling with.

http://dubyadubyadubyadotcom.com/mob...related&kv=219
The stylesheet is here.

http://dubyadubyadubyadotcom.com/mob...stylesheet.css

Please help if you can - I have but a few days to get this delivered.

If I may I'd like to ask why you're mixing tables with divs (not that it's a
sin mind you)? I don't know if this applies to you but one reason I suspect
some people do this is because they don't know how to get a nice 1 pixel
colored border around their tables. No doubt I'll be flamed for suggesting
this in a CSS NG but here goes anyway. This is very old school but it still
works, at least in IE, no doubt it could stand some CSS too. See below for
an example. Ducking back in my hole now. ;-)
Good Luck,
me

<table width="0%" border="0" cellspacing="0" cellpadding="0"
bgcolor="#00D9D9" align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="4"
align="center">
<tr>
<td bgcolor="#FFFFFF" align="center"> Big Business<br>
1000 Any Road <br>
Anywhere, New York 11111<br>
[phone] <br>
</td>
<td bgcolor="#FFFFFF" valign="top" align="center"> Hours: <br>
10 a.m. - 4 p.m. <br>
7 Days a Week, <br>
365 Days a Year &nbsp; </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2" align="center"> E-mail ????? at:
<a href="mailto:??***@aol.com">??***@aol.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

[ManChild]

This was an old HTML app that is slowly being converted over the pure
CSS - the only tables exist within pages where grid style listings of
images appear and to format mixed chunks of textual data and images.
The tables will eventually dissapear as CSS is more widely
adopted/implemented by the browsers and I quit having trouble replacing
them.