Need help choosing a Page Layout

TomTees · October 9, 2010, 5:21pm

I’m starting to get REALLY confused about which page layout scheme to choose…

This website http://www.pmob.co.uk has some really interesting ideas, but it is overwhelming the more I read.

For instance, which would you choose one of these over the other…

Fixed-width Main Column vs Fluid Layout??
Fixed-width Columns vs. Fluid Columns??
What to do with the Footer?

I’m just looking for a simple 3-column layout, where the Left Column will hold navigation links, the Center Column will hold content, and the Right Column will hold selected items of interest.

This looks like a good one…

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

But like I said, the more I read, the more confused I get about which way to go?!

Can someone shed some wisdom on this gigantic topic???

Thanks,

TomTees

happyoink · October 11, 2010, 2:41pm

Sure, but that isn’t necessarily best for users.

PaulOB · October 11, 2010, 8:06am

TomTees:

Paul,

See my questions in RED below…


Float three columns of  appropriate width:

/* left column*/
#sidebar {
    float:left;
    width:150px;
    min-height:100px;
    margin:0 0 0 5px;  [COLOR=Red]Why is this here?[/COLOR]
    display:inline;/* ie6 double margin fix */  [COLOR=Red]What does this do?[/COLOR]
}

/* center column */
#main {
    float:left;
    width:630px;
    min-height:100px;
    margin:0 0 0 15px;  [COLOR=Red]Why is this here?[/COLOR]
    padding:1px 0;/* stop margin  collapse*/  [COLOR=Red]What does this do?[/COLOR]
}

/* right column*/
#secondary {
    float:right;  [COLOR=Red]Could you do a Float: Left ??[/COLOR]
    width:150px;
    margin:0 5px 0 0;  [COLOR=Red]Why is this here?[/COLOR]
    display:inline;/* ie6 double margin fix */  [COLOR=Red]What does this do?[/COLOR]
    [COLOR=Red]Why don't you have a "min-height: 100px;" here as well?[/COLOR]
}

margin:0 0 0 15px; Why is this here? -

The margin was there just to move the columns away from the edges so that the text didn’t hug the borders. I could have made the column widths exact and then I would have needed to add padding on inner elements instead if I didn’t want the text to touch the borders.

margin:0 0 0 15px; [COLOR=Red]Why is this here?

[/COLOR]Same as above and just to move the middle column into the middle with a bit of a gutter.

I made all the columns slightly smaller than they needed to be and then spaced them out a bit with margins. You could increase the widths of the columns to 160 - 640 -160 if you wanted them to match the outers dimensions exactly.

How did you create that?

I created in Adobe Fireworks in abut 10 seconds but any paint package should be capable of creating it quite easily. However, you should invest in a suitable package as you need to make sure that images you use are optimised for the web and not some massive bitmap. There are plenty of free ones about but you may want to ask in the graphics forum for the best of type.

Is there a way to just make the columns the full height of the browser window? (Sorta like you did in your “Sticky Footer Tutorial”?)

The sticky footer code would automatically give you the full height columns because of the repeating image that we are using on #outer.

If you want a sticky footer then just follow the sticky footer code in the FAQ. If you want 100% high columns without a footer then you just set the outer to min-height:100% and html and body to height:100%. There is already a faq about hundred percent height that explains this in more detail.

I guess this is one advantage of using Floats over Absolute Positioning, right?

Yes, you can’t have a footer span more than one column in an absolute layout.

I guess I’m not sure how all of those elements relate to your simple example?!

See the FAQ on resets.

Most elements have default margin and padding and you need to control them explicitly because they vary between browsers considerably.
For example If I had not reduced the margins and padding on html and body then the layout would be too big because 100% + margin + padding = too big.

Setting a few defaults before you start helps level the playing field but no need to go mad.

ralphm · October 10, 2010, 10:11pm

Yes, that was an interesting page. Other old pages seem to have survived. I’m not sure if these are as overt as the other one, but they still seem to suggest using floats for columns in CSS1:

