From cl@isbd.net Tue May 10 17:29:46 2011 From: Chris G To: main@lists.alug.org.uk Subject: [ALUG] CSS question about using float Date: Tue, 10 May 2011 17:29:31 +0100 Message-ID: <20110510162930.GA13353@chris> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============3649091377069517426==" --===============3649091377069517426== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit I have a little CSS conundrum. I want to have a heading (H1 or H2) followed by some small and different coloured text on the same line. I can't do much manipulation of the headings because they are generated by a Wiki, but I can apply CSS to them as well if necessary. So, I have got as far as something like:-

Text on right

Heading 1

with CSS:- .textright { margin-top: 1em; margin-bottom: 0px; padding-bottom: 0px; float: right; } This works to an extent, the 'Text on right' does appear on the same line as the H1 heading as I want. However it's right across on the RHS and I really want it nestled up against the H1 text. Is there any reasonably easy way to get what I want? I'd really prefer not to have to make the heading 'float: left;' as this causes all sort of other fun and games, mainly because there's no easy way to 'clear: both;' afterwards. What I want is a box that occupies the whole width of the page the the right of the heading and then place the 'Text on right' within that box aligned to the left, but how do I get a box to place itself like that? -- Chris Green --===============3649091377069517426==-- From simon@nosher.net Tue May 10 22:07:39 2011 From: Simon Ransome To: main@lists.alug.org.uk Subject: Re: [ALUG] CSS question about using float Date: Tue, 10 May 2011 21:50:43 +0100 Message-ID: <4DC9A523.90901@nosher.net> In-Reply-To: <20110510162930.GA13353@chris> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============1403398326271792475==" --===============1403398326271792475== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit On 10/05/11 17:29, Chris G wrote: > I want to have a heading (H1 or H2) followed by some small and different > coloured text on the same line. I can't do much manipulation of the > headings because they are generated by a Wiki, but I can apply CSS to > them as well if necessary. > > So, I have got as far as something like:- > >

Text on right

Heading 1

> > with CSS:- > > .textright { > margin-top: 1em; > margin-bottom: 0px; > padding-bottom: 0px; > float: right; > } > > > This works to an extent, the 'Text on right' does appear on the same > line as the H1 heading as I want. However it's right across on the RHS > and I really want it nestled up against the H1 text. You might be looking for something along the lines for display: inline; applied to the H1/H2. This makes the client treat what would otherwise be a block-level object as if it were just running text, more-or-less, so anything else would nestle up against it normally. You'd probably then need to ensure that your next style (for following paragraphs, etc) had a clear:left in it or you forced a
after your "small" text or something (or wrapped the

/small text combo in a
). Hth, Simon -- ----------------------------------------------------------- Simon Ransome web: http://nosher.net/ rss: http://nosher.net/images/images.rss --===============1403398326271792475==-- From cl@isbd.net Wed May 11 09:57:19 2011 From: Chris G To: main@lists.alug.org.uk Subject: Re: [ALUG] CSS question about using float Date: Wed, 11 May 2011 09:57:05 +0100 Message-ID: <20110511085705.GB13353@chris> In-Reply-To: <4DC9A523.90901@nosher.net> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2653727185349096438==" --===============2653727185349096438== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit On Tue, May 10, 2011 at 09:50:43PM +0100, Simon Ransome wrote: > On 10/05/11 17:29, Chris G wrote: > >I want to have a heading (H1 or H2) followed by some small and different > >coloured text on the same line. I can't do much manipulation of the > >headings because they are generated by a Wiki, but I can apply CSS to > >them as well if necessary. > > > >So, I have got as far as something like:- > > > >
Text on right
> >
Heading 1
> > > >with CSS:- > > > > .textright { > > margin-top: 1em; > > margin-bottom: 0px; > > padding-bottom: 0px; > > float: right; > > } > > > > > >This works to an extent, the 'Text on right' does appear on the same > >line as the H1 heading as I want. However it's right across on the RHS > >and I really want it nestled up against the H1 text. > > You might be looking for something along the lines for > > display: inline; > > applied to the H1/H2. This makes the client treat what would > otherwise be a block-level object as if it were just running text, > more-or-less, so anything else would nestle up against it normally. > You'd probably then need to ensure that your next style (for > following paragraphs, etc) had a clear:left in it or you forced a >
after your "small" text or something (or wrapped the >
/small text combo in a
). > Thanks, that's definitely a possible approach, I'll have a play. -- Chris Green --===============2653727185349096438==-- From cl@isbd.net Wed May 11 12:55:11 2011 From: Chris G To: main@lists.alug.org.uk Subject: Re: [ALUG] CSS question about using float Date: Wed, 11 May 2011 12:54:58 +0100 Message-ID: <20110511115458.GD6945@chris> In-Reply-To: <20110511085705.GB13353@chris> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============4192675669040261418==" --===============4192675669040261418== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable > > applied to the H1/H2. This makes the client treat what would > > otherwise be a block-level object as if it were just running text, > > more-or-less, so anything else would nestle up against it normally. > > You'd probably then need to ensure that your next style (for > > following paragraphs, etc) had a clear:left in it or you forced a > >
after your "small" text or something (or wrapped the > >
/small text combo in a
). > >=20 > Thanks, that's definitely a possible approach, I'll have a play. >=20 ... and I'm nearly there now, I just have one annoying niggle to sort out. =20 I want to change the colour of the second smaller part of the heading but can't seem to override the inherited colour setting. Firefox's "View Source" shows that the HTML for the heading is:-

