posted
Because I haven't posted enough new topics this week...
I'm having some css problems, and Fahim, the geek that he is, doesn't know enough about css to help. So I turn to you, oh Geeks of HatCrack, for your wisdom.
1. When I have a short entry, it doesn't end until where the left column ends, leaving all sorts of blank space.
2. The left and right columns don't extend to the very bottom. I would prefer either that they did, or that the center column took over that empty real estate.
posted
I just learned this yesterday: Get Firefox. Then within Firefox, open this url. Install the Web Developer Extension. Quit Firefox and relaunch. There should be a row of icons right above the webpage (below the toolbar). One icon is for CSS. Click it, and select "Edit CSS". You can then edit your CSS and the webpage will reflect changes AS YOU EDIT it.
COOLNESS.
Makes it a lot easier to mess around with css.
I'm not sure how to solve your problem. I'm new with css too.
Posts: 1209 | Registered: Dec 2003
| IP: Logged |
posted
The Web Developer Extension's ability to outline block elements is enormously helpful in tracking down where extra space comes from.
Posts: 26071 | Registered: Oct 2003
| IP: Logged |
posted
Solution to 1 is to remove your "clear: both" and it snaps right up.
If you find the solution to 2, let me know because a coworker was asking me the same question yesterday.
Posts: 1209 | Registered: Dec 2003
| IP: Logged |
posted
I don't know of a way to do solution 2 without using tables - which sort of defeats the purpose of a well-designed CSS page in the first place. You could define the size of the divs, I suppose, but that's zero fun.
Posts: 4313 | Registered: Sep 2004
| IP: Logged |
posted
I got the left-hand column to extend to the bottom at www.princeclan.org, but I forgot exactly how I did it. It involves floating the columns, using margins and a repeat-y image to make the columns extend down.
Posts: 26071 | Registered: Oct 2003
| IP: Logged |
posted
This is one of the toughest things to get to work using only CSS. Check www.alistapart.com and do a search for "columns all the way to the bottom" to see some suggestions.
However, the easiest way is usually to make a background image that has your column colors on it and let it repeat down the page. It sounds like cheating and it's trickier to make an expandable page with it, but it works.
Posts: 7790 | Registered: Aug 2000
| IP: Logged |
quote:However, the easiest way is usually to make a background image that has your column colors on it and let it repeat down the page. It sounds like cheating and it's trickier to make an expandable page with it, but it works.
That's the essence of what I did. It's actually not that hard to do, as long as you do the clearing correctly.
It is easier with one than two, though.
Posts: 26071 | Registered: Oct 2003
| IP: Logged |
Yep, have that already, and I use FireFox almost exclusively, which is why I didn't notice the horrible space issue in IE (thanks, erosomniac). I've tried outlining the block elements, and it still didn't help me - probably because I'm not that familiar with either css or divs yet.
Thanks for the comment on deleting clear:both - it's done, and yes, that solves the one major problem in FireFox. IE still looks like crap, of course.
quote:Not sure if all browser support it, but to drop the columns, you should be able to use height: 100%
I did that. Not positive that I did it correctly, of course, but I tried, and that doesn't seem to make a difference.
Chris & Dags, I know I can use a repeating image to bring the two side columns down all the way, but I don't want to. Not trying to be ornery... Chris, thanks for the link. I'll check it out.
Thanks for your suggestions, y'all! Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
Chris, thanks for letting me know. Why am I not surprised?
At the same time, in theory, it should work fine in FireFox, right? Which means that I probably didn't do it properly. As in, I didn't apply it to the right place. *sigh*
Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
Because I don't feel like it. *sigh* I know it's not a good enough reason for, well, probably everyone other than me, but I don't feel like it. I want to see if I can solve this without having to resort to that.
Unfortunately, from the site you linked to, that was their offered solution, so it appears that, if I want those columns going all the way to the bottom, I have no choice but to use images. That is, if I stay with DIVs.
Given the problem with the way it views in IE, it looks like I'll have no choice but to go to tables. I can't fix it - I've tried. With tables, it would be fixed inside of five minutes, plus I'd have the columns going all the way to the bottom, so everything solved. But then the css doesn't work the way it's intended.
If I could resolve the way it looked in IE, then I would probably give in and use images.
What a pain in the butt.
Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
Why do you look familiar, DMat? Is it from Hatrack Writer's Forums? Or somewhere else?
What I've done at the moment is toss the lot into tables because that seemed to be the only way - that I could come up with, at any rate - to fix the stupid IE problem. Nothing else worked, and now, it's at least working properly.
If I could fix that problem without needing a table, I'd give your solution a try, but at the moment, what with tables and all, it's not necessary. Thanks, though. And I'll remember it for the next (?) time. Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
I'm not sure why, you must have me confused with someone. Your site looks fine to me in IE, what exactly is the problem?
Posts: 3 | Registered: Jan 2006
| IP: Logged |
posted
Well, yeah, it looks fine now. The problem it had was that the centre column started where the left column ended, so there was a lot of empty space.
Oh, by the way, Welcome! Are you a long time lurker or only recently found the place?
Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
Well, whatever works I suppose. Thanks for the welcome. I used to post occasionally once upon a time but it's been a while and I had no idea what my old logon was.
Posts: 3 | Registered: Jan 2006
| IP: Logged |
posted
To be honest, I'd rather not have to use tables, but I couldn't find a way to fix that IE display problem. I'm not proficient enough with divs or css, so there may be an obvious solution. I just don't know what it is.
Actually, knowing me, I'll keep plugging away with finding a solution, but on a test subdomain rather than the one I currently have on display.
posted
You can avoid tables by assigning CSS definitions to a container to wrap the whole page in and then give that a background graphic. Float your columns left and right as needed, and use padding and margins for those columns to keep them within the background graphic's lines. No tables, easy to update.
Major drawback: you'd have to have a fixed-width page.
Posts: 7790 | Registered: Aug 2000
| IP: Logged |
posted
You can avoid a fixed-width page by applying a variant of the sliding-door pattern.
Create one div set up to take up the whole page, then put another inside it with height 100% and a relative position set to top 0 right 0. On the first div, set a background that includes the left side virtual column, and on the second div, set a background that includes the right side virtual column.
Absolute position each side column at the appropriate place, and let the center column be in the normal page flow with specified margins, and the page will expand fluidly both vertically and horizontally (though the side columns will stay fixed width, of course).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
Printer-friendly view of this topic
![[Smile]](smile.gif)
I've tried outlining the block elements, and it still didn't help me - probably because I'm not that familiar with either css or divs yet.![[Razz]](tongue.gif)
The problem it had was that the centre column started where the left column ended, so there was a lot of empty space.
