If you have any problems the clear div being applied after the column divs
(as I did) you can try applying the following to the "contentwrap" div, and
any other container that holds floats.

        /* *** Float containers fix:
        http://www.csscreator.com/attributes/containedfloat.php *** */ 
        .clearfix:after {
                content: "."; 
                display: block; 
                height: 0; 
                clear: both; 
                visibility: hidden;
                }
        .clearfix{display: inline-table;}
        
        /* Hides from IE-mac \*/
        * html .clearfix{height: 1%;}
        .clearfix{display: block;} 

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Samuel Richardson
Sent: Monday, 5 December 2005 10:02 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] 2-col question

I forgot to add, if you want to apply a background image or footer then wrap
then

<body>
  <div id="contentwrap">
    <div id="sidebar"></div>
    <div id="content"></div>
    <div style="clear : both;">&nbsp;</div>
  </div>
</body>

Add background images to the #contentwrap for a faux column effect, also if
you add a footer div after #contentwrap it will automatically appear after
whichever column is the longest out of #sidebar or #content. Their are also
better ways of putting content inside the clear div (firefox requires
something to be in it to work) in the &nbsp; (see the CSS
"content-after")

Samuel


Samuel Richardson wrote:

> <body>
>  <div id="sidebar"></div>
>  <div id="content"></div>
> </body>
>
> #sidebar
> {
>  float : right;
>  width : 190px;
> }
>
> #content
> {
>  margin-right : 190px;
> }
>
> ivanovitch wrote:
>
>> Folks - you've helped out before, and I'm asking again. Pardon if 
>> this sounds all too simple, but I've yet to find a solution either in 
>> this list's archives, or on the web.
>>
>> I'm trying to create a fluid layout with two columns, but whilst the 
>> left column is variable width, the right column (sidebar) is to be a 
>> fixed width (190px). This is entirely because the right column 
>> contains an image in every instance. But I want the left column to 
>> take up the remainder of the space (viewport width - 190px).
>>
>> Everything that I've seen or reviewed works fine if I wish to break 
>> the columns by percentage, or pixel widths on both. And min-width 
>> doesn't seem to work for IE.
>>
>> Having divved up some non-table examples using the usual suspects, my 
>> efforts result in my finding that when making the viewport window 
>> very small (or when enlarging the text to huge sizes), the left 
>> column slides under the righthand column.
>>
>> Do I need to use double-divs to set a width for the troublesome right 
>> column? The most frustrating part of this is using tables and cells, 
>> this is a no-brainer.
>>
>> I'd show you an example of where I'm at, but my test site is down at 
>> the moment.
>> ******************************************************
>> 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
> ******************************************************
>
>

******************************************************
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
******************************************************

Reply via email to