http://www.w3.org/Style/CSS/Test/CSS1/20070302/sec5526b.htm
http://www.w3.org/Style/CSS/Test/CSS1/20070302/sec5526c.htm

system · October 10, 2010, 12:07pm

for ie6/7 and ff2 there is are some hacks to apply to get the inline-block behaviour, hacks you’re already using

the whitespace appearing when making a block element an inline-block element it’s actually quite easy to manage, you don’t have to use font-size:0

but then again, that’s only when you are bothered by the whitespace and needing such a thing to happen. there are cases when you do and cases when you don’t

and as you can imagine, i have a different opinion regarding floats floats are an exception becaming a rule. not a very good strategy. the same thing happend with tables for layout. not that i imply an equivalence between them

also, floats are not at all a logic or natural choice, even more when sometimes combined with using negative margins. i was expecting the OP from this thread to show an actual learning interest to make my case. if not, i will anyway, just to hear your opinion on my solution. i think it will be quite interesting

system · October 10, 2010, 3:42am

I don’t see why it should.

Once I have a final mockup I can then make the layout fixed, fluid or a mxture of both.

TomTees · October 10, 2010, 3:52am

Are either of these two examples current enough to use?

[INDENT]http://www.pmob.co.uk/temp/3colfixedtest_4.htm

http://www.pmob.co.uk/temp/3colcentred_2a.htm
[/INDENT]

I guess that is what I am looking for, although I thought Paul’s explanation on the first one was very confusing with how the Footer works and all?!

(Could be it is late and I’m exhausted too…)

TomTees

TomTees · October 9, 2010, 6:34pm

Hi Paul!

Sorry for my “meaning of life” questions!! But this is just like me with Object-Oriented Design… I don’t know where you begin?!

This summer I sketched out how I think I want my website to look, and there are probably many ways it can be accomplished, but I’m not certain of the best approach?!

Since my sketches are in a paper notebook, it’s hard just send them over online, but I can do my best to let you know what I was thinking about.

Would that help you to help me?

If you have a mainly text site then you can get away with all fluid columns because there will be no large elements holding the page up. If you have a graphic site that is displaying large pictures then you can’t really squeeze them into small columns and an elastic (min-max width) or fixed site may be better.

Look at the content you want to present and decide how best that content will be presented and then take it from there.

Well, if I describe things here, can you better help out?

I prefer elastic sites that have a min and max range that get neither too big or too small but of course if you wanted then to view on a mobile then the min-width would be a problem.

** Total Side Question **
When people design for cell-phones and PDAs and what-not, do they usually just build two websites?

I prefer the side colums to be a fixed width in a 3 column site and for the middle column to be fluid. I see too many sites with fluid side columns that just get too small for the content they hold and break very quickly.

Agreed.

So you should first decide what the content is that you are presenting. Code your basic html structure with the main content sections defined so that you have somewhere to start and something to mould. Then you can decide how the content will look although you may need to change the html a little you should really look at the html as the structure of your page and not as a means to styling.

If you have time and are interested, I can describe things here.

Lastly keep it simple.

If you don’t need equalising columns then don’t use them. Use something simpler. If you don’t really need a sticky footer then don’t use one just for the sake of it.

Simple, straight forward designs with clean code usually work the best.

That’s good to know!

TomTees

system · October 10, 2010, 2:45pm

your layout is impressive, an expression of what a man can do using his brain. and so are other examples i’ve encountered here, at SP. not trying to take anything from those, but if the initial intent was the use of floats for columnar layout, there is something wrong with this picture.

traditionally, columnar layout meas just that: columns. floats for columnar layout is like trying to make a newspaper layout from articles cuted down (floated) and then glued over in columns

i’m sure w3c suggesting floats for layout was an uninspired choice to overcome the wrong use of tables for layout. even as a lesser wrong, it’s still a defected logic. even when they do the job. so did tables

