Re: [WSG] 2-col question
#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: #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 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 (see the CSS "content-after") Samuel Samuel Richardson wrote: #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 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 (see the CSS "content-after") Samuel Samuel Richardson wrote: > > > > > > #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 **