Re: [WSG] 2-col question
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
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
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
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
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
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
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
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
**
