In IE page displays ok however in Gecko divs are whacked. See pdf (<!-- m --><a class="postlink" href="http://www.lcshome.org/ie.pdf">http://www.lcshome.org/ie.pdf</a><!-- m -->) as well as site (<!-- m --><a class="postlink" href="http://www.lcshome.org">http://www.lcshome.org</a><!-- m -->) if anyone has any ideas im all ears. thanksyour site breaks a lot, even as low as 800x600 the right nav jumps down below the center div, and at 640x480 the center div jumps below the left nav... I'd suggest fixing these problems first, and I'd imagine that would fix the remainder of your issues...You have two divs that float left, combine them into single block "leftcolumn" and float just it.
Also see this demo page I made using a three column layout that does not use floats: <!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/ElementSizing.html">www.vladdy.net/Demos/ElementSizing.html</a><!-- w -->
The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet.
Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.Originally posted by Vladdy
You have two divs that float left, combine them into single block "leftcolumn" and float just it.
very good
Originally posted by Vladdy
The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet
1) so do you write device specific CSS?
2) do you personally use position instead of float in a 3 column layout?
Originally posted by Vladdy
Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.
I did not know that but that ranks as one of the most practical pieces of info I've learned this year, excelent info.currently I limit my CSS to "screen,projection" so that handheld devices get unstyled content.
When there is significant amount of handheld users (and their browsers are more compliant) I will start creating handheld stylesheets as well. If I had a project that was geared towards handheld users I would design a handheld specific stylesheet now.
I prefer to use absolute positioning for the 3 column layout. (my homepage has the right column floating, but that is an artifact from an early design intent that I never got to implement and did not have time to change it to absolute positioning.
You can make your image the exact width of your content if you specify position:relative for your content. It will make the child elements of your content use its width as a reference to calculate % width:
<div id="content" style="position:relative">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"mypic" style="width:100%;" />
Just be aware that using this approach the quality of the image will decrease if your original image resolution is low, and it gets streched more than 2-3 times on a big screen.Ok, I have 3 absolutely positioned containers that I'm not all that wild about but I can work with it for now (ok for 800X600 but lots of open real estate in 1024X768). However by going absolute my footer paragraphs now overlap the content column. What I don't understand is why it bumps the bottom of the left column and not the lowest one (on the home page the content column is lower than all others and probably will be on most).
Ok this is weird too, Gecko has the footer paragraphs overlaping all 3 and bumping I don't know what. Not sure why Gecko has decided to render the paragraphs where it did.
You only use absolute positioning for the side columns. Then your footer will follow the center one.
Once again see the demo page I linked for an example. It describes the technique.Ok Sir,
I'm very pleased with the site's style now. I've implemented the two absolutely positioned side bars and the full width content area with margins and setup the body's position and width. This gives me the style I've been longing for (I know you told me that 3 messages ago). However, your probably not going to want to hear this but this layout is incompatible with your CSS menu in that the absolutely positioned ul subs protrude out from the absolutely positioned nav bar. If you revisit my site you'll see what I mean. If I remember correctly child elements inside an absolutely positioned parent are restricted to the parents borders. Anyhoo, I'll work on it tomorrow, hopefully there is a solution, I don't want to ditch the menu. It is by far the easiest to understand and I think requires much less bandwidth as well as less CPU work. I really appreciate what you do here for all of us.hmm... which page are you refering to? I did not see any problems with home page...
Also see this demo page I made using a three column layout that does not use floats: <!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/ElementSizing.html">www.vladdy.net/Demos/ElementSizing.html</a><!-- w -->
The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet.
Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.Originally posted by Vladdy
You have two divs that float left, combine them into single block "leftcolumn" and float just it.
very good
Originally posted by Vladdy
The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet
1) so do you write device specific CSS?
2) do you personally use position instead of float in a 3 column layout?
Originally posted by Vladdy
Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.
I did not know that but that ranks as one of the most practical pieces of info I've learned this year, excelent info.currently I limit my CSS to "screen,projection" so that handheld devices get unstyled content.
When there is significant amount of handheld users (and their browsers are more compliant) I will start creating handheld stylesheets as well. If I had a project that was geared towards handheld users I would design a handheld specific stylesheet now.
I prefer to use absolute positioning for the 3 column layout. (my homepage has the right column floating, but that is an artifact from an early design intent that I never got to implement and did not have time to change it to absolute positioning.
You can make your image the exact width of your content if you specify position:relative for your content. It will make the child elements of your content use its width as a reference to calculate % width:
<div id="content" style="position:relative">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"mypic" style="width:100%;" />
Just be aware that using this approach the quality of the image will decrease if your original image resolution is low, and it gets streched more than 2-3 times on a big screen.Ok, I have 3 absolutely positioned containers that I'm not all that wild about but I can work with it for now (ok for 800X600 but lots of open real estate in 1024X768). However by going absolute my footer paragraphs now overlap the content column. What I don't understand is why it bumps the bottom of the left column and not the lowest one (on the home page the content column is lower than all others and probably will be on most).
Ok this is weird too, Gecko has the footer paragraphs overlaping all 3 and bumping I don't know what. Not sure why Gecko has decided to render the paragraphs where it did.
You only use absolute positioning for the side columns. Then your footer will follow the center one. Once again see the demo page I linked for an example. It describes the technique.Ok Sir,
I'm very pleased with the site's style now. I've implemented the two absolutely positioned side bars and the full width content area with margins and setup the body's position and width. This gives me the style I've been longing for (I know you told me that 3 messages ago). However, your probably not going to want to hear this but this layout is incompatible with your CSS menu in that the absolutely positioned ul subs protrude out from the absolutely positioned nav bar. If you revisit my site you'll see what I mean. If I remember correctly child elements inside an absolutely positioned parent are restricted to the parents borders. Anyhoo, I'll work on it tomorrow, hopefully there is a solution, I don't want to ditch the menu. It is by far the easiest to understand and I think requires much less bandwidth as well as less CPU work. I really appreciate what you do here for all of us.hmm... which page are you refering to? I did not see any problems with home page...