Heading= 1

Heading 5

Paragraphs of text here
..... lots of other stuff
The level1 and level5 div sections are put there by the Wiki, not by my additions to create the two-sized heading, but I'm able to set them to "display: inline" too and thus the h1 and the h5 headings appear on the same line as required. The relevant CSS is:- div.dokuwiki h1 a, div.dokuwiki h2 a, div.dokuwiki h3 a, div.dokuwiki h4 a, div.dokuwiki h5 a, div.dokuwiki a.nolink { color: text ; text-decoration: none !important; ... ... ... div.blogpage h1 {font-size: 220%; margin-left: 0px; font-weight: bold; bo= rder-bottom: 1px solid text; display: inline; } div.blogpage h5 {font-size: 100%; margin-left: 0px; font-weight: bold; d= isplay: inline; color: green;} div.level1 { display: inline; } The colour of the h5 bit is staying determinedly at text rather than the green that I'm setting (I don't really want it green, it's just easier for testing). I assume that the colour is being inherited from the div.dokuwiki setting. Is there any way I can force the div.blogpage setting for the colour to override the other? The dokuwiki div is 'outside' my blogpage class. (N.B. I can't set the h5 class explicitly as that part of the HTML is generated by the Wiki) I'm not very good at understanding this CSS/inheritance stuff! :-) --=20 Chris Green --===============4192675669040261418==-- From cl@isbd.net Wed May 11 13:15:39 2011 From: Chris G To: main@lists.alug.org.uk Subject: Re: [ALUG] CSS question about using float Date: Wed, 11 May 2011 13:15:25 +0100 Message-ID: <20110511121525.GE6945@chris> In-Reply-To: <20110511115458.GD6945@chris> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============1424371293289035463==" --===============1424371293289035463== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable >=20 > The relevant CSS is:- >=20 > div.dokuwiki h1 a, > div.dokuwiki h2 a, > div.dokuwiki h3 a, > div.dokuwiki h4 a, > div.dokuwiki h5 a, > div.dokuwiki a.nolink { > color: text ; > text-decoration: none !important; >=20 > ... > ... > ... >=20 > div.blogpage h1 {font-size: 220%; margin-left: 0px; font-weight: bold; = border-bottom: 1px solid text; display: inline; } > div.blogpage h5 {font-size: 100%; margin-left: 0px; font-weight: bold;= display: inline; color: green;} >=20 > div.level1 { display: inline; } >=20 >=20 > The colour of the h5 bit is staying determinedly at text rather than > the green that I'm setting (I don't really want it green, it's just > easier for testing). I assume that the colour is being inherited from > the div.dokuwiki setting. Is there any way I can force the div.blogpage > setting for the colour to override the other? The dokuwiki div is > 'outside' my blogpage class. >=20 > (N.B. I can't set the h5 class explicitly as that part of the HTML is > generated by the Wiki) >=20 > I'm not very good at understanding this CSS/inheritance stuff! :-) >=20 .... it's OK, I spotted the problem (deliberate error?), I need to set 'div.blogpage h5 a { color: green }'. I hadn't registered that 'a' in the colour setting for div.dokuwiki. --=20 Chris Green --===============1424371293289035463==-- From mark@quarella.co.uk Wed May 11 13:37:12 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Wed, 11 May 2011 13:38:26 +0100 Message-ID: <4DCA8342.4060301@quarella.co.uk> In-Reply-To: <20110511121525.GE6945@chris> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============7072309740655400401==" --===============7072309740655400401== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Following Chris' CSS question, I have a (hopefully) quick one of my own. How to I convert the following table code to CSS (on the grounds that tables = are bad):

