CSS positioning

[arjunrc]

Hi,
again, please see http://www.pbase.com/arjunrc

On the left you would see a blue box which holds some information I would like to display.
As of now, that CSS box (class "recent_news") uses absolute positioning in CSS.

Problem is that when the browser size is reduced, the box overrites some of the text on the right.

Can you please suggest what sort of positioning I can do to avoid this ?

Please note the following:
a) The box needs to be on the extreme left
b) The box should not result in pushing the rest of the page to the right (which is why I am using absolute - thats all I know now)
c) I tried just float:left without the absolute positioning, but in that case, the thumbnails are pushed to the right.

thanks
arjun

[arjunrc]

ok, I fixed it - converted it to tables.

[alangrant]

When I read your original question I felt it should be possible to do this without tables. I was curious to see if I could do this myself as an exercise in CSS positioning. After playing about a bit I came up with this (the code is still a bit untidy as I haven't put the CSS in a separate style sheet): http://www.pbase.com/alangrant/testlayout

I'm not claiming this way is "better", I just like the idea of using CSS to control layout as far as possible. I also like the way it keeps the "special" thumbnails in the centre of the page.

[arjunrc]

Thanks a lot !
With my knowledge of patchy CSS, I got tired experimenting. So I used a table - but I too landed up using the margin-left tag to make sure my table did not overlap. So its not really that the table solved my problem - it was still the CSS

Now a more serious Q:
The one reason why I did a table was so that later I could add a noresize tag - I hate it when the text starts wrapping around with small browsers.

Right now, in IE, if your reduce the browser window, at worst the 'Quote' comes below my welcome table while in Opera and Mozilla it does not even go to the next line - it retains its position - which is what I like. I can live with it going down in IE, but not wrapping into a small columns when resized.

If you notice in the CSS approach if I resize my browser the text wraps around. So is there anyway in CSS to ensure there is no wrapping ?

regds
arjun

[alangrant]

I think you could probably achieve this by experimenting with the width property. You are trying to avoid the text being "squashed", i.e. you want the width of the area containing the text to stay the same. There are a few places you could do this, with slightly different effects - e.g. wrap your text in a DIV and set the width, set the width for the paragraph itself, or set the width of the whole user description.

I've just found out that my approach doesn't look as good in IE5 (yesterday I was using IE6 and Mozilla). Something to bear in mind when messing around with CSS positioning generally, there are some horrible cross-browser issues.

[arjunrc]

Thanks Alan,
Every time I try and redesign something on my site, I anyway have a tough time trying to keep it looking the same on IE6, Mozilla, Opera not to mention the nightmarish CSS dependencies in the pbase site - a change here could destroy something else .

I completey agree with your CSS observation, In the past couple of months that I've learned CSS, I spent a good amount of time reading great sites like zengarden, eric meyers page, w3c etc and the amount of cross-browser issues they sight is not funny.

Also, yesterday I downloaded opera 7.x and noticed it implements a hacked version of the IE marquee but only horizontal scroll and changes to the marquee in CSS perform differently in IE vs. Opera while Mozilla ignores it all. Hence I eventually landed up using dhtml which seems to work the same across at least the versions Ive tested + seems to not mess up when JS is disabled.

Therefore I've decided that to keep my sanity, I will not check for any browsers besides these. I think almost 98% of my clients/visitors use these browsers. Thank goodness for that !

Now, I wonder how all the sites would look with lynx (remember the text browser that was so common in unix ?)

Even today, I see that the "Date" section of my user comments in opera seem 'squashed' - when I get the time, I need to fix that too, but its not high on my 'to-fix' list.

Thanks again for your help, and sorry for this long response - at times I need to get my redesign frustation out into public

regds
arjun

[alangrant]

Don't worry, I appreciate the need for a good rant now and again! When I first started learning about CSS I loved the idea of separating presentation (CSS) from content (HTML). I still love the idea, but the reality has proved to be frustrating due to dodgy browser implementation.

As well as the sites you mentioned, http://www.positioniseverything.net has some good stuff, especially the "Explorer Exposed!" section which has some real horrors.