Layout issues with my fluid(ish) design on 800x600 or less resolutions?

[jfrancis]

Hi there,

I would like some help if possible.

My site www.cosmosarts.com has the basic layout of navigation on the left, a side bar to the right, with the main content in between. The setup is pretty fluid in that the middle part is positioned as a percentage, and the left and right bars are set to float to the edge of the screen.

When I tried viewing my site in a low resolution of 800x600 (who uses this now?), the right bar hovers over the main content, and although not the end of the world, I would certainly like to learn how to stop this happening. I like that the right bar floats to the right like it does, but when the screen size drops to that level, I would prefer it to only come as close as say 10px of the main content, and then for the screen to become scrollable for the parts that don't fit. Does that make sense?

So, how might I do this while keeping the fluid(ish) nature that I have right now?

I am a beginner at CSS so bare with me :)

Thanks,

Jordan

[felgall]

When you have component parts of the page that all have fixed widths then the narrowest that the page can go before the elements overlap is the combined width of the elements. Most mobile phone browsers will have all three of your columns overlapped because your centre column will be wider than their screen. If you want a fluid layout then at least one of the columns should use a percentage width and have margins set to the widths of the other columns to stop the overlap.

[jfrancis]

Thanks for your prompt reply, Stephen.

I see that the combined width of all my elements is 785px. So in theory, if I could get my layout to tuck up together nicely when the screen narrows, it would just about work. But how do I do this so that when it scales up, I retain the current look? If I set my main content to sit next to the navigation, wouldn't l have a huge gap between the main content and the right bar when viewed on larger than 800 width screens?

Yes, I am confused :)

[curious_george]

As felgall said, percentages. Instead of using specific pixel widths, use a percentage. For instance, if you make your center div have a width of 40%, and give it a margin of lets say 10px, and don't give a width to the two outer divs, then it should not overlap. Since the two outer divs won't have a set width they will float to the edge of the screen and then expand left/right until they are 10px away from the center div. Or, you can give all threeset widths using percentages. For example, you can give your center div a width of 40%, and then your two outer divs can have a percentage of lets say 28%. That will add up to 96%, which leaves an extra 4%, which allows for the default margin/padding of the divs (you can set these to 0 if you want), as well as the vertical scrollbar and borders.

[jfrancis]

Hi Curious_George

Thanks for your advice. I am now playing around with percentages.

You can see the effect of making the main content a % at this link:

www.cosmosarts.com/beta/

This is a duplicate of my site, but where I experiment.

This indeed makes the site better when viewed at 800x600, but it looks worse when viewed at the middle ground of 1024x768 - now text that would normally fit on one line in headlines now takes up 2 lines, making it look less desirable. At this time, I would prefer it to look good at 1024 and above as those using 800x600 are a minority.

How might I find this middle ground I long for? I would be quite happy for the fixed width I have now and 800x600 users to need to scroll right for the odd bit they can't see. How might I do this, rather than the right bar coming all the way across the screen and overlapping?

Thanks for your continuing help. I appreciate it :cool:

[Centauri]

Instead of trying to set a width on content, just specify left and right margins enough to clear the side columns and leave an acceptable gap - the div will automatically fill the available width :#content {background:#fff; line-height:1.5em; margin:10px 185px 10px 190px; padding:8px; text-align:justify; border: 1px solid #505050;}

[jfrancis]

Hi and thanks, Centauri.

Yours is a logical solution. I tried it and yes it does the trick as far as scaling better through the various resolutions. The problem for me is that I prefer the look of the set width I have for the main content, for design purposes, as it looks odd to me when the content is spanning a very wide area, which happens with 1280 and above. It could just be me though, perhaps others prefer the wider look for the content. But, opinions aside - is there a logical solution that keeps the width set, but when the resolution drops, instead of the right bar overlapping, it comes in close to the main bar and then stops - and then the screen simply allows you to scroll over to see it all? My thinking is that a minority use less than 1024 width these days, and I don't want to compromise my site for the minority at the expense of the majority.

Thanks again everyone. This is a very helpful forum :D

[Centauri]

For that, you can set a minimum width on the #wrap div#wrap {background:#f5f8fd; color:#303030; margin: 0; padding:0; min-width:900px;}

[jfrancis]

For that, you can set a minimum width on the #wrap div#wrap {background:#f5f8fd; color:#303030; margin: 0; padding:0; min-width:900px;}

Wow! You know, that was all I really wanted :D Thank you Centauri, and thank you everyone, it is much appreciated.

Kind Regards,

Jordan