Thanks Tim. I'm not a fan of creating two layouts, as the discovery of which ad was being served would certainly call for additional code I'm not authorized to add to the layout at the moment.
Going with the second option I realize that I could do just that, but regardless would have to set the size of the #wrapper large enough to accommodate the additional width of the 300px ads, whether or not I set one of the columns as fluid. Or am I reading that wrong? Thanks! Yazmin On Tue, Nov 3, 2009 at 6:37 PM, Tim Snadden <li...@snadden.com> wrote: > > The reason it won't work is that the #wrapper is 996px and all of the > other columns are designed to fit into a proportion of that width. To > make your layout work with flexible width columns you may need to have > a rethink about how you are doing this layout. You either need two > variations and set appropriate widths for each column based on > something like a class on the body or wrapper, or you need to have at > least on of the columns set up to be fluid so that it can take up > whatever space is available to it. > > It is certainly possible to 'shrink wrap' an element (i.e. set its > width based on the width of its content) and this is achieved by > floats. You need to float the container and if you are going to wrap > the ad in a div you need to float that as well. > > Cheers, Tim On Tue, Nov 3, 2009 at 6:37 PM, Tim Snadden <li...@snadden.com> wrote: > > On 4/11/2009, at 11:10 AM, Yazmin Media wrote: > >> Hi, >> >> I'm working on a 4 column layout that I found at pagecolumn.com. My >> issue is with the 4th column. I currently have a set width on it, but >> need to allow it to expand based on the content in the column (for ad >> purposes...serving both 160px and 300px ads). In the process, I would >> like for it to expand the header and footer in the same amount so that >> the right side of the design ends in the same spot. >> >> I'm not sure that I'm looking at the right information or even looking >> at this code in the right frame of mind, but I believed that this >> wasn't possible because the methods we have right now to create 4 >> column designs all deal with floating divs, which then pulls them out >> of the flow of the document making it as if the div wasn't there at >> all. >> >> So, before I resign myself to saying this can't be done, would someone >> take a look at the example and let me know if maybe there is something >> I can still do to make this work? >> >> The CSS is in the file and the code validates: >> >> http://yazminmedia.com/playground/4columnlayout/4column_relative.html > > The reason it won't work is that the #wrapper is 996px and all of the > other columns are designed to fit into a proportion of that width. To > make your layout work with flexible width columns you may need to have > a rethink about how you are doing this layout. You either need two > variations and set appropriate widths for each column based on > something like a class on the body or wrapper, or you need to have at > least on of the columns set up to be fluid so that it can take up > whatever space is available to it. > > It is certainly possible to 'shrink wrap' an element (i.e. set its > width based on the width of its content) and this is achieved by > floats. You need to float the container and if you are going to wrap > the ad in a div you need to float that as well. > > Cheers, Tim > > > ______________________________________________________________________ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Yazmin Wickham http://www.yazminmedia.com ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
