 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2006How to do a multicolumn layout where the columns size to fit the contents?
Hello, Sorry if this is covered somewhere, but I've looked at countless sites explaining how to do multicolumn layouts in CSS, but have yet to find one that does what I want. In the old days, I would use something like this (deliberately small fragment of air code, so no comments about validity please!!) to produce a two-column layout, where the left column was (say) for site links... <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left" valign="top"> <small> <a href="...">Ferrets</a> <br><a href="...">Gibbons</a> <br><a href="...">Voles</a> </small> </td> <td align="left" valign="top"> This is where the main content goes... </td> </tr> </table> The advantage of this is that the left column would only be wide enough to fit the links, and the right column would expand to fill the rest of the window (assuming it had enough content of course). I have been looking to do such a layout in CSS, but can't see how. All the examples I've seen use DIVs for the columns, and float them. They set the width of the left DIV either as a fixed value in pixels, ems, etc, or as a percentage. Either way, the left column's width is independent of the contents. If the text of the links are all short, then you waste space in the left column. If there are long texts, they overflow the DIV and spill into the right column. Is there any way to set it so that the left column is only as wide as needed by the contents, and the right one uses the rest? As I said, I've searched and searched, I've followed loads of links from posts in this group, but I've yet to find a layout that is as flexible as the old table one. I would be very grateful if anyone can point me in the right direction. TIA  SignatureAlan Silver (anything added below this line is nothing to do with me) > The advantage of this is that the left column would only be wide enough > to fit the links, and the right column would expand to fill the rest of [quoted text clipped - 7 lines] > then you waste space in the left column. If there are long texts, they > overflow the DIV and spill into the right column. <http://css-discuss.incutio.com/> <http://www.csszengarden.com/> <http://www.positioniseverything.net/> <http://css.maxdesign.com.au/> Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) Hmm, it seems my reply of two days ago never made it into the newsgroup. Here goes for a second try... Thanks for your links Jim, but I've been through those already, and unless I missed one, none of them do what I want. They all have either fixed width, or a fixed percentage. I'm looking for a way to have the left column (DIV) only take as much space as the contents need, and have the right column take the rest. If I missed a sample that does that, please could you provide a more specific link as I couldn't see one. > <http://css-discuss.incutio.com/> Great site, loads of sample, but all suffer from the problem mentioned. > <http://www.csszengarden.com/> Beautiful site, but almost every design fixes the font size and the width. > <http://www.positioniseverything.net/> Also a great site, but see comments above > <http://css.maxdesign.com.au/> I presume you were referring to the floatutorial. Again, AFAICS, no example of automatic sizing. It could be that CSS simply isn't up to this yet and I'm going to have to stick with tables a while longer. If anyone has any idea, please reply. TIA. SignatureAlan Silver (anything added below this line is nothing to do with me) > Thanks for your links Jim, but I've been through those already, and > unless I missed one, none of them do what I want. They all have either > fixed width, or a fixed percentage. I'm looking for a way to have the > left column (DIV) only take as much space as the contents need, and have > the right column take the rest. Hmm. There is the float suggestion by Niels. That would work. You could also try display: table-cell. I do not know if IE supports that, though. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) >> Thanks for your links Jim, but I've been through those already, and >> unless I missed one, none of them do what I want. They all have either [quoted text clipped - 3 lines] >> > Hmm. There is the float suggestion by Niels. That would work. Unfortunately not, see my reply to him. > You could also try display: table-cell. I do not know if IE supports >that, though. I just did a quick search, and apparently it doesn't. Thanks for the reply anyway. Any further suggestions greatly welcome. SignatureAlan Silver (anything added below this line is nothing to do with me) >> <http://css.maxdesign.com.au/> > [quoted text clipped - 4 lines] > have to stick with tables a while longer. If anyone has any idea, > please reply. TIA. I have also fought with this one and haven't found a way to do what you are referring to except for the use of em references. The only way I've found is to determine the content width of the left column in ems, then set the width using ems and set the margin of the right column also using ems. It's not automatic sizing, but it is based upon your content changing size with font changes. I know it's not exactly what you're looking for but I do hope this helps. SignatureStan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo http://alamo.nmsu.edu/ There are 10 kinds of people. Those that understand binary and those that don't. >> It could be that CSS simply isn't up to this yet and I'm going to >> have to stick with tables a while longer. If anyone has any idea, [quoted text clipped - 9 lines] >I know it's not exactly what you're looking for but I do hope this >helps. Thanks for the reply, I was afraid this was going to be the answer. The reason why it's such a problem is that the links can be changed at will by the site owner, so I have no way of knowing in advance what length the link text will be. With the table layout, this didn't matter as the links column would just take as much space as it needed and no more. With a CSS approach, it looks like I would have to guess, which is a certainty that I would get it wrong fairly often!! Thanks anyway. SignatureAlan Silver (anything added below this line is nothing to do with me) Alan Silver schrieb: > <table border="0" cellpadding="0" cellspacing="0" width="100%"> > <tr> [quoted text clipped - 10 lines] > </tr> > </table> ... > Is there any way to set it so that the left column is only as wide as > needed by the contents, and the right one uses the rest? Your table-solution doesn't fit your description, the link-column is maybe at about 20% for me. Try to understand floating and div and you get exactly what you want: <div> <!-- floating always reduces the div to the minimum needed size! it's automatically 'display: inline;' --> <div style="float: left;"> <small> <a href="...">Ferrets</a><br/> <a href="...">Gibbons</a><br/> <a href="...">Voles</a> </small> </div> <!-- nothing always expands the div to the maximum available size! that is the default behaviour of every unstyled div --> <div style=""> This is where the main content goes... </div> <!-- stop making garbage with the following content --> <div style="clear: both;" /> </div> abc > TIA Niels <snip> >> Is there any way to set it so that the left column is only as wide as >> needed by the contents, and the right one uses the rest? > > Your table-solution doesn't fit your description, the link-column >is maybe at about 20% for me. If you add more text to the main content part then it will shrink the link column down to just the size needed. I didn't bother adding that in, so as not to fill the post with unnecessary text. > Try to understand floating and div and >you get exactly what you want: <snip> Thanks for the sample, it isn't bad, but isn't actually what I wanted. The sample I posted (with the table) would have a left column that is as long as the right column. The one you posted floats the left column at the top left of the containing DIV, allowing the contents of the main column to expand out under the links. I was looking for something that would mimic the table layout, where the two columns fill the full vertical space used. I tried adding style="float:right;" to the main content div, which gave something a lot closer to what I wanted in IE, but put the div *below* the links on in Firefox, so still no joy ;-( Thanks for the reply. If you have any further suggestions, please do so. SignatureAlan Silver (anything added below this line is nothing to do with me) > I tried adding style="float:right;" to the main content div, which gave > something a lot closer to what I wanted in IE, but put the div *below* > the links on in Firefox, so still no joy ;-( <div> <div style="float: left;"> Menu </div> <div style="float: right;"> This is where the main content goes... This is where the main content goes... </div> <!-- this little space works wonders ;-) you can even setup 'font-size: 1px;' for making it smaller or using another element --> <div style="clear: both;" /> abc </div> Ciao Niels No that was a too fast a shoot. ;) Niels >No that was a too fast a shoot. ;) Ah, that explains why it didn't work <g> Thanks anyway. SignatureAlan Silver (anything added below this line is nothing to do with me) Okay, here is the merge, FF table-cell, conditionally IE (only tested with 6SP1 win): <html> <head> <style type="text/css">div.colright { display: table-cell; } div.colleft { float: left; }</style><!--[if lt IE 7]> <style type="text/css">div.colright { display: block; float: left; }</style><![endif]--> </head> <body> <div> <div class="colleft"> <small> <a href="...">Ferrets</a><br/> <a href="...">Gibbons</a><br/> <a href="...">Voles</a> </small> </div> <div class="colright"> This is where the main content goes... </div> <div style="clear: both;" /> </div> </body> </html> Works just fine and maybe continue working with IE7 (not Dean's :) Ciao Niels >Okay, here is the merge, FF table-cell, conditionally IE (only tested >with 6SP1 win): That's great, thanks. I tested it with IE5.0 and it worked as well. OK, one more question!! Maybe I'm asking too much now, but it is possible to set the height of the links column to be the same as the main content column? I would like to do this so that I can set the background colour of the links column, and have the colour go all the way down the page. I tried adding "height:100%;" to the colleft style, but it didn't do anything. I then surrounded both columns with another div, thinking that the extra style would expand the height of colleft to the full height of the container (ie the new div), but it didn't work. Any ideas? Thanks a lot for the help so far. ><html> ><head> [quoted text clipped - 24 lines] >Ciao > Niels SignatureAlan Silver (anything added below this line is nothing to do with me) > <!-- floating always reduces the div to the minimum needed size! FYI, if the browser follows the CSS 2.0 spec, an explicit width is required for non-replaced elements. It will default to 100% width if none is specified. MacIE falls into this category. Most current browsers follow the 2.1 spec, which allows for "shrink-wrapping". I realize MacIE is a dead browser, but it is an exception to your "always" rule. A graceful fallback for non-supporting browsers is always A Good Thing. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.