Anyone out there with enough CSS savvy to explain why my main page looks like crap if I don’t have a lot of entries in my weblog? If the links column is longer than the content column, the links ease into the left side. I’ve tried playing with the “height:100%” style, but that only seems to work in IE6. In Netscape/Mozilla and Opera it’s broken. I’m sure the browsers aren’t broken, but why does the code not work quite right? I’m not going to use tables like 1996 to align my page content…
Help? Anyone?
What I would do, is rather than use a percentage, set the entries portion of your page in exact pixels. And don’t do it in CSS, just over-ride the CSS nesting by putting a
div style=”position:absolute;
height:1500px”
(whatever CSS references there are concerning the entries on your index page)
/div
Your height should be however many pixels it takes to constantly maintain the links and such from defaulting down below the entries on the index page.
This isn’t the best way to do it, but it’s a quick fix until a CSS whiz can be located. And of course, without seeing the CSS code in your particular style of template, it might be difficult to get someone who could advise you on it.
Anyway, much luck with it.
Although that starts out sounding good (I do however hate to specify anything in pixels), it runs into an issue with overflow. When I post many long things, 1500 pixels may not be enough. If I set it to something absurd like 5000 pixels, it should always be enough, but then the links on the bottom of the page end up separated from the main page by vast areas of white space. White space bad.
Not to mention, resolution-dependence bad. 🙂
I like setting things to relative sizes, since most people use IE (silly twits) and IE won’t resize fonts if they are set to pixel-heights and I think the reader has the right to change the size of the fonts to suit them. So, that carries over to my basic approach to site building even when fonts aren’t directly involved.
BTW, the CSS is at http://andysocial.com/blue.css for my page.
Ok, have you tried floating your links to the right?
In your CSS, try adding the code in bold:
#links { float:right; width:30%; background:#fff;… etc. }
I don’t know if it’ll work, but the reason that your links panel is migrating left is because by default, left is where it starts from. Since your #content is floated left, your links default when the content runs out. Floating the #links right might just do the trick. Adjust the width percentage in order to accomodate the browser, 30% is just a guess on my part.
Much luck,
Dave
Looks right to me. Forgot about floats…