[WSG] 2-col question

2005-12-04 Thread ivanovitch
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
**



Re: [WSG] 2-col question

2005-12-04 Thread Samuel Richardson

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



RE: [WSG] 2-col question

2005-12-04 Thread Paul Noone
Instead of trying to float the columns next to each other, you could avoid
much pain to the brain by wrapping the fixed image column inside the content
column.

--
|  |||
|  |||
|   main   | image  ||
|   content|||
|  |||
|  |||
--

Or you could always just apply a 190px right-margin to your content float.
;)

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of ivanovitch
Sent: Monday, 5 December 2005 9:32 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] 2-col question

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



Re: [WSG] 2-col question

2005-12-04 Thread Carlos Revillo

ivanovitch escribió:


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.

 


Have you checked something like...
div#right {float:right; width:190px}
div#left {margin-right:190px}
?
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



Re: [WSG] 2-col question

2005-12-04 Thread Jay Gilmore






Samuel Richardson wrote:
body
  
div id="sidebar"/div
  
div id="content"/div
  
/body
  
  
#sidebar
  
{
  
float : right;
  
width : 190px;
  
}
  
  
#content
  
{
  
margin-right : 190px;
  
}
  
  
  
This is the exact design of my site http://www.smashignred.com except
the side bar is on the left. I wrap the content and the sidebar in a
pagewrapper and then do as above. The numbers are different though. I
have the sidebar width of 180px and the left margin of the content box
is 220px which gives me a simple space without having to ad padding.
  
  
  Jay Gilmore
Developer/Consultant
  Affordable Websites and Marketing Solutions for
Real Small Business.
  SmashingRed Web  Marketing
P) 902.529.0651
E) [EMAIL PROTECTED]
  
  
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
  
**
  
  
  
  
  
  





Re: [WSG] 2-col question

2005-12-04 Thread Samuel Richardson
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
**



RE: [WSG] 2-col question

2005-12-04 Thread Paul Noone
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
**



Re: [WSG] 2-col question

2005-12-04 Thread Mark White
There's a simpler way of clearing floats without using the clear 
attribute.


If you apply overflow: hidden; to the container DIV it will then 
expand to contain all the floats (as long as a height hasn't been 
specified, then it will possibly clip the floats).


The only issue with this is that IE needs a width (a few other 
attributes work as well) to make its special float rendering engine 
kick in, so I generally give the DIV a width of 100%; which DIVs do by 
default so there are unusually no adverse effects.


Here's the code:
-
.expand
{
  width: 100%;
  overflow: hidden;
}
-

For a more detailed description of the above method look at 
http://www.quirksmode.org/css/clearing.html;, which includes the names 
of who first found this method.




Paul Noone wrote:


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;} 

 



--
Mark White
Implementation Specialist

Squiz.net
T: 02 9568 6866
F: 02 9568 6733
E: [EMAIL PROTECTED]
W: www.squiz.net | http://matrix.squiz.net

. Open Source  - Own it  -  Squiz.net ./

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



Re: [WSG] 2-col question

2005-12-04 Thread ivanovitch
Thanks everyone: it was the float clearing that proved to be the thorn
in my side (right side). And the IE-Mac fix is also appreciated.

Only one more nut to crack with the site. I'll return for assistance
with another right floater if I can't use what I've just learned.

Thanks again: a terrific resource!



On 05/12/05, Mark White [EMAIL PROTECTED] wrote:
 There's a simpler way of clearing floats without using the clear
 attribute.

 If you apply overflow: hidden; to the container DIV it will then
 expand to contain all the floats (as long as a height hasn't been
 specified, then it will possibly clip the floats).

 The only issue with this is that IE needs a width (a few other
 attributes work as well) to make its special float rendering engine
 kick in, so I generally give the DIV a width of 100%; which DIVs do by
 default so there are unusually no adverse effects.

 Here's the code:
 -
 .expand
 {
width: 100%;
overflow: hidden;
 }
 -

 For a more detailed description of the above method look at
 http://www.quirksmode.org/css/clearing.html;, which includes the names
 of who first found this method.



 Paul Noone wrote:

 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;}
 
 
 

 --
 Mark White
 Implementation Specialist

 Squiz.net
 T: 02 9568 6866
 F: 02 9568 6733
 E: [EMAIL PROTECTED]
 W: www.squiz.net | http://matrix.squiz.net

 . Open Source  - Own it  -  Squiz.net ./

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