Heading

Menu Content

Footer

To keep it simple I haven't styled the table but assume it represents the=20 whole "page" of a fairly typical layout where there's a header and footer, an= d=20 between them a menu on the left and content on the right. It's staightforward to do this with floating DIVs except that with the table,= =20 the menu and content cells are (by definition) the same height, so if (for=20 example) I style the cell backgrounds then the whole of the cell gets=20 coloured. With floating DIVs I get whitespace around the menu and content=20 DIVS. Also, I'm not sure how to convert a table of width/height 100% to a CSS= =20 equivalent. I know this is basic stuff but when it comes to CSS I just don't "get it" :-( --=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============7072309740655400401==-- From Greg@TheThomasHome.co.uk Wed May 11 14:03:37 2011 From: Greg Thomas To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Wed, 11 May 2011 14:03:35 +0100 Message-ID: In-Reply-To: <4DCA8342.4060301@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============4079532382021158410==" --===============4079532382021158410== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit > How to I convert the following table code to CSS (on the grounds that tables > are bad): Tables are not "bad" - they are good for presenting tabular data. OK, so they shouldn't be used for layout, which is what you are trying to avoid. > > > > >
Heading
Menu Content
Footer
There's an example (with a better explanation than I could give) at http://css.maxdesign.com.au/floatutorial/tutorial0816.htm HTH, Greg --===============4079532382021158410==-- From mark@quarella.co.uk Thu May 12 09:31:40 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 09:32:58 +0100 Message-ID: <4DCB9B3A.1040407@quarella.co.uk> In-Reply-To: MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============3366081225599605338==" --===============3366081225599605338== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable On 11/05/11 14:03, Greg Thomas wrote: > Tables are not "bad" - they are good for presenting tabular data. OK, > so they shouldn't be used for layout, which is what you are trying to > avoid. Indeed, correction accepted! > There's an example (with a better explanation than I could give) at > http://css.maxdesign.com.au/floatutorial/tutorial0816.htm This doesn't actually work as expected if the content is shorter than the=20 menu, see example here: http://www.more-solutions.co.uk/test.html This is the exact example from the above tutorial except that the content has= =20 been reduced and background colours added to the left and right sections. Not= e=20 that the line (border) between the left and right sections is only as long as= =20 the right-hand content, and the background colours don't fill the whole areas= =20 unless the content does. If this were a table-based layout, the left and right "cells" would=20 by-definition be the same height. Of-course I can fix this by forcing the height, but that has far more=20 disadvantages than benefits. --=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============3366081225599605338==-- From steve-ALUG@hst.me.uk Thu May 12 10:51:02 2011 From: steve-ALUG@hst.me.uk To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 10:50:49 +0100 Message-ID: <4DCBAD79.1050001@hst.me.uk> In-Reply-To: <4DCB9B3A.1040407@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============3385023611080131286==" --===============3385023611080131286== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit On 12/05/11 09:32, Mark Rogers wrote: > On 11/05/11 14:03, Greg Thomas wrote: >> Tables are not "bad" - they are good for presenting tabular data. OK, >> so they shouldn't be used for layout, which is what you are trying to >> avoid. > > Indeed, correction accepted! > >> There's an example (with a better explanation than I could give) at >> http://css.maxdesign.com.au/floatutorial/tutorial0816.htm > > This doesn't actually work as expected if the content is shorter than > the menu, see example here: > http://www.more-solutions.co.uk/test.html But original website's text says "We will also apply a border to the left of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div." HTH Steve --===============3385023611080131286==-- From Greg@TheThomasHome.co.uk Thu May 12 10:51:21 2011 From: Greg Thomas To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 10:51:20 +0100 Message-ID: In-Reply-To: <4DCB9B3A.1040407@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============6407080298048870967==" --===============6407080298048870967== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit On 12 May 2011 09:32, Mark Rogers wrote: > > If this were a table-based layout, the left and right "cells" would > by-definition be the same height. Position is Everything. No, I mean the web site! There's an example of how to set "columns" to equal height at http://www.positioniseverything.net/articles/onetruelayout/equalheight - with a couple of examples of just what is possible at http://www.positioniseverything.net/articles/onetruelayout/examples HTH, Greg --===============6407080298048870967==-- From mjr@phonecoop.coop Thu May 12 11:29:15 2011 From: MJ Ray To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 11:29:11 +0100 Message-ID: <20110512102911.8BE629EC0B@nail.towers.org.uk> In-Reply-To: <4DCB9B3A.1040407@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============0063572657979402878==" --===============0063572657979402878== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Mark Rogers > This doesn't actually work as expected if the content is shorter than the=20 > menu, see example here: > http://www.more-solutions.co.uk/test.html > This is the exact example from the above tutorial except that the content h= as=20 > been reduced and background colours added to the left and right sections. N= ote=20 > that the line (border) between the left and right sections is only as long = as=20 > the right-hand content, and the background colours don't fill the whole are= as=20 > unless the content does. Excuse me for walking in part-way through, but have you tried putting the border and background on div#container instead of div#content? You may need to tweak background-position (IIRC) to get it just so. > If this were a table-based layout, the left and right "cells" would=20 > by-definition be the same height. On some devices. > Of-course I can fix this by forcing the height, but that has far more=20 > disadvantages than benefits. On some devices. There's also min-height. On some devices. Don't you love web tech? :-) This is where I earn my money. :-) Hope that helps, --=20 MJ Ray (slef), member of www.software.coop, a for-more-than-profit co-op. Webmaster, Debian Developer, Past Koha RM, statistician, former lecturer. In My Opinion Only: see http://mjr.towers.org.uk/email.html Available for hire for various work through http://www.software.coop/ --===============0063572657979402878==-- From mark@quarella.co.uk Thu May 12 14:46:39 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 14:47:57 +0100 Message-ID: <4DCBE50D.1050206@quarella.co.uk> In-Reply-To: <4DCBAD79.1050001@hst.me.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============9050077484529991778==" --===============9050077484529991778== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable On 12/05/11 10:50, steve-ALUG(a)hst.me.uk wrote: > But original website's text says > > "We will also apply a border to the left of the "content" div. This could b= e=20 > a problem if the "leftnav" div is longer than the main content. If this is = > the case, the border can be applied to the right side of the "leftnav" div = > instead of the "content" div." That's fine if you know in advance which is bigger, but in many cases that's = a=20 luxury that can't be relied on, and in any case it doesn't solve the problem = of the background colour not filling the "cell". --=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============9050077484529991778==-- From mark@quarella.co.uk Thu May 12 14:53:39 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 14:54:59 +0100 Message-ID: <4DCBE6B3.5030109@quarella.co.uk> In-Reply-To: <20110512102911.8BE629EC0B@nail.towers.org.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2158558095966979206==" --===============2158558095966979206== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable On 12/05/11 11:29, MJ Ray wrote: > Excuse me for walking in part-way through, but have you tried putting > the border and background on div#container instead of div#content? > You may need to tweak background-position (IIRC) to get it just so. I'm not sure I understand: the "border" is the line between the two "cells" s= o=20 is not on any outer edge of div#container, but somewhere within it. >> If this were a table-based layout, the left and right "cells" would >> by-definition be the same height. > On some devices. On "most" devices? > Don't you love web tech? :-) This is where I earn my money. :-) Absolutely! What I find frustrating is that CSS was developed "with the benefit of=20 hindsight" yet doesn't solve many of the layout problems that tables do solve. Another example: Foo Bar FooFoo BarBar How do I lay that out so that Bar/BarBar are aligned vertically, for any valu= e=20 of Foo/FooFoo? With a table this is easy. (Putting Foo/FooFoo in one div,=20 floated left, and Bar/BarBar in another div, would work, but only if=20 Foo/FooFoo/Bar/BarBar never individually exceed a single line, unless I don't= =20 care that FooFoo/BarBar are also horizontally aligned, which I do.... --=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============2158558095966979206==-- From mark@quarella.co.uk Thu May 12 15:03:28 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 15:04:42 +0100 Message-ID: <4DCBE8FA.2060302@quarella.co.uk> In-Reply-To: MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============6959312636736169219==" --===============6959312636736169219== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable On 12/05/11 10:51, Greg Thomas wrote: > Position is Everything. > > No, I mean the web site! There's an example of how to set "columns" to > equal height at > http://www.positioniseverything.net/articles/onetruelayout/equalheight Thanks, this does seem to address the problem, although it is a very messy=20 hack by the looks of things! I haven't tried it yet, but I can see problems when I go to my next stage:=20 allowing the left menu to have it's own vertical scrollbar if needed. (The=20 left menu will be a JavaScript tree menu and to be useful on small screens it= =20 needs to scroll independently of the main content.) In a table cell I should = be able to make this happen using overflow:auto but the hacks at=20 positioniseverything.net are already using overflow to achieve the column eff= ect. I understand why tables are bad for layout in theory, I really do. But given = how hard they are to work around in CSS in practice why should I be ashamed o= f=20 reverting to tables for layout? Why don't we just have=20 (functionally equivalent to table/tr/td=20 but providing the distinction for all the valid reasons that table is bad for= =20 layout)? Grrrrr....... --=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============6959312636736169219==-- From Greg@TheThomasHome.co.uk Thu May 12 15:17:54 2011 From: Greg Thomas To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Thu, 12 May 2011 15:17:53 +0100 Message-ID: In-Reply-To: <4DCBE8FA.2060302@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============0432237492090420090==" --===============0432237492090420090== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 7bit On 12 May 2011 15:04, Mark Rogers wrote: > Why don't we just have > (functionally equivalent to table/tr/td > but providing the distinction for all the valid reasons that table is bad > for layout)? Well, it's still the same problem you have with tables; HTML is supposed to be all about content, but you're describing layout. > I understand why tables are bad for layout in theory, I really do. But given > how hard they are to work around in CSS in practice why should I be ashamed > of reverting to tables for layout? My approach is generally to be "pragmatic", not ashamed ;) It's just too time consuming for me to use CSS for this sort of layout, so generally revert back to tables. Greg --===============0432237492090420090==-- From mjr@software.coop Fri May 13 20:48:56 2011 From: MJ Ray To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Fri, 13 May 2011 20:48:48 +0100 Message-ID: <20110513194848.20BA29EC0B@nail.towers.org.uk> In-Reply-To: <4DCBE6B3.5030109@quarella.co.uk> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============7452150466059299623==" --===============7452150466059299623== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Mark Rogers wrote: > On 12/05/11 11:29, MJ Ray wrote: > > Excuse me for walking in part-way through, but have you tried putting > > the border and background on div#container instead of div#content? > > You may need to tweak background-position (IIRC) to get it just so. >=20 > I'm not sure I understand: the "border" is the line between the two "cells"= so=20 > is not on any outer edge of div#container, but somewhere within it. Yes, that's doable with a background image on top of a background colour. Or you can put a border on both the side bar and the content and position them to overlap. There are tons of ways to skin this kitty depending on exactly how long you want that fur stole to be. > >> If this were a table-based layout, the left and right "cells" would > >> by-definition be the same height. > > On some devices. >=20 > On "most" devices? There's no proof of that. > > Don't you love web tech? :-) This is where I earn my money. :-) >=20 > Absolutely! >=20 > What I find frustrating is that CSS was developed "with the benefit of=20 > hindsight" yet doesn't solve many of the layout problems that tables do sol= ve. I feel it solves most of the styling problems, but not necessarily in a narrow "my layout is the only layout" way. > Another example: > Foo Bar > FooFoo BarBar >=20 > How do I lay that out so that Bar/BarBar are aligned vertically, for any va= lue=20 > of Foo/FooFoo? With a table this is easy. (Putting Foo/FooFoo in one div,=20 > floated left, and Bar/BarBar in another div, would work, but only if=20 > Foo/FooFoo/Bar/BarBar never individually exceed a single line, unless I don= 't=20 > care that FooFoo/BarBar are also horizontally aligned, which I do.... If you'd settle with them aligned only in some conditions (browser window the right size and shape) then that's do-able. One of the CSS grid systems should do it, although now I've just noticed that the latest version of cssgrid.net isn't scaling down for me :-/ If they really don't make sense if they're not aligned both ways, then that may well be a table and should be marked up as such. =20 If they make sense without alignment but you want to force them to be aligned even in non-ideal conditions, then... DON'T DO THAT! :) Good luck, --=20 MJ Ray (slef), member of www.software.coop, a for-more-than-profit co-op. Webmaster, Debian Developer, Past Koha RM, statistician, former lecturer. In My Opinion Only: see http://mjr.towers.org.uk/email.html Available for hire for various work through http://www.software.coop/ --===============7452150466059299623==-- From mark@quarella.co.uk Sat Jun 11 01:02:34 2011 From: Mark Rogers To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Sat, 11 Jun 2011 01:02:13 +0100 Message-ID: In-Reply-To: MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2006276984494361582==" --===============2006276984494361582== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable A while back, on 12 May 2011 15:17, Greg Thomas wrote: On 12 May 2011 15:04, Mark Rogers wrote: > Why don't we just have > (functionally equivalent to table/tr/td > but providing the distinction for all the valid reasons that table is b= ad > for layout)? Well, it's still the same problem you have with tables; HTML is supposed to be all about content, but you're describing layout. OK, coming back to this, is there anything "wrong" with the following layout? You will recall that my original question was: How to I convert the following table code to CSS (on the grounds that tables are bad):

