Topic: a hopefully simple css positioning floating issue (Page 1 of 1)

Okay, I'm having this issue with CSS that seems simple but isn't turning out to be. I'm working with this piece of crap CMS (clickability's cmPublish - don't friggin use it, tho i know you probably wouldn't even think of it) so the content is generated. What i'm dealing with is a problem of height pushing things out of place. Here's what I'm trying right now, the page setup, from top to bottom and left to right:

1- .Masthead {position: absolute; left: 0px; top: 0px;}
2-.LocBar {position: absolute; width: 770px; height: 16px; left: 0px; top: 132px; background-color: #636163;color: #F9D355; font-size: 10pt;text-indent: 150px;}
3-.LLcol {position: absolute; width: 140px; height: 100%; left: 0px; top: 148px;}
3A-.Main {position: absolute; left: 150px; top: 148px; width: 620; height: auto; clear: both;}
3Aa-.MainCol {width: 370px; height: 350px;}
3Ab-.MainRcol {position: absolute; width: 240px; height: 350px; left: 520px; top: 148px; clear: right;}
3Ac-.MainBcol {width: 620px; height: auto; float: right; clear: both;}

I'm having no luck. What I need to happen is this:

I need the nav bar to take the left - it can use the full 100% height. Then, there's the .MainCol and the .MainRcol - those go side by side, with .MainBcol underneath them both. .MainCol is a set size, while MainRcol varies according to the content. Then, there's MainBcol, which takes the with of both MainCol and MainRcol and fits below them. Can this work?

How much do I depend on CSS to do this? The thing is is that its template design, so CSS is very nice to use for site wide changes...also, when do I float content and when not? How can all of this go together while still assuring that all of my content wont just over run the boundaries when the window is made smaller. See, the thing is, I can't for the life of me figure out how to mix relative CSS with static. Argh.

Please. Any help would be really great. This is taking faaaaar too much time.

Anyone who would like to look at what's going on, please just go to:

stage.www.techworthy.com

use the user name: advice@ozone.com
password: 123ozone

thanks as always all...

if you want to see the whole style sheet its at www.techworthy.com/includes/stylesheet



[This message has been edited by grats42 (edited 11-11-2002).]

I think you can make the whole layout in CSS. That would probably be the bast approach as well since it would then be easy to put info into an allready made template.

I have had a look at it and I almost managed to get it to work as you want it to. You can see my results here, when I get some time tomorrow I'll look into it some more and see if I can figure out a way to solve the problem.

The biggest problem at the moment is that both mainCol and mainRcol have relative positions so when mainRcol has a left-margin of 450px it tries to fit these pixels to the right of mainCol as well, but when that doesn't work it just drops down bellow mainCol. Changing to absolute positions would solve this, but create a lot of other problems so I tried this approach first...

_________________________
"I don't know half of you as well as I should like; and I like less than half of you half as well as you deserve" - Bilbo Baggins (S.R 1401)

I had been using absolute positiong actually, and that's really where the problems came in. The thing is, the content is completely dynamic. If the titles of the news that week come out longer, the page shifts. The thing is, I don't know if this is how its done. I sort of expect that other companies just have a cap on the number of letters in a title and use definite sizing and positioning, right? I'll take a look at what you did..thanks, btw.

Okay, here's a few other quick things I've been wondering about.

1-What is the real deal with using "em"? Is it compatible for IE? Is is calculated as the height of a font or something? - the thing is, I can visualize the distance of 5 or 10 pixels. 1 em? no clue.

2-Floating things - if I wanted several boxes to stack in a row, left to right, would I give them all a float: left and a clear: none? To start a new row...float: left and clear:left? To have it be its own row: float: left and clear: both?

3-Really, seriously, how much do I have to care a/b resolutions below 800x600 and browser compatibility for dinosaurs? I mean, IE 5, Nav 4.7, Opera 5/6?

Well, just to answer these last three questions...

1) Yes, em is the height required to fit all of the glyphs in a given font. In other words, it's a relative measurement--the bigger your font, the bigger the em. I mostly use them for margins and to set up a vertical spacing heirarchy.

2) Pretty much what you said, but "clear:none" is the default, so you don't really have to add it.

3) How much you worry about older browsers/tiny resolutions really depends on how broad of an audience you want to reach. In the case of resolutions, it's very hard to make a site that's going to look good at 640x480 and 1024x768 (or higher)--if you use a liquid layout you're going to end up with very long lines of text, but if you use a non-liquid layout you're going to end up with tons of white space (at higher resolutions). In the end, you have to weigh the advantages and disadvantages and go with what works for you. You might want to check out TheCounter.com for some idea of what people are using in terms of browsers/resolution.

It is working After tweaking it some more I got it to work like I think you want it to work. 'A picture is worth more than a thousand words' so I'll skip the explanation and just post the link - http://www.p-design.net/ozone/grats.html . If you need any help understanding it I'll try to explain

The tutorials/articales on this page are really great if you want to increase your CSS knowledge imo. It is also a nice 'demo' of what can be done using only CSS imo...

_________________________
"I don't know half of you as well as I should like; and I like less than half of you half as well as you deserve" - Bilbo Baggins (S.R 1401)