Re: [WSG] Simple 2 column layout?
- Original Message - From: Lachlan Hardy [EMAIL PROTECTED] Despite my strong disapproval of fixed width (I know, I know, the redesign is coming), the following works for me Do you object to a column being a fixed width? I understand your objection to a fixed width overall layout, but why object to a column being fixed width? As a side issue to that, if you have a 2 or 3 column layout with background colours and all heights to be equal, and you do not know the width of each column (NOT fixed width), how then do you use the background image hack for the colours of the columns? Thanks, Stephen -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.7.3 - Release Date: 15/03/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Simple 2 column layout?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the ease of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Simple 2 column layout?
Hi, How about *not* giving the second col a width (the one that is not in fixed width) Kim Trusz, Andrew wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the ease of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Simple 2 column layout?
Interesting, interesting. I how have a left column with a percentage width, and a right column without a width. The wrap div surrounding everything has a width of 92%. So far it's working quite well. Now I want to handle the problem of the page being resized to a narrow width which causes the right column div to jump below the left floated column. I don't want this. What would you advise? Use the min-width property, along with the PVII Set Min Width extension? http://www.projectseven.com/extensions/info/minwidth/ Thanks, Stephen - Original Message - From: Kim Kruse [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, March 18, 2005 2:27 PM Subject: Re: [WSG] Simple 2 column layout? Hi, How about *not* giving the second col a width (the one that is not in fixed width) Kim Trusz, Andrew wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the ease of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help
RE: [WSG] Simple 2 column layout?
On my domain www.sql-und-xml.de, I am using such a simple layout with a fixed left column and a floating right. Amaya 9.1 accepts this. The page is in german but the Html is ... self-explaining Best Regards Juergen Auer Berlin, Germany On 18 Mar 2005 at 7:50, Trusz, Andrew wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the ease of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Simple 2 column layout?
Hi Stevio, P7 min width extension would work just fine or this one http://www.doxdesk.com/software/js/minmax.html I don't know which one works best. Maybe min max is a bit more flexible. Kim Stevio wrote: Interesting, interesting. I how have a left column with a percentage width, and a right column without a width. The wrap div surrounding everything has a width of 92%. So far it's working quite well. Now I want to handle the problem of the page being resized to a narrow width which causes the right column div to jump below the left floated column. I don't want this. What would you advise? Use the min-width property, along with the PVII Set Min Width extension? http://www.projectseven.com/extensions/info/minwidth/ Thanks, Stephen - Original Message - From: Kim Kruse [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, March 18, 2005 2:27 PM Subject: Re: [WSG] Simple 2 column layout? Hi, How about *not* giving the second col a width (the one that is not in fixed width) Kim Trusz, Andrew wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the ease of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help
Re: [WSG] Simple 2 column layout?
Stevio wrote: - Original Message - From: Lachlan Hardy Despite my strong disapproval of fixed width (I know, I know, the redesign is coming), the following works for me Do you object to a column being a fixed width? I understand your objection to a fixed width overall layout, but why object to a column being fixed width? G'day Stephen Andrew ably represented my views on fixed width. Here's my summation though - it just doesn't work There are some circumstances where you can use absolute units to good effect, but I can't think of any that involve fixed width I'd say more, but after reading Andrew's essay, I'm knackered. (Thanks, Andrew: I just didn't have a rant in me today!) Cheers, Lachlan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Simple 2 column layout?
Thanks for that, getting those widths right always annoys me cause the box
model doesn't work right!
To expand on the simple 2 column layout, how can I have a fixed width left
column (for navigation) and a right column that fills the rest of the space.
This is achieved in tables by setting the left cell to, for example, 150
width, and the right column to 100%.
Thanks,
Stephen
- Original Message -
From: Lachlan Hardy [EMAIL PROTECTED]
Sent: Wednesday, March 16, 2005 7:27 PM
You didn't ask for header and footer, but if you don't want them just
remove...
HTML:
body
div id=header...some header content.../div
div id=somecol...some column content.../div
div id=someothercol...some other column content.../div
div id=footer...some footer content.../div
/body
CSS:
#somecol {
float: left;
margin-left: 1%;
width: 40%;
}
#someothercol {
float: left;
margin-left: 1%;
width: 40%;
}
#footer {
clear: both;
}
Increase the widths as appropriate, just remember that percentages are
dealt with slightly differently by most browsers (all?) so that widths
that work in one may not work in all others - basically, the widths and
margins should never amount to 100%, but in some browsers a better number
is 98% total
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.3 - Release Date: 15/03/2005
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Simple 2 column layout?
Stevio wrote:
To expand on the simple 2 column layout, how can I have a fixed width left
column (for navigation) and a right column that fills the rest of the
space.
This is achieved in tables by setting the left cell to, for example, 150
width, and the right column to 100%.
Despite my strong disapproval of fixed width (I know, I know, the
redesign is coming), the following works for me
Same HTML, change these CSS rules to the following:
#somecol {
float: left;
margin-left: 10px;
width: 150px;
}
#someothercol {
margin-left: 165px;
}
Cheers,
Lachlan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Simple 2 column layout?
Stevio wrote:
What is the simplest way to layout 2 columns? Nothing fancy, just a bit
of content in each one. No background colour.
You didn't ask for header and footer, but if you don't want them just
remove...
HTML:
body
div id=header...some header content.../div
div id=somecol...some column content.../div
div id=someothercol...some other column content.../div
div id=footer...some footer content.../div
/body
CSS:
#somecol {
float: left;
margin-left: 1%;
width: 40%;
}
#someothercol {
float: left;
margin-left: 1%;
width: 40%;
}
#footer {
clear: both;
}
That should just about do it. Simple, relatively unbreakable (anyone
object to that statement?)
Increase the widths as appropriate, just remember that percentages are
dealt with slightly differently by most browsers (all?) so that widths
that work in one may not work in all others - basically, the widths and
margins should never amount to 100%, but in some browsers a better
number is 98% total
Cheers,
Lachlan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
