 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / February 2005How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? Ideally the layout would be centered so it scales better visually. This would be great for me. Thanks, Dan V. >How do you do a css 2 column layout with header and footer, with the 2nd >column auto-stretching By using a css table (not supported by IE). Alternative methods are rare, Google for "fauxcolumns" for a hack suitable for a fixed pixel width "column" (not suitable if the column contains text). The only other IE compatible method I'm aware of requires kicking IE6 into quirks mode. >800 x 600 resolution as min. No such thing, 800x600 is a common Screen Area size, screen resolution is the granularity of the pixels expressed as Pixels Per Inch. >Ideally the layout would be centered so it scales better visually. Layouts should adapt to the available viewport width, rarely is it appropriate to try and prevent that from happening, use max-width for those rare cases.  SignatureSpartanicus > >How do you do a css 2 column layout with header and footer, with the 2nd > >column auto-stretching > > By using a css table (not supported by IE). > > Alternative methods are rare, Google for "fauxcolumns" for a hack That is not very clever, IMHO. > The only other IE compatible method I'm aware of requires kicking IE6 > into quirks mode. It is not that hard. Changed my old example little: http://www.student.oulu.fi/~laurirai/www/css/examples/float2col.html That example has been there for ages, I only added footer and removed width. It can be done much simpler, this is complicated one, because it answers to question how to get border between columns, and it works in IE5... (whiout either requirement, it is quite clean solution, but does require one extra element, or some tricks.) > >Ideally the layout would be centered so it scales better visually. IMHO, that is not good idea. > Layouts should adapt to the available viewport width, rarely is it > appropriate to try and prevent that from happening, use max-width for > those rare cases. And use max-width only for stuff that really benefit from it. Like paragraphs. Add you use bigger value than you think it is best, as there is differences between people, and there is no proof that short column are easier to read, when difference is huge. (there is studies about subject somewhere in internet, I think I have seen 2 at least.) SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. This looks good in IE 6 and Firefox 1.0 - which I do most of my testing with as they have a lot of market share. I kind of forget about IE 5 as I am new and I want to know the basics before any hacks. If I use this code (with thanks) how can I have the content in the 2nd 'column' stretch only to say 700 px max. (Max-width is the only way that I am aware - but I don't know how many browsers support this for a div.) Some of the content will look 'silly' if it stretches past 1024 x 768 resolution. I guess I could assume people won't choose silly widths..? > > >How do you do a css 2 column layout with header and footer, with the 2nd > > >column auto-stretching [quoted text clipped - 32 lines] > are easier to read, when difference is huge. (there is studies about > subject somewhere in internet, I think I have seen 2 at least.) > I kind of forget about IE 5 as I am new and I want to know the basics before > any hacks. That's not bad idea at all. As I said, the example is old. Nowadays I wouldn't care about IE5... > If I use this code (with thanks) how can I have the content in the 2nd > 'column' stretch only to say 700 px max. (Max-width is the only way that I > am aware - but I don't know how many browsers support this for a div.) max-width is supported quite well, if it is supported. IE don't support it, but there is work around. Google for max-width for ie You don't want to limit it to 700px > Some of the content will look 'silly' if it stretches past 1024 x 768 > resolution. People that run their browser in over that size often use bigger font size too. So use something like max-width:60em; If you have mixed content (images and text), only apply max-width to text. I have seen far too many times that floated images are forced to too small space, and other way around, because using incompatible units. > I guess I could assume people won't choose silly widths..? That is not bad idea either. [FU deleted. Don't top post.] SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. > How do you do a css 2 column layout with header and footer, with the 2nd > column [quoted text clipped - 7 lines] > Thanks, > Dan V. FAQ. Next time, do some searching first. Why limit to the resolutions you mentioned? A fluid layout would work on both resolutions as well as smaller/bigger. What you are looking for is (WARNING, untested off the top of my head): <h1>Heading content</h1> <div style="width:xx%;float:left"> (left column content) </div> <div style="width:xx%;float:left"> (right column content) </div> <div style="clear:both"> (footer content) </div> What I've put here is the minimal amount of css to do what you've asked about. Flavor to taste and although I used inline styling, it's better to use an external style sheet for most things as it works for an entire site then. SignatureStan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg A zest for living must include a willingness to die. - R.A. Heinlein > What you are looking for is (WARNING, untested off the top of my head): > [quoted text clipped - 13 lines] > use an external style sheet for most things as it works for an entire site > then. What would be the minimum variation of the above that would give a fixed-width left column, and a fluid right column? Brian Tozer >>What you are looking for is (WARNING, untested off the top of my head): >> [quoted text clipped - 16 lines] > What would be the minimum variation of the above that would give a > fixed-width left column, and a fluid right column? Not sure about minimum but take a look at the link mscir posted. Nice and simple. SignatureStan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg A zest for living must include a willingness to die. - R.A. Heinlein > How do you do a css 2 column layout with header and footer, with the 2nd > column [quoted text clipped - 4 lines] > Thanks, > Dan V. How about this? http://wellstyled.com/files/css-2col-fluid-layout/example2.html Mike > How do you do a css 2 column layout with header and footer, with the > 2nd > column > auto-stretching so entire page looks good for 800 x 600 resolution as > min. > and 1024 x 768 resolution as a max? > Ideally the layout would be centered so it scales better visually. > This would be great for me. > Thanks, > Dan V. box1 { width:1024px; height:768px; } col1 { width:auto; height:768; float:left;} col2 {width:auto: height:768px; float:left;} <div class="box1"> <div class="col1">xxxxxxxxx</div> <div class="col2">yyyyyyyyyy</div> </div> >>How do you do a css 2 column layout with header and footer > > box1 { width:1024px; height:768px; } > col1 { width:auto; height:768; float:left;} > col2 {width:auto: height:768px; float:left;} There are no HTML elements "box1", "col1", and "col2". Your syntax is bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?) > <div class="box1"> > <div class="col1">xxxxxxxxx</div> > <div class="col2">yyyyyyyyyy</div> > </div> You obviously didn't test your code. I'd ask why, but I've already killfiled you. HAND SignatureBrian >>> How do you do a css 2 column layout with header and footer >> [quoted text clipped - 13 lines] > killfiled you. > HAND They're classes, just place a "." before each of them. I'm surprised you didn't pick up on that. Sometimes I post quickly and overlook small details too. .box1 { width:1024px; height:768px; } .col1 { width:auto; height:768; float:left;} .col2 { width:auto: height:768px; float:left;} Mike >>>> How do you do a css 2 column layout with header and footer >>> [quoted text clipped - 23 lines] > >Mike Following this discussion with huge interest - it is almost exactly the help I need but with a slight difference If they were a <div>element with an id attribute instead of classes, and the left column needed to contain a background image (no repeat) , and located under the image a background colour of back was required that had a width of around 5% less width of the actual background image above it - And the left column needs to be the same depth as the right column (content dependant) how would that be achieved? http://4wdnz.net/css is as far as I have got - tearing my hair out now :-( tks in advance Peter all resolved P >>>>> How do you do a css 2 column layout with header and footer >>>> [quoted text clipped - 42 lines] >tks in advance >Peter >>> box1 { width:1024px; height:768px; } >>> col1 { width:auto; height:768; float:left;} [quoted text clipped - 7 lines] > > They're classes, just place a "." before each of them. Yes, I figured that part out. > I'm surprised you didn't pick up on that. I did pick up on it. "Richard" <Anonymous@127.001> did not. My question was why he didn't bother testing his code. A css checker would have warned him of the bad syntax. > Sometimes I post quickly and overlook small details too. > > .box1 { width:1024px; height:768px; } > .col1 { width:auto; height:768; float:left;} > .col2 { width:auto: height:768px; float:left;} Ok, that passes syntax checking, but even that is bad advice. And, at first glance, won't do what the op wanted, either. SignatureBrian |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.