Putting boxes side-by-side [CSS]

Prev: support level for multiple classes
Next: Chandelier Earrings: Cascading Elegance

From: Wes Groleau on 19 Jan 2008 22:37

I have a huge pile of open-source PHP, far too big for me to
wrestle it into submission. It generates nested tables
MANY layers deep.

What I am trying to do is extract several small pieces from it and put
each of those in a box (in a new file) and arrange those boxes my way.

The layout I want is (you'll need fixed width font):

+-----+-----+-----+-----+
| PGF | PGM | MGF | MGM |
+-----+-----+-----+-----+
| father | mother |
+-----------+-----------+
| child |
+-----------------------+
| child |
+-----------------------+

The stuff in the boxes is very complicated and also includes nested
tables, but I was hoping that making these boxes out of divs, I could
put boundaries on the pieces and then clean them up later.

So the divs, without contents, are
<div class="FGS">

<div class="grandparents" -->

<div class="PGP">
<div class="PGF">
</div>
<div class="PGM">
</div>
</div>

<div class="MGP">
<div class="MGF">
</div>
<div class="MGM">
</div>
</div>

</div>

<div class="parents">

<div class="father">
</div>

<div class="mother">
</div>

</div>

<div class="children">
</div>

</div>

Here's the CSS I tried (in FireFox on Mac), but all these divs are
stacked up in a single vertical column:
..FGS, .grandparents, .parents, .children, .child
{
width: 100%;
margin: 0;
padding: 0;
}

..PGF, .PGM, .MGF, .MGM
{
width: 25%;
margin: 0;
padding: 0;
}

..father, .mother, .PGP, .MGP
{
width: 50%;
margin: 0;
padding: 0;
}

..PGF, .MGF, .father
{
float: left;
}

..PGM, .MGM, . mother
{
float: right;
}

Obviously trivial to do with a table, but I'd rather not.

Thanks!

--
Wes Groleau

Nobody believes a theoretical analysis -- except the guy who did it.
Everybody believes an experimental analysis -- except the guy who
did it.
-- Unknown

From: dorayme on 19 Jan 2008 23:10

In article <ylzkj.723$Yl.262(a)trnddc01>,
Wes Groleau <groleau+news(a)freeshell.org> wrote:

> I have a huge pile of open-source PHP, far too big for me to
> wrestle it into submission. It generates nested tables
> MANY layers deep.
>
> What I am trying to do is extract several small pieces from it and put
> each of those in a box (in a new file) and arrange those boxes my way.
>
> The layout I want is (you'll need fixed width font):
>
> +-----+-----+-----+-----+
> | PGF | PGM | MGF | MGM |
> +-----+-----+-----+-----+
> | father | mother |
> +-----------+-----------+
> | child |
> +-----------------------+
> | child |
> +-----------------------+
>
....
> <div class="grandparents" -->
>
> <div class="PGP">
>
> Obviously trivial to do with a table, but I'd rather not.
>

First why would you rather not use a table? Second, if you are
going to post masses of code, why would you not post code that
did something rather than be hopelessly invalid. And third, what
possible benefit are the (wrongly coded) comments for? Of course
a <div class=""PGF"> is a classed div with PGF as the name of the
class.

--
dorayme

From: Wes Groleau on 20 Jan 2008 17:32

dorayme wrote:
> Wes Groleau <groleau+news(a)freeshell.org> wrote:
>> I have a huge pile of open-source PHP, far too big for me to
>> wrestle it into submission. It generates nested tables
>> MANY layers deep.
> ...
>> <div class="grandparents" -->
>>
>> <div class="PGP">
>>
>> Obviously trivial to do with a table, but I'd rather not.
>
> First why would you rather not use a table? Second, if you are

The answer to that (besides the usual rants about confusing
blind people) is in that first paragraph.

> going to post masses of code, why would you not post code that
> did something rather than be hopelessly invalid. And third, what
> possible benefit are the (wrongly coded) comments for? Of course

Hopelessly invalid? Wrong comments? Yes, the obvious div you quoted
is a typo. Maybe even the reason it didn't work. But all the rest of
the comments correctly identify the div they are ending. A very
important coding convention if you want any hope of dealing with
"spaghetti HTML" generated by someone else's "spaghetti PHP"

--
Wes Groleau

Is it an on-line compliment to call someone a Net Wit ?

From: dorayme on 20 Jan 2008 17:54

In article <2_Pkj.12695$9t4.2913(a)trnddc08>,
Wes Groleau <groleau+news(a)freeshell.org> wrote:

> dorayme wrote:
> > Wes Groleau <groleau+news(a)freeshell.org> wrote:
> >> I have a huge pile of open-source PHP, far too big for me to
> >> wrestle it into submission. It generates nested tables
> >> MANY layers deep.
> > ...
> >> <div class="grandparents" -->
> >>
> >> <div class="PGP">
> >>
> >> Obviously trivial to do with a table, but I'd rather not.
> >
> > First why would you rather not use a table? Second, if you are
>

> The answer to that (besides the usual rants about confusing
> blind people) is in that first paragraph.
>

OK Wes, I'm not saying for sure you have no good reason. But I
still cannot see it. Something generates nested tables many
layers deep. What has this quite to do with your particular
problem? You said "What I am trying to do is extract several
small pieces from [this massive convoluted table] and put each of
those in a box (in a new file) and arrange those boxes my way".
So? Why does this preclude you using a table for selected data in
a separate file considering it looks rather like tabular data you
are dealing with? I recall there being a relationship between the
cells, perhaps you might argue it is not really tabular in spite
of the appearance?

> > going to post masses of code, why would you not post code that
> > did something rather than be hopelessly invalid. And third, what
> > possible benefit are the (wrongly coded) comments for? Of course
>
> Hopelessly invalid? Wrong comments? Yes, the obvious div you quoted
> is a typo. Maybe even the reason it didn't work. But all the rest of
> the comments correctly identify the div they are ending. A very
> important coding convention if you want any hope of dealing with
> "spaghetti HTML" generated by someone else's "spaghetti PHP"

Why don't you therefore correct this now. How about a url with
your best shot (after you have answered above query).

Don't get upset. I did not mean to offend you (perhaps I was not
liking having to stay in Sunday yesterday to meet a Monday
deadline <g>)

--
dorayme

From: Wes Groleau on 21 Jan 2008 07:36

dorayme wrote:
> So? Why does this preclude you using a table for selected data in
> a separate file considering it looks rather like tabular data you

It doesn't. But I'd still like to understand the CSS & div issue.

> are dealing with? I recall there being a relationship between the
> cells, perhaps you might argue it is not really tabular in spite
> of the appearance?

If you look at http://UniGen.us/PGV/FGS?famid=F25&ged=wgroleau
compared to [1] http://UniGen.us/PGV/FGS-div?famid=F25&ged=wgroleau
you will see how the parents and grandparents were arranged in
the old version. If you view source, you will see, though
"spaghetti" might be hyperbole, why I want to simplify this thing.

Of course you won't be able to see how complicated the PHP is
unless you download it from www.phpgedview.net
The original version is
http://UniGen.us/PGV/family?famid=F25&ged=wgroleau

Although a case could be made that it is tabular, the original
(and many other parts of the code) uses much more complicated
tables to produce layouts that are not tabular (e.g., the pedigree
tree). I want to figure out ways to simpify it that will still
allow using non-tabular formats without excessive tables.

> Don't get upset. I did not mean to offend you (perhaps I was not
> liking having to stay in Sunday yesterday to meet a Monday
> deadline <g>)

Forgiven. I understand that situation!

[1] Apologies that I have been working on the table version,
so the two are probably not completely equivalent.

--
Wes Groleau

Change is inevitable.
Conservatives should learn that "inevitable" is not a synonym for "bad."
Liberals need to learn that "inevitable" is not a synonym for "good."
-- WWG

| Next | Last
Pages: 1 2
Prev: support level for multiple classes
Next: Chandelier Earrings: Cascading Elegance