I'm trying to change my site (link in sig) to an expandable one to fit the width of a browser. I've accomplished this part already and am satisfied with the result. However, the 3 columns do not extend all the way to the bottom of the page like I want them to.
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/2.php">http://www.tom-wallace.com/2.php</a><!-- m -->
I've removed all the irrelevant code from this page to help with diagnosing the problem.
A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar, as shown here:
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/1.php">http://www.tom-wallace.com/1.php</a><!-- m -->
On the bright side, the problem is identical in IE, Mozilla and Opera, so my hope is that one fix will fix them all.That is a one column layout... take a look at faux columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)True only one column will have content. My current layout already takes advantage of the faux columns idea. The downside is that the center column does not expand to fit the browsers width, which is what I'm trying to accomplish. I don't think faux columns technique allows for that, does it?The effect I'm going for can be seen here:
<!-- m --><a class="postlink" href="http://www.themaninblue.com/">http://www.themaninblue.com/</a><!-- m -->
Try resizing the browser and notice what happens to his content divs.All you have to do is specify the width of the columns in percentages.
PS: THAT SITE IS FREAKIN' BEAUTIFUL
(themaninblue.com)
VALID XHTML ASWELL! HOLY ****!Mmm. I admire those design skills. Very beautiful. Nice coding as well.
Im jealous!A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar
That seems to be related to your .contentcontainer. Drop it to 80% to see what I mean.Here's my attempt at it. I did have to have two container divs to account for the stretchageWow nice job Sam, thanks a lot!No problem, glad to helpI've implemented your CSS into my own design. You can see the result in the link in my sig. The content now expands horizontally to fit the browser as I wanted, and I added a footer div. There's still some error checking I need to do.
IE's lack of support for min-height makes it annoying on pages with very little content (the footer appears too high). I don't know how to fix that other than adding lots of <br /> tags which I don't want to do, or adding a big thick bottom padding on the content, which I also don't want to do. In Mozilla/Opera the min-height CSS works so it's no problem.the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.perhaps you should explore footers? (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->)Originally posted by theuedimaster
the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.
Which version of IE? I'm not seeing it that way in IE6.Thanks for that link Sam, I browse ALA a lot, but have never seen that one. I'm implementing it now and it's working great so far. I have not implemented the javascript part of it yet.
theuedimaster, are you referring to one of the 2 files linked in my original post? I've not fixed those and will just delete them, as I've gone a different route from that idea. Do you see this IE problem on the page linked in my sig?
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/2.php">http://www.tom-wallace.com/2.php</a><!-- m -->
I've removed all the irrelevant code from this page to help with diagnosing the problem.
A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar, as shown here:
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/1.php">http://www.tom-wallace.com/1.php</a><!-- m -->
On the bright side, the problem is identical in IE, Mozilla and Opera, so my hope is that one fix will fix them all.That is a one column layout... take a look at faux columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)True only one column will have content. My current layout already takes advantage of the faux columns idea. The downside is that the center column does not expand to fit the browsers width, which is what I'm trying to accomplish. I don't think faux columns technique allows for that, does it?The effect I'm going for can be seen here:
<!-- m --><a class="postlink" href="http://www.themaninblue.com/">http://www.themaninblue.com/</a><!-- m -->
Try resizing the browser and notice what happens to his content divs.All you have to do is specify the width of the columns in percentages.
PS: THAT SITE IS FREAKIN' BEAUTIFUL
(themaninblue.com)VALID XHTML ASWELL! HOLY ****!Mmm. I admire those design skills. Very beautiful. Nice coding as well.
Im jealous!A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar That seems to be related to your .contentcontainer. Drop it to 80% to see what I mean.Here's my attempt at it. I did have to have two container divs to account for the stretchageWow nice job Sam, thanks a lot!No problem, glad to helpI've implemented your CSS into my own design. You can see the result in the link in my sig. The content now expands horizontally to fit the browser as I wanted, and I added a footer div. There's still some error checking I need to do.
IE's lack of support for min-height makes it annoying on pages with very little content (the footer appears too high). I don't know how to fix that other than adding lots of <br /> tags which I don't want to do, or adding a big thick bottom padding on the content, which I also don't want to do. In Mozilla/Opera the min-height CSS works so it's no problem.the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.perhaps you should explore footers? (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->)Originally posted by theuedimaster
the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.
Which version of IE? I'm not seeing it that way in IE6.Thanks for that link Sam, I browse ALA a lot, but have never seen that one. I'm implementing it now and it's working great so far. I have not implemented the javascript part of it yet.
theuedimaster, are you referring to one of the 2 files linked in my original post? I've not fixed those and will just delete them, as I've gone a different route from that idea. Do you see this IE problem on the page linked in my sig?