3 column layout

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rsmarsha
Forum Contributor
Posts: 242
Joined: Tue Feb 08, 2005 4:06 am
Location: Leeds, England

3 column layout

Post by rsmarsha »

Basically i'm trying to get a 3 column layout where the left and right columns are fixed, with the centre fluid. It should be readable at narrow widths and without text wrapping into other columns.

An example test file i have atm is :

http://78.136.39.65/templates/3col.html

The centre box wraps under the right hand column when the page is shrunk, is that acceptable do you think, or is there a better way?

I'm also wondering about the order, at the moment the called order is top, left, right, centre, bottom. Should the centre be called first for SEO purposes? I can't seem to get the layout to work with the centre called first.

Another example is :

http://78.136.39.65/templates/3coltest.html

In the 2nd example the text doesn't wrap, but breaks if you make it too narrow. Not sure which approach to take, or if there is a better way.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: 3 column layout

Post by matthijs »

If you want to prevent the wrapping you can give the center col a margin-right (180px or something?)

There are many examples of this kind of layout. have you searched for them? With a google search for "source order 3 column layout" I recognized almost all of the first results as good examples.
rsmarsha
Forum Contributor
Posts: 242
Joined: Tue Feb 08, 2005 4:06 am
Location: Leeds, England

Re: 3 column layout

Post by rsmarsha »

Added the right margin and it works fine, just dies a bit when made very small, i suppose if you wanted a site to work on a mobile though you could just have it use a different style sheet for that method of delivery?

The 2nd example i posted uses left and right margins for the centre column, but absolute positioning for the left and right. Looking at it, the 2nd example isn't as good as the first, as the footer doesn't clear correctly. So it seems the first is the right way. As it stands now the right margin stops it wrapping but limits how narrow you can get and still read the page. with the centre column wrapping it always appears alongside the left bar when made very narrow.

I have looked at a few in google, it seems each one is a tradeoff against the other in some respect. Just wondered which methods people were using.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: 3 column layout

Post by matthijs »

Yes there are many solutions to this kind of layout. But somehow I've never used this layout myself (3kol, fixed sidebars, fluid center). When I do code a fluid layout, I will make all columns fluid. Mostly to keep the proportion right.

Using absolute positioning it's indeed not possible to clear the footer.
rsmarsha
Forum Contributor
Posts: 242
Joined: Tue Feb 08, 2005 4:06 am
Location: Leeds, England

Re: 3 column layout

Post by rsmarsha »

I've settled on :

http://78.136.39.65/templates/3colwrap.html

But the order of the divs is :

top
left
right
centre
bottom

Can't get it to work right with the following order:

top
centre
left
right
bottom

The http://www.dabs.com layout is nice, 2 fixed columns and 1 fluid. Also the fluid column rearranges once you stop resizing your browser.
rsmarsha
Forum Contributor
Posts: 242
Joined: Tue Feb 08, 2005 4:06 am
Location: Leeds, England

Re: 3 column layout

Post by rsmarsha »

Found a good example here.
http://matthewjamestaylor.com/blog/ult ... pixels.htm

So having a play with that. :)
pankaj-knj
Forum Newbie
Posts: 2
Joined: Fri Feb 01, 2008 12:06 pm

Re: 3 column layout

Post by pankaj-knj »

Try this, This should work:

In css file:

Code: Select all

#left {margin:0; padding:0; width:200px; float:left;} 
#center {margin:0; padding:0; float:left;} 
#right {margin:0; padding:0; width:200px; float:left;}
.clr {clear : both;margin:0; padding:0;font-size:1px; line-height:1px;}
HTML File:

Code: Select all

<div id="left">Left col</div>
<div id="center">Main col</div>
<div id="right">Right col</div>
<div class="clr"></div>
Post Reply