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.
3 column layout
Moderator: General Moderators
Re: 3 column layout
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.
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.
Re: 3 column layout
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.
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.
Re: 3 column layout
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.
Using absolute positioning it's indeed not possible to clear the footer.
Re: 3 column layout
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.
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.
Re: 3 column layout
Found a good example here.
http://matthewjamestaylor.com/blog/ult ... pixels.htm
So having a play with that.
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
Try this, This should work:
In css file:
HTML File:
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;}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>