This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > September 2005 > Three Column CSS: Lt. & Rt. fixed, center expands
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Three Column CSS: Lt. & Rt. fixed, center expands
|
|
| sstringer 2005-09-13, 7:32 pm |
| Based on the Dreamweaver CSS template (New > Page Designs (CSS) > Three-Column
Left Nav, you can easily see how to accomplish a three column layout. However,
the technique employed in this template uses percentages for all three columns
(eg. 20% 60% 20%). This means that as the page size changes (for instance,
when the user maximizes the browser window), the columns automagically expand.
Great, but not perfect.
I'm interested if anyone has figured out a smooth & seamless way to fix the
two side column widths and have the middle column expand to fill the difference
without javascript. I'm currently using a javascript technique that looks at
the window width and expands the middle column. You can see this in action
here:
http://www.mckinneysports.net
As you can see, this implementation is ugly. Not only does it abandon
noscript users, but it produces a very noticable pop in the page as it is not
(and cannot be) triggered until the page load is complete. It's also producing
a nasty but in Opera where the columns are pushing each other all over the
place.
It would be much better if there was a CSS technique that would be reliable
for all users and avoid the 'popping.' Any ideas?
Thanks,
Steve
| |
| twocans 2005-09-13, 7:32 pm |
| http://intensivstation.ch/files/en_...tes/temp06.html
havent use that one me self thought but here are all of them
http://intensivstation.ch/templates/, see the english icon on the top right
of page.
Kenny
"sstringer" <webforumsuser@macromedia.com> wrote in message
news:dg79jt$3r4$1@forums.macromedia.com...
> Based on the Dreamweaver CSS template (New > Page Designs (CSS) >
> Three-Column
> Left Nav, you can easily see how to accomplish a three column layout.
> However,
> the technique employed in this template uses percentages for all three
> columns
> (eg. 20% 60% 20%). This means that as the page size changes (for
> instance,
> when the user maximizes the browser window), the columns automagically
> expand.
> Great, but not perfect.
>
> I'm interested if anyone has figured out a smooth & seamless way to fix
> the
> two side column widths and have the middle column expand to fill the
> difference
> without javascript. I'm currently using a javascript technique that looks
> at
> the window width and expands the middle column. You can see this in
> action
> here:
>
> http://www.mckinneysports.net
>
> As you can see, this implementation is ugly. Not only does it abandon
> noscript users, but it produces a very noticable pop in the page as it is
> not
> (and cannot be) triggered until the page load is complete. It's also
> producing
> a nasty but in Opera where the columns are pushing each other all over the
> place.
>
> It would be much better if there was a CSS technique that would be
> reliable
> for all users and avoid the 'popping.' Any ideas?
>
> Thanks,
> Steve
>
| |
| Travis 2005-09-13, 7:33 pm |
| Well what about the PVII solution, I know it is javascript but seems to
work fine in Opera.
http://www.projectseven.com/tutoria...lumns/index.htm
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
sstringer wrote:
> Based on the Dreamweaver CSS template (New > Page Designs (CSS) > Three-Column
> Left Nav, you can easily see how to accomplish a three column layout. However,
> the technique employed in this template uses percentages for all three columns
> (eg. 20% 60% 20%). This means that as the page size changes (for instance,
> when the user maximizes the browser window), the columns automagically expand.
> Great, but not perfect.
>
> I'm interested if anyone has figured out a smooth & seamless way to fix the
> two side column widths and have the middle column expand to fill the difference
> without javascript. I'm currently using a javascript technique that looks at
> the window width and expands the middle column. You can see this in action
> here:
>
> http://www.mckinneysports.net
>
> As you can see, this implementation is ugly. Not only does it abandon
> noscript users, but it produces a very noticable pop in the page as it is not
> (and cannot be) triggered until the page load is complete. It's also producing
> a nasty but in Opera where the columns are pushing each other all over the
> place.
>
> It would be much better if there was a CSS technique that would be reliable
> for all users and avoid the 'popping.' Any ideas?
>
> Thanks,
> Steve
>
| |
| Thierry | www.TJKDesign.com 2005-09-13, 7:33 pm |
| sstringer wrote:
> I'm interested if anyone has figured out a smooth & seamless way to
> fix the two side column widths and have the middle column expand to
> fill the difference without javascript.
No hacks and NN4 compatible:
http://www.tjkdesign.com/articles/3cols.asp
HTH,
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
|
|
| Thierry | www.TJKDesign.com 2005-09-13, 7:33 pm |
| Gu-man wrote:
> You need the "holy grail":
>
> http://glish.com/css/
FWIW: I would not recommend layouts based on absolute positionned DIVs
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
| sstringer 2005-09-14, 7:24 pm |
| Thanks for these tips. Sorry if this reply appears twice. The forum decided
to barf on me when I hit the reply button. <joy>
As I was saying...
These tips are great. The absolutely placed sidebar columns seem to work the
best (http://glish.com/css/), though I now have the problem that my footer is
not clearing all three columns. It's clearing the non-positioned center
column, but it is ignoring the absolutely placed sidebar columns.
Switching the sidebar columns to relative positioning fixes the footer problem
but breaks the layout horribly in Netscape and Opera.
Can anyone offer some insight as to how to make my footer div clear all three
columns (the two absolutely placed ones and the one centered one)?
-Steve
| |
| Thierry | www.TJKDesign.com 2005-09-14, 7:30 pm |
| sstringer wrote:
> These tips are great. The absolutely placed sidebar columns seem to
> work the best (http://glish.com/css/), though I now have the problem
> that my footer is not clearing all three columns. It's clearing the
So it doesn't work the best after all ;)
Did you read my previous post about AP DIVs?
There is no such thing as clearing AP DIVs.
clear goes with float ...
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
| Al Sparber- PVII 2005-09-14, 7:30 pm |
| "Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote in message
news:dg98ri$18r$1@forums.macromedia.com...
> sstringer wrote:
>
> So it doesn't work the best after all ;)
> Did you read my previous post about AP DIVs?
> There is no such thing as clearing AP DIVs.
> clear goes with float ...
The Glish "holy grail" is ancient now :-) I like your solution much
better.
--
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".
| |
| Thierry | www.TJKDesign.com 2005-09-14, 7:30 pm |
| Al Sparber- PVII wrote:
> The Glish "holy grail" is ancient now :-) I like your solution much
> better.
Thanks........... to the "CSS challenge"
;)
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
| Al Sparber- PVII 2005-09-14, 7:30 pm |
| "Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote in message
news:dg9a56$3f4$1@forums.macromedia.com...
> Al Sparber- PVII wrote:
>
> Thanks........... to the "CSS challenge"
> ;)
I apologize for not publishing that - I just got swamped with stuff. One
of these days :-)
| |
| Thierry | www.TJKDesign.com 2005-09-14, 7:33 pm |
| Al Sparber- PVII wrote:
> "Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote in
[color=darkred]
> I apologize for not publishing that - I just got swamped with stuff.
> One of these days :-)
You just scored a few points ;)
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|