By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

Putting boxes side-by-side

P: n/a
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><!-- class="PGF" -->
<div class="PGM">
</div><!-- class="PGM" -->
</div><!-- class="PGP" -->

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

</div><!-- class="grandparents" -->

<div class="parents">

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

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

</div><!-- class="parents" -->

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

</div><!-- class="FGS" -->

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
Jan 20 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article <ylzkj.723$Yl.262@trnddc01>,
Wes Groleau <gr**********@freeshell.orgwrote:
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
Jan 20 '08 #2

P: n/a
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
Jan 21 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.