Heading

Menu Content

Footer

So, given that I want table-styled layout but shouldn't use table tags to describe the layout, and the following seems to work, is it "acceptable" to the purists? The HTML seems to be pure content now, and the CSS contains all the layout information, so it seems like it should be OK but it seems too easy?
Header

Menu

Content
over
several
lines

Footer
--=20 Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG --===============2006276984494361582==-- From Greg@TheThomasHome.co.uk Sat Jun 11 19:05:49 2011 From: Greg Thomas To: main@lists.alug.org.uk Subject: Re: [ALUG] (OT) CSS Question, was Re: CSS question about using float Date: Sat, 11 Jun 2011 19:05:48 +0100 Message-ID: In-Reply-To: MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2739690289046890578==" --===============2739690289046890578== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: 8bit On 11 June 2011 01:02, Mark Rogers wrote: > > So, given that I want table-styled layout but shouldn't use table tags > to describe the layout, and the following seems to work, is it > "acceptable" to the purists? Well, I consider myself a pragmatist rather than a purist, but yes, I think what you have meets both the spirit and letter of the standards (if you tidied it up a bit to make it 100% HTML compliant ;)). However, > #menu, #content { > display:table-cell; > } may give you problems with IE7 (which doesn't support it) and IE8 (which does, but requires a proper !DOCTYPE). http://en.wikipedia.org/wiki/Internet_Explorer#Market_adoption_and_usage_share suggests that IE7 + IE8 have a market share of around 38% last month (IE7 alone is 7%), but of course it depends on your audience. Either way, I'd suggest at least adding a DOCTYPE to get IE8 working OK and to get it through the W3C validator to satisfy my OCD ;) Greg --===============2739690289046890578==--