Re: Divs side by side with border

In article <C3A1A190.975DD%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

I have been learning some css and have been trying to perfect the tableless
design. I am trying to have 4 divs side by side with a surrounding border.
This is close but in webkit the border auto sizes to the width of the
browser window and not the containing divs as a table would. What am I
missing to make the div fixed so that it will wrap the divs perfectly and
not the width of the window? Also, is there any way to make it scroll the
window rather than wrap the cells to the next line with the page?

If you add float: left to your container, it has some effect on

making it shrink to width. Try it in Firefox. (And btw, if you
float the parent, the parent will see its floated children and
grow the height you want without you needing the clearing div).

See:

Yours: <URL: http://netweaver.com.au/alt/cline1.html />
float: <URL: http://netweaver.com.au/alt/cline2.html />
absolute: <URL: http://netweaver.com.au/alt/cline3.html />

Safari 2.0.4 has only this desirable shrink-to-fit effect when
all the inner divs are one line. So is this a bug in Safari? A
bug just on my own computer?

I am not recommending any of these things, especially not cline3.
They may well prove inconvenient in other ways.

It is a difficult issue to get shrink to fit without tables with
wide browser support. There are ways without good support all
around.

It is not that hard to avoid the problem by not designing where
it shows. For example, do you need the main border in fact?

--
dorayme

In article
<doraymeRidThis-A02024.15485803012008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <C3A1A190.975DD%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

I have been learning some css and have been trying to perfect the tableless
design. I am trying to have 4 divs side by side with a surrounding border.
This is close but in webkit the border auto sizes to the width of the
browser window and not the containing divs as a table would. What am I
missing to make the div fixed so that it will wrap the divs perfectly and
not the width of the window? Also, is there any way to make it scroll the
window rather than wrap the cells to the next line with the page?


Yours: <URL: http://netweaver.com.au/alt/cline1.html /

I forgot to comment on this part of your question. How about

<URL: http://netweaver.com.au/alt/cline4.html />

If we keep going we might get to cline100.html and break some
record. <g>

--
dorayme