using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com> <1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>
in [CSS]
|
Prev: "Kapok" method: 3-col liquid
Next: using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com><1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>
From: Chris F.A. Johnson on 9 Jul 2008 15:07 On 2008-07-09, Denis McMahon wrote: > Chris F.A. Johnson wrote: > >> What effect are you looking for? Something like >> <http://cfaj.freeshell.org/testing/xx2.html>, perhaps? > > That was useful, I have a similar but not quite the same problem. > > Old style markup, set the table width to 100%, set the left column to > 200 pixels, If the left-hand column contains any text, use em rather than px to size it. > set the right column to 100%, right column is expanded to > take the available space. > > How do I do this in CSS? In CSS, less is more. Most problems are caused by specifying too much rather than too little. The default width of a block element is 100%; you don't need to specify it. > Especially when ie has a broken box model? IE6 and later use the correct box model if you supply the correct datatype (use HTML 4.01 strict). > I'm wondering about using javascript to set div widths after page load, > but that looks really messy visually as the page loads and then > re-renders itself. You don't need JavaScript for something this simple. > But it does mean that sniffing the browser and calculating element > widths myself according to viewport dimensions lets me fix the ie box > model issues that affect other parts of the document too. You don't need browser sniffing, either. -- Chris F.A. Johnson <http://cfaj.freeshell.org> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
From: dorayme on 10 Jul 2008 06:03 In article <tpkdk.175906$8k.123754(a)newsfe18.ams2>, Denis McMahon <denis.mcmahon(a)ntlworld.com> wrote: > OK, here's my old style table: > > [logo][ title ] > [menu][content] > > Top row is 100 px high, left column is 200 px wide, table width is 100% > of body, so the right column expands to use all the remaining window > width automatically. > > My first problem is that I'm unsure whether to create two "column" divs > and put two "row" divs in each "column", or to create two "row" divs > each containing two "column" divs, or just create four separate divs > corresponding to each of the 4 table cells. > > Using the "less is more" theory, I define 4 divs: > > #logo { > position: absolute; > top: 0px; > left: 0px; > width: 200px; > height: 100px; You forgot to put in the HTML. Why not supply a url? -- dorayme
From: Andy Dingley on 10 Jul 2008 06:13 On 9 Jul, 20:07, "Chris F.A. Johnson" <cfajohn...(a)gmail.com> wrote: > Re: using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd(a)k13g2000hse.googlegroups.com> <1a0c$487284e1$cef88ba3$6097(a)TEKSAVVY.COM> <VXVck.171777$8k.127138(a)newsfe18.ams2> Fix your broken newsreader...
From: dorayme on 10 Jul 2008 22:42 In article <Cfxdk.288133$1B6.250867(a)newsfe21.ams2>, Denis McMahon <denis.mcmahon(a)ntlworld.com> wrote: > dorayme wrote: > > You forgot to put in the HTML. Why not supply a url? > > http://sined.servebeer.com:81/denis/css/ > I am not sure quite what you want, there are so many aspects you refer to. Do you want to know how to have a left column with some links, and a right column taking up the rest of the horiz space. And with a matching but not so high two cols above to fit, respectively a pic and a title header without using tables? Why is the Subject of this thread as absurdly long and cryptic? What is wrong with simply: Re: using CSS instead of tables? -- dorayme
From: Ben C on 11 Jul 2008 03:11
On 2008-07-10, Denis McMahon <denis.mcmahon(a)ntlworld.com> wrote: [...] > My first problem is that I'm unsure whether to create two "column" divs > and put two "row" divs in each "column", or to create two "row" divs > each containing two "column" divs, or just create four separate divs > corresponding to each of the 4 table cells. > > Using the "less is more" theory, I define 4 divs: [...] > With these definitions, the top left corner of each div is now in the > right place, the width of the menu / logo and height of the title / logo > are correct, but the "title" div doesn't expand across the full width of > the "content" div, and the "menu" div doesn't expand to the full length > of the "content" div. > > This means, for example, that I can't center a short title in the title > div relative to the content div, because the width of the title div > (containing h1 with text) is determined by the width of the text inside > the h1, if the text is less than enough to wrap the div simply doesn't > expand all the way. [...] > I guess I should restate my problem as one of making the divs expand to > the limits of the container even when their content is minimal (or empty) > > Ideas? Suggestions? You can add to each of the divs "right: 0" and "bottom: 0" as required to make them stretch to fit their containers. |