Unfortunately this doesn't work.

The main column gets pushed under the nav div because they're both floated, and 
their parent element is not wide enough to accomodate them both... The two 
columns need to tile side by side.

Thanks for the effort, though.

Chris

> -----Original Message-----
> From: Rahul Gonsalves [mailto:[EMAIL PROTECTED]
> Sent: Monday, 11 February, 2008 08:31
> To: Hardie CA (Contractor)@ADM(IM) [EMAIL PROTECTED]
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Need an oversized two column template
> 
> 
> On 11-Feb-08, at 6:51 PM, <[EMAIL PROTECTED]> wrote:
> 
> > I require a 2-column template where the left column will be 150px  
> > wide and the right column will be of variable width, likely  
> > extending past the edge of the page horizontally.
> 
> Does this do what you need [1]? Taken from this resource [2]. If it  
> doesn't, a fairly simple bit of CSS should do the trick. The 
> clearfix  
> solution [3] is taken from Position is Everything, a good 
> resource site.
> 
> HTML:
> 
> <div id="container" class="clearfix">
>       <div id="nav">
>               ...
>       </div><!--#Nav-->
>       <div id="main">
>               ...
>       </div><!--Main-->
> </div>
> <div id="footer">
>       ...
> </div>
> 
> CSS:
> 
> #nav {float: left; width: 150px;}
> #main {float: right;}
> .clearfix:after {
>      content: ".";
>      display: block;
>      height: 0;
>      clear: both;
>      visibility: hidden;
> }
> 
> .clearfix {display: inline-block;}
> 
> /* Hides from IE-mac \*/
> * html .clearfix {height: 1%;}
> .clearfix {display: block;}
> /* End hide from IE-mac */
> 
> 
> Best,
>   - Rahul.
> 
> [1] http://blog.html.it/layoutgala/LayoutGala31.html
> [2] http://blog.html.it/layoutgala/
> [3] http://www.positioniseverything.net/easyclearing.html
> 

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/

Reply via email to