pushing floats to improve tables layout doesn’t say floats are for columnar layout, sorry maybe i’m reading less and you’re reading more to it, that’s it, but to me, the very definition of the word float contradicts that.

i will probably start a thread tomorrow to see examples and opinions in action, and i’ll provide in it my proposed markup using inline-block.

cheesedude · October 9, 2010, 6:22pm

I use fixed width layouts on all my sites. Then I have a reasonably good idea that the site is going to display the same across all browsers and across all window sizes.

Sometimes it is best to keep it simple. A fixed width layout is the simplest way to go in my opinion.

PaulOB · October 10, 2010, 1:40pm

Trying not to stray too far off topic here but contrary to popular belief floats were originally developed with the express intention of creating columnar layouts and in this thread I linked to the test page on the w3c from about 11 years ago that is showing examples of columnar layouts using floats. Unfortunately in the w3c upgrade the page has gone missing which is a shame but the text that went with the columns example was as follows.

By using floating DIV elements, many of the HTML pages now using tables can be simplified and accessibility improved.

It was obviously clear that from the very start that floats were indeed the tool to be used for columnar layout and have done this job and many other jobs very well also. You may have read over the years that floats were never designed for columnar layout but the example from the w3c begs to differ and so do some of the authors of the original css21 draft.

Floats are not perfect but neither is any other method and we will probably have to wait a while longer before a perfect solution exists.

As I said above I agree that inline-block is a good method for columns (and I was one of the first to use it as such) but inline-block is not without its own set of problems and indeed debugging them in the forums proved quite awkward at times.

However, I do see them as a genuine alternative to floats in some situations and can be made to work well.

The way I look at it is that css has a collection of tools that you can use and you use those tools to make your layout to the best of your abilities.

There’s nothing wrong with using floats and negative margins when the situation calls for it but like anything else if you are overusing (or abusing) them then you need to re-think what you are doing.

r ie6/7 and ff2 there is are some hacks to apply to get the inline-block behaviour, hacks you’re already using

There were no hacks at all in this layout that I just put up. Unless you count the display:inline but then that is valid css and doesn’t need to be provided in an extra rule.

PaulOB · October 9, 2010, 6:21pm

Well, the question should really be the other way around to start with and your content would usually decide the best approach for you.

If you have a mainly text site then you can get away with all fluid columns because there will be no large elements holding the page up. If you have a graphic site that is displaying large pictures then you can’t really squeeze them into small columns and an elastic (min-max width) or fixed site may be better.

Look at the content you want to present and decide how best that content will be presented and then take it from there.

I prefer elastic sites that have a min and max range that get neither too big or too small but of course if you wanted then to view on a mobile then the min-width would be a problem.

I prefer the side colums to be a fixed width in a 3 column site and for the middle column to be fluid. I see too many sites with fluid side columns that just get too small for the content they hold and break very quickly.

So you should first decide what the content is that you are presenting. Code your basic html structure with the main content sections defined so that you have somewhere to start and something to mould. Then you can decide how the content will look although you may need to change the html a little you should really look at the html as the structure of your page and not as a means to styling.

Lastly keep it simple.

If you don’t need equalising columns then don’t use them. Use something simpler. If you don’t really need a sticky footer then don’t use one just for the sake of it.

Simple, straight forward designs with clean code usually work the best.

TomTees · October 9, 2010, 8:50pm

So I’m building an e-commerce site to sell T-shirts.

I want to have a header across the top similar to like Amazon.com has with a Search Bar and a button for your Wish List and Shopping Cart. There will also be the OURSTORE.com logo and a link to sign in.

Below that…

There needs to be a left column which has different “Categories” of T-shirts. It should be fixed-width, but I’m not sure if it needs to extend down to the footer??

In the center, will be a “gallery” of thumbnails of different T-shirt designs. I’m a little unsure here what would be best. Most similar sites that I’ve seen, allow you to change how many thumbnails are displayed per page. Although I think they set the number per row to maybe 3 or 4. Changing the “images per page” just determines how far down the list goes. (This relates back to my left column and whether or not it needs to match up with the main column?!)

