Re: [css-d] Three column div
Aaron also asked... http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Aaron, in Mac IE5.2.whatever, the columns act correctly, except the words left and right are hugging the left side of each of their respective columns. Yes they should be centered, they are not inheriting the center attribute from body. Okay this is minor, that is good the columns are functioning properly. Does it resize correctly with minimum and maximum widths ? Or degrade neatly ? Aaron, in IE5 Mac, the three columns don't stop at a max width as they do in Safari, and crash into each other and pile up when the window is made thinner. I could be wrong, but don't believe that this IE supports min-width/max-width properties. You may have to use a separate CSS stylesheet for this, with a set size for IE. Dave __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
- Original Message - From: Dave Pierce [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, July 19, 2006 7:11 PM Subject: Re: [css-d] Three column div Aaron also asked... http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Aaron, in IE5 Mac, the three columns don't stop at a max width as they do in Safari, and crash into each other and pile up when the window is made thinner. I could be wrong, but don't believe that this IE supports min-width/max-width properties. You may have to use a separate CSS stylesheet for this, with a set size for IE. Yes, I have seen IE/mac 5.2.3 rendering, no min/max-width supported, and no CSS expressions either. Anyway, I would call that graceful degradation. I could put a dummy fixed width div to give a minimum width, which would stop the pile up. Most sensible mac users are going to use Safari anyway, whats with this old Microsoft stuff on a new Mac anyway :) Thanks, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? At 06:02 AM 7/17/2006, Zoe M. Gillenwater replied: - Float one div left - Float one div right - Give middle div matching left and right margins - Wrap all divs in a container with a minimum and maximum width applied Aaron, Zoe's earlier advice was right on, but you may have failed to read it closely enough. The problem with your layout is that your markup sequence is float-left, center, float-right -- so the floated-right block is falling over to the next row regardless of the container width. If you change your markup sequence to left, right, center as Zoe suggested, it will work the way you want. div id=container div id=header header /div div id=left left /div div id=right right /div div id=center center /div /div Rationale: The #left block, floated left, causes the next element on the page to want to sit to its right. That next block is #right, which causes the next element on the page to want to sit to its left. The third block is #center, which sits to the left of #right and to the right of #left -- i.e., in the middle. You just have to remember that floating a block left or right positions it relative to the following elements on the page, not the preceding ones. Clear as mud? Right, very logical. That works, thanks alot everyone. I have updated the online version :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Many thanks, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
I have updated the online version :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Does not work on NN4. Does IE 5.5 support expression() syntax in CSS in HTML ? Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron anxiously asked: Right, very logical. That works, thanks alot everyone. I have updated the online version :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Aaron, in Mac IE5.2.whatever, the columns act correctly, except the words left and right are hugging the left side of each of their respective columns. Dave Pierce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html It has been tested here on IE 6, FF, and Safari. Anyone able to test NN4 and IE5.5 ? Aaron, in Mac IE5.2.whatever, the columns act correctly, except the words left and right are hugging the left side of each of their respective columns. Yes they should be centered, they are not inheriting the center attribute from body. Okay this is minor, that is good the columns are functioning properly. Does it resize correctly with minimum and maximum widths ? Or degrade neatly ? Thank you for checking, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote:
Aaron Gray wrote:
Is it possible to have a three column layout with fixed width left and
right columns , and variable width center column, WITH a minimum width,
using div's ?
Or can the minimum width center column only be done with tables.
If it is possible could you give me an example, or example code please.
If I understand correctly, one way you might accomplish this is to use
the 3column layout on this
pagehttp://www.alistapart.com/articles/negativemargins/ . Once you
have that working cross-browser(including IE), wrap the /entire/ layout
in another wrapper, called #whatever and assign a min/max width to it,
like so:
#whatever { max-width: 1200px; min-width: 550px; width: 99%; margin: 0
auto;}.
Get that working in compliant browsers. Providing that there are no
other glitches, getting IE to cooperate with min/max width is not
difficult. Write the list on how to do this, but only after all other
cross-browser issues are resolved.
Sorry, but I don't think that will work :(
Can I ask why not? It will work just fine. The type of layout you are
asking for is quite easy and can be done several different ways. Don't
be afraid to try it out. If you're new to CSS, I recommend you not jump
into a negative margin layout just yet, but you could easily do a float
layout:
- Float one div left
- Float one div right
- Give middle div matching left and right margins
- Wrap all divs in a container with a minimum and maximum width applied
That's all it takes. Some tweaking necessary for IE, probably, and when
you start adding in graphics, but the basic structure can be in place in
five minutes.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
be afraid to try it out. If you're new to CSS, I recommend you not jump into a negative margin layout just yet, but you could easily do a float layout: - Float one div left - Float one div right - Give middle div matching left and right margins - Wrap all divs in a container with a minimum and maximum width applied That's all it takes. Some tweaking necessary for IE, probably, and when you start adding in graphics, but the basic structure can be in place in five minutes. Okay, I have spent several hours trying to get this to work, and still cannot get the right floating div not to hang over on the next line. Here's what I have got :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html The CSS is in the HTML. It validates all except for the '' in the JavaScript expression in the CSS. Also looks the same in FireFox as it does in Internet Explorer. So I am stuck with the right floating div hanging down a line, in need of solving. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote: - Float one div left - Float one div right - Give middle div matching left and right margins - Wrap all divs in a container with a minimum and maximum width applied That's all it takes. Some tweaking necessary for IE, probably, and when you start adding in graphics, but the basic structure can be in place in five minutes. Okay, I have spent several hours trying to get this to work, and still cannot get the right floating div not to hang over on the next line. Here's what I have got :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html Aaron, The right div has to drop down because of the box model. Borders are added onto the declared width of a box, so your left and right divs each take up 202px of space, not 200px. You need the margins to match or exceed 202px. Alternately, remove the borders. Use backgrounds to troubleshoot instead of borders and you will be a much happier person. :-) I recommend you become very familiar with the box model before you go further with your layout. Here's some recommended reading: http://css-discuss.incutio.com/?page=BoxModel http://www.brainjar.com/css/positioning/default.asp http://www.communitymx.com/content/article.cfm?cid=E2F258C46D285FEE http://www.communitymx.com/abstract.cfm?cid=A33F5 (Thanks for keeping the CSS in the HTML, by the way -- much easier to help that way.) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote: Okay, I have spent several hours trying to get this to work, and still cannot get the right floating div not to hang over on the next line. Here's what I have got :- http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html The CSS is in the HTML. So I am stuck with the right floating div hanging down a line, in need of solving. Aaron Aaron, As Zoe pointed out it is a box model problem-- the need to account for width issues in the various win/ie browsers. I would encourage you to follow Zoe's advice, and learn to cope with the box model. As in any discipline, though, there alternative means and methods of solving problems. I prefer to put ie in quirksmode(the xml declaration above the doctype does that). It puts ie 5, 5.5, and 6.0 on a common playing field-- and, if you are careful, one can avoid dealing with the box model and related hacks-- not all the time, but at least some of the time. I am not necessarily saying this is a /better/ approach, but it is one that some of us employ on a fairly regular basis. This is an example of only one way your page might be set using that method: http://www.chelseacreekstudio.com/ca/cssd/layout08.html . Regards, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote: Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? At 06:02 AM 7/17/2006, Zoe M. Gillenwater replied: - Float one div left - Float one div right - Give middle div matching left and right margins - Wrap all divs in a container with a minimum and maximum width applied Aaron, Zoe's earlier advice was right on, but you may have failed to read it closely enough. The problem with your layout is that your markup sequence is float-left, center, float-right -- so the floated-right block is falling over to the next row regardless of the container width. If you change your markup sequence to left, right, center as Zoe suggested, it will work the way you want. div id=container div id=header header /div div id=left left /div div id=right right /div div id=center center /div /div Rationale: The #left block, floated left, causes the next element on the page to want to sit to its right. That next block is #right, which causes the next element on the page to want to sit to its left. The third block is #center, which sits to the left of #right and to the right of #left -- i.e., in the middle. You just have to remember that floating a block left or right positions it relative to the following elements on the page, not the preceding ones. Clear as mud? Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Three column div
Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? Or can the minimum width center column only be done with tables. If it is possible could you give me an example, or example code please. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
On 7/14/06, Aaron Gray [EMAIL PROTECTED] wrote: Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? Or can the minimum width center column only be done with tables. If it is possible could you give me an example, or example code please. we have quite a few examples in the wiki. just look through the list to find the fluid ones. http://css-discuss.incutio.com/?page=ThreeColumnLayouts __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
On 7/14/06, Aaron Gray [EMAIL PROTECTED] wrote: Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? Or can the minimum width center column only be done with tables. If it is possible could you give me an example, or example code please. we have quite a few examples in the wiki. just look through the list to find the fluid ones. http://css-discuss.incutio.com/?page=ThreeColumnLayouts I can only find one example for a minimum width center column and that does not give working example code and the actual page code is too complicated to decypher, it uses some scripting too. Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
On 7/14/06, Aaron Gray [EMAIL PROTECTED] wrote: I can only find one example for a minimum width center column and that does not give working example code and the actual page code is too complicated to decypher, it uses some scripting too. i assume the scripting is because ie does not support any minimum width. if you want minimum width for ie, you're going to have to code extra for it. if not, you can pick any layout you like in that list and have good browsers min-width it. my advice is to find a three column fluid layout you like, and add a min-width: 750px or whatever to it for the good browsers, since that's all that's needed. after that, find the least-bad method for telling IE to obey min-width you can stand, and place that on top of your three column layout. here's a good size link page on how to give min/max height/width to ie: http://kickasswebdesign.com/webgeekdir/CSS/Browser_Bugs/minmaxie/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote:
Is it possible to have a three column layout with fixed width left and right
columns , and variable width center column, WITH a minimum width, using div's
?
Or can the minimum width center column only be done with tables.
If it is possible could you give me an example, or example code please.
Many thanks in advance,
Aaron
If I understand correctly, one way you might accomplish this is to use
the 3column layout on this
pagehttp://www.alistapart.com/articles/negativemargins/ . Once you
have that working cross-browser(including IE), wrap the /entire/ layout
in another wrapper, called #whatever and assign a min/max width to it,
like so:
#whatever { max-width: 1200px; min-width: 550px; width: 99%; margin: 0
auto;}.
Get that working in compliant browsers. Providing that there are no
other glitches, getting IE to cooperate with min/max width is not
difficult. Write the list on how to do this, but only after all other
cross-browser issues are resolved.
Best,
~dL
--
http://chelseacreekstudio.com/ca/ccs/pow/pow.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote:
Is it possible to have a three column layout with fixed width left and
right columns , and variable width center column, WITH a minimum width,
using div's ?
Or can the minimum width center column only be done with tables.
If it is possible could you give me an example, or example code please.
Many thanks in advance,
Aaron
If I understand correctly, one way you might accomplish this is to use
the 3column layout on this
pagehttp://www.alistapart.com/articles/negativemargins/ . Once you
have that working cross-browser(including IE), wrap the /entire/ layout
in another wrapper, called #whatever and assign a min/max width to it,
like so:
#whatever { max-width: 1200px; min-width: 550px; width: 99%; margin: 0
auto;}.
Get that working in compliant browsers. Providing that there are no
other glitches, getting IE to cooperate with min/max width is not
difficult. Write the list on how to do this, but only after all other
cross-browser issues are resolved.
Sorry, but I don't think that will work :(
Aaron
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
From: Aaron Gray [EMAIL PROTECTED] Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? You might try this one - http://www.positioniseverything.net/articles/jello.html http://www.positioniseverything.net/articles/sidepages/jello-piefecta-clean.html http://www.positioniseverything.net/articles/jello-expo.html http://www.positioniseverything.net/articles/sidepages/pie-calc.php There are more pages that go with this article/demo, but the last one may be the most interesting to you as it's a tool to create a customized source code. You'll have to view source on the page after you've entered your desired values, but it's all there after you submit your requriements, CSS and HTML structure. I hope this helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
