one fixed column, two elastic depending on screen size 2

[sailingfree]

Hi

I'm discovering the term 'elastic' but haven't got my head around em yet. I'm still in px mode!

I'm designing a template for a site that has a small column on the left (100px perhaps?) that displays a logo only when seen in larger screen res than 800x600, but want the main content screen to be fixed and with the possibility of a third cloumn that can also be seen when in 800x600. Ideally I'd like the main content screen to be centered when all three columns are seen.

So to reiterate, a main content screen and a right-hand column for extras must be seen when in 800x600 but a third column, on the left, is also visible when in any resolution higher than 800x600.

Do I use CSS to define the three columns using em and, if so, what is the recommended measurements I should be using? Should the first column be a minus em measurement?

Confused!!!

 

[Vragabond]

AFAIK, elastic refers to em based layouts, however, you seem to be talking about a fluid one. Let's review.

Fixed layout has pixeled containers making it the same size regardless of the browser's screen resolution or font size. Consequenlty, there are a lot of problems with fixed layouts breaking when people enlarge the font size or having too big/small screens for the site.

Fluid layout is one that defines its sizes in percentages, thus successfully eliminating the problem of not fitting the screen or being too small for a screen. Fluid designs will scale nicely on all the screens and will probably hold their own pretty good with different font sizes -- the design might get a bit broken, but the information will be readable.

Elastic designs are the ones that are based on ems, that is, relative width of one m character in the currently selected font. Elastic designs will maintain perfect look during all the font changes, but they will completely disregard the screen sizes -- if the font is too large, then the site will require scrolling.

Your design seems a bit unintuitive, since most of the websites read from left to right, top to bottom. Your left seems to be just an eye candy with right and center as the important ones. You would achieve the expected result with floating right and center column to the right and giving them percentage width. The remaining width of the viewport would exist on the left side and given a bigger screen, this remains would be larger and would be able to show your logo. Something to this extent. Please post further specific questions if you get confused again while implementing the design.

 

[sailingfree]

Hi Vragabond,

Firstly thank you for clearing this up for me. Very clearly explained.

I think the best thing is for me to post up the url of the site under construction with a little explanation.

http://www.followtheboat.com/newftb

As you can see I have a central table, which I have kept the border on for you to see. I want this table to be viewed on all screen settings, and since it is set to 768px wide, this should be ok.

However there is a rowspan=2 column on the extreme left of the table which contains the logo in a layer. It is this layer I would like to keep outside of the table, so it may only be seen when in screen res higher than 800x600.

At the moment the layer that contains the logo has to be 150px wide in order to contain the image, but this also forces the width of the column to be 150px wide. I only want this to be 1px wide. Or, even better, to put the layer outside the table altogether.

How can I get this layer to float outside of the table and not affect the column it is contained in? Or is there an alternative I have completely missed?

I'm working on the site at the moment so some of what I have mentioned may change by the time you view it, but you should get an idea of what I am talking about.

Thanks for your time!

 

[sailingfree]

I've just identified another problem. The menu sits in the left column and therefore loads up first. Since this has a lot of content I would like it to load up last so spiders view the page content before the menu.

Perhaps I should completely scrap the table and JUST use layers?

 

[sailingfree]

OK, I've sorted it. No table, all layer, a main layer that's 100% wide and high and then a background image for that layer positioned to the left.

Think that should do it.