On the right side, I probably want another column that is fixed-width and that has special items, promotions, etc. (Again, I’m not sure if that needs to extends down with the main column. What would look better?)

At the bottom would be a footer, that should probably go all the way across the screen.

Questions:

1.) It would seem best to float the right and left columns to the edge, but maybe I want to use absolute positioning?

2.) Would it be better to have a fixed middle column or let it be fluid?

3.) Would it look better to have my right and left columns extends down in synch with the center column which will probably be the tallest?

4.) I guess I’m not seeing why I would want to use a fixed-width layout if the center column could be fluid and allow the number of pictures in a row to change to fit the width?

TomTees

PaulOB · October 10, 2010, 11:17am

Yes inline-block is a good method for creating columns but at present actually has more bugs than the floated columns methods.

IE6/7 and firefox 2 and under don’t natively understand inline-block so you have to hack to start with.

Then there is the nasty issue of the white space text-node between inline elements and this is very awkward to kill cross browser and indeed in safari the only solution is to set the font:size of the parent wrapper to zero which effectively kills inheritance for em fonts and sizing.

Floating all columns is much less trouble free than this especially in a fixed width layout.

I never saw float clearing as an issue but just something that needs to be done because of the way floats work

system · October 10, 2010, 11:00am

it seems this 3col layout is having an increase demand these days there are at least 3 threads about it right now in the css forum.

but this layout can also be done w/o floats, by using the way divs stack and the inline-block display for some of them and be compatible even with ie. this way you don’t have to “fix” the floats you’ve used in the first place. to me, using floats and clearing them sounds like you are making a mistake only to have something to fix later on

PaulOB · October 10, 2010, 10:14am

Hi,

The sticky footer technique is explained in the Faq and is used in a lot of my demos you may want to read up on it a bit to understand how it works and what it does. It is not a normal footer but a footer that sticks to the bottom of the viewport when there is little page content but once the page content goes below the fold then the footer stay at the end of the content and not at the bottom of the viewport.

If you don’t need this type of footer then just use a normal approach and lose the complexity needed.

[COLOR=Blue] Fixed-width

White Background outside of the margins of the Fixed-Width portion
3 Columns
Left and Right Columns Fixed-Width
Center Column Fixed-Width
Each Column extends down to match Tallest Column
Footer below Tallest Column[/COLOR]

Simplest example

Fixed width

Decide on the width and then create a wrapper and use margin:auto to center it horizontally in the viewport.


#outer{width:960px;margin:auto}

3 columns

Float three columns of appropriate width:


/* left column*/
#sidebar {
    float:left;
    width:150px;
    min-height:100px;
    margin:0 0 0 5px;
    display:inline;/* ie6 double margin fix */
}
/* center column */
#main {
    float:left;
    width:630px;
    min-height:100px;
    margin:0 0 0 15px;
    padding:1px 0;/* stop margin  collapse*/
}
/* right column*/
#secondary {
    float:right;
    width:150px;
    margin:0 5px 0 0;
    display:inline;/* ie6 double margin fix */
}

The min-height was there just in case you didn’t have any content in one of the columns otherwise the floats would move across and fill the space.

3)[COLOR=Blue]- Each Column extends down to match Tallest Column

[COLOR=Black]Create a background image that creates the illusion of 3 columns and repeat it on the outer.

Just rub it our with a background color in places where you may not want it to show such as the header and footer.[/COLOR]

4)[/COLOR][COLOR=Blue]- Footer below Tallest Column

[COLOR=Black]Just clear the floats and the footer will sit there as required.


#footer {
    clear:both;
    width:100&#37;;
    text-align:center;
    background:blue;/*rub out background image on #outer */
    border-top:1px solid #333;
    border-bottom:1px solid #333;
}

Remember to take care of default margin and padding iossues.


html, body, table {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
object, iframe, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
    margin: 0;
    padding: 0;
}
ol, ul {list-style: none;}
/* end reset styles */
a img, img {border:none}/* remove borders from linked images*/
a:link {}/* set as appropriate*/
a:visited {}
a:hover {}
a:focus {}
a:active {}
input, textarea, select {
    font-family:Arial; /*set font-family for IE*/
    vertical-align:middle;
}
h1, h2, h3, h4, h5, h6 {margin:0 0 1em}
/* start main structure */

I’ve tried to keep it straight forward so that you can follow what’s going on but if you have any questions then just shout.
[/COLOR][/COLOR]

dresden_phoenix · October 9, 2010, 7:11pm

Paul Is generally right about text sites. But remember the human eye has dificulty following lines that are more than a particular width . that why column’s are used in print. None the less the content will best determine the layout.

happyoink · October 11, 2010, 3:19pm

Seeing that you’re working on an e-commerce site, I would suggest you take into account the fact that your customers have varying browsing needs. So I would say to choose the best layout technique that will cater to all of your customers’ in terms of browsing needs. For example, the ability to change font size without breaking the layout. Fixed layouts aren’t going to allow for that. I suggest using constrained EM based layouts or % based (or even a hybrid layout), but use EMs for font sizing. It’s more user friendly.

Using the site you linked to as an example, I generally browse with the browser base font size set at the default which is 16px in Chrome. But when I changed it to 24px (just to check to see if the font size on the site would change in accordance or not), the font size on the site stayed the same. That’s not a good thing especially in e-commerce because some users are practically half blind due to age or eye conditions. That sort of thing could put some users off and lose you money in terms of sales, which would be more disastrous for small businesses than it would be for large companies with a trusted brand like Amazon. People are not that forgiving online. So whilst the above is an example, it applies more often than you think. So concentrate on usability and accessibility for now rather than worrying about which layout to use, because these usability/accessibility issues, along with the type of content you have, will determine which layout techniques you need to use.

Also, you might find it handy to buy this book: CSS: The Missing Manual because it’s awesome. I’d never be without it.

Hope that helps.

PaulOB · October 11, 2010, 9:34am

/* right column*/
#secondary {
float:right; Could you do a Float: Left ??
width:150px;
margin:0 5px 0 0; Why is this here?
display:inline;/* ie6 double margin fix */ What does this do?
Why don’t you have a “min-height: 100px;” here as well?
}

Yes it could have been a float left but sometimes float right is easier for the last column because you can place it from the right as I have doen with a 5px margin to create a little space. There is no difference really except that the right column will alwys stick on the right and in a fixed width layout that basically means no difference so feel free to change it.

There is no need for the min-height on the last column because there are no other elements relying on this for their positioning. If the right column was empty then nothing would change. However if the left column was empty then the middle column slides over.

TomTees · October 10, 2010, 10:46pm

Paul,

That is a pretty studly looking sample you put together for me last night!!

But I have LOTS of questions…

I’ll come back to that later.

See my questions in RED below…

Float three columns of appropriate width:

/* left column*/
#sidebar {
float:left;
width:150px;
min-height:100px;
margin:0 0 0 5px; Why is this here?
display:inline;/* ie6 double margin fix */ What does this do?
}

/* center column /
#main {
float:left;
width:630px;
min-height:100px;
margin:0 0 0 15px; Why is this here?
padding:1px 0;/ stop margin collapse*/ What does this do?
}

/* right column*/
#secondary {
float:right; Could you do a Float: Left ??
width:150px;
margin:0 5px 0 0; Why is this here?
display:inline;/* ie6 double margin fix */ What does this do?
Why don’t you have a “min-height: 100px;” here as well?
}

The min-height was there just in case you didn’t have any content in one of the columns otherwise the floats would move across and fill the space.

[QUOTE]3)[COLOR=Blue]- Each Column extends down to match Tallest Column

[COLOR=Black]Create a background image that creates the illusion of 3 columns and repeat it on the outer.[/quote]