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.
The stylesheet is here.
Please help if you can - I have but a few days to get this delivered.
Comment