posted
Like Annie, I need a bit of help with web stuff. If you look at my blog, you'll see that I've got a sidebar on the right. Problem is that for some resolutions, the main body intrudes into the sidebar, obscuring part of it. Does anyone here know how I can prevent this? Is it possible to, I dunno, set the width of each as a percentage of the page or sommat? I've googled it, but I can't really make sense of the info I found. If anyone can explain it to me in terms I'll understand, I'll be most grateful.
Posts: 2443 | Registered: Apr 2002
| IP: Logged |
posted
It's pretty simple. You've got the content id set to be 70% of the width, and the links id set to be 200px. Sometimes those add up to more than 100%. Normally, this would result in the page overflowing, except for where you have the links id conceptually anchored to: the right side (this is indicated by float: right).
Which results in overlap at screen resolutions where 70% + 200px is greater than the width.
You have few options for "fixing" it, actually, with the way your page is laid out now. Well, sort of. If Internet Explorer supported standards well, I'd say just put a min-width on the body for the value where 30% would equal 200px. That way, there would never be any overlap, though if one made the page too small one would have to scroll. Of course, IE doesn't support min-width, so scratch that (you can still do it for other people, but its not really a solution).
You could always set the links id to take up a certain percentage of your screen (less than or equal to 30). While this would solve that problem, it would result in the page looking considerably less elegant at higher widths. As the trend for screen size is bigger and bigger, I'd avoid this.
Another thing is you could make the links div a child of the content div, give it a relative positioning and set it to position itself right: -200px. That should ensure it gets anchored to the right side of the content rather than the right side of the screen, meaning it will never overlap with the content. This is the most working solution of the lot, but requires more fiddling and testing to make sure it works on all browsers.
So yeah, those are your basic options if you want to keep the code almost entirely the same.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Go with an assumption of 800x600 for the page, then use CSS to define static DIVs for the two columns. *shrug* That's what I call gestapo design. Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
Thanks, fugu! And Tom, even though I'm not going to listen to you. I think I'll try the third suggestion and see if I can get it to work. Will probably be back with more silly questions later.
Oh, and by the way:
quote:You could always set the links id to take up a certain percentage of your screen (less than or equal to 30). While this would solve that problem, it would result in the page looking considerably less elegant at higher widths. As the trend for screen size is bigger and bigger, I'd avoid this.
Less elegant in what way?
Posts: 2443 | Registered: Apr 2002
| IP: Logged |
posted
Your links column would start to distort. Basically, it would look weird, as the text got more and more strung out with a wider and wider window. And it would, of course, also look weird as you reached smaller and smaller resolutions as wel,l as the text started to stack in smaller and smaller line-lengths.
Actually, I thought of a variation on the second one: change the current div to the percentage thing, then create an inner div with a fixed width of 200px . . . no, that would create a very similar problem to what is happening now.
posted
Well, the best solution is the min-width thing. Except IE doesn't support that. But yeah, the position relative one is best, otherwise.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
Printer-friendly view of this topic
![[Eek!]](eek.gif)
![[Big Grin]](biggrin.gif)
![[Smile]](smile.gif)
![[Wink]](wink.gif)
![[Razz]](tongue.gif)
I think I'll try the third suggestion and see if I can get it to work. Will probably be back with more silly questions later.
