What's the current state of your attempts. That looks like a very simple CSS layout to acheive -- something I do relatively often. I'm no longer sure what problem you're trying to solve so I can't give my suggested solution yet....
My current state is to go back to tables - and they're working perfectly.
It's not imperative that this page uses a DIV layout. I was just making an interface to help me code some backend stuff - the designers will be making the real template. I was just trying to make a DIV layout to see if I could and what the difficulties were in doing so.
That said, anyone who can show me the light will be my friend for at least the next 25 minutes.
(The latter moves the footer to the base of the viewport. Neither expand the links/body to the full availible height of the browser unless one or the other have sufficient content. Do so tends to require tricks that won't be safe across browsers, especially as old as NS4.x's.
There are several possible tweaks to it, but before I do those, I want to see if this is on the right track....
Wow! Very impressive. That's almost exactly what I was looking for. The only problem with the first page (the second, with the footer at the bottom, is cool but not necessary), is that the links div can shrink smaller than the content. If you make your window very small, you'll see ::LINKS:: start to overlap into the ::BODY:: div. While this is very minor, it will be a bigger problem when the links are quite a bit wider.
It's a very small thing for sure, but I want a div layout that can be 100% as powerful as a table layout (right now you're 99%+ )
Thanks again
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Yup I thought that would be one of your concerns, ok give me a few minutes for some different options.
One question, how important is the ability for uses to change font-size to you? versus how important is pixel level accuracy across browsers?
[EDIT: ON]
OK, I've revised the first display at the first URL. I reserve
a fixed width (in em's not percent) for the links column, while letting the body expand the rest of the way. This is one of my preferred styles as you often don't want the navlinks to continually expand. It does slightly make things less good at very narrow windows, but as from web developers seeing how narrow can your design get, not (m)any users seem to really do that.
[EDIT: OFF]
Last edited by nielsene on Fri Jul 15, 2005 1:23 pm, edited 1 time in total.
pickle wrote:
It's a very small thing for sure, but I want a div layout that can be 100% as powerful as a table layout (right now you're 99%+ )
Thanks again
One minor point: I personally think that div layouts are vastly more powerful than table layouts, but there is about a very small area where they can't directly match a table layout...
Ie if a Table Layout can doo 100 "things" a div layout can do 200 "things", 98 of which or so are from the list of table things and 102 are unique to div, etc
Good div layout can be much, much lighter weight and vastly more accessible/maintainable in my opinion, but you do lose one or two specific layout solutions.
Update: I've integrated the css into my page and it works beautifully. In an ideal world, though, I'd like the menu div to expand to the same height as the main content div. This is a perk I'm willing to go without, but if you know how to do this, great!
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
pickle wrote:Update: I've integrated the css into my page and it works beautifully. In an ideal world, though, I'd like the menu div to expand to the same height as the main content div. This is a perk I'm willing to go without, but if you know how to do this, great!
The first one simply has you create a vertically tile-able background that you put on the body element. (Your header/footer's image will hide it.) Thus generating a fake background that looks like the two columns. The second one uses the same trick, but adapts it for more flexibility and more columns if needed.
I had meant to include it in the mockup I did, but didn't get too it. I'm sorry about that. Let me know if you have trouble with the referenced articles and I'll try to play some more.