467,871 Members | 1,721 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,871 developers. It's quick & easy.

3 row table layout but no fixed columns

I'm trying to create a 3 row layout in which each row will have two blocks,
BUT I want the width of these blocks to be independent of the blocks in the
other rows. So AFAICT a regular table layout is completely unsuitable.

I've been trying to recreate this idea with CSS for a couple hours now, using
positioned divs, but am not even close. (Maybe FF 1.5 is the problem?) Even
if I did manage to position the top and bottom rows within the overall div
(which I've gotten close to - except then the "cell" divs do not position
within their row), I'm not sure how to guarantee that there was no overlap
with the middle one.

This seems like such a simple layout! Can anyone point me in the right
direction? If I can't get it soon, I'm going to try a 3-row 1-column table
with positioned spans in each row, but that seems so hackish.

Thanks,
Tim
Feb 1 '08 #1
  • viewed: 5309
Share:
5 Replies
In article <80******************@newsfe19.lga>,
Timothy Larson <th*********@cox.netwrote:
I'm trying to create a 3 row layout in which each row will have two blocks,
BUT I want the width of these blocks to be independent of the blocks in the
other rows. So AFAICT a regular table layout is completely unsuitable.
Not at all. You *could* have 3 tables, one after another.
I've been trying to recreate this idea with CSS for a couple hours now, using
positioned divs, but am not even close. (Maybe FF 1.5 is the problem?) Even
if I did manage to position the top and bottom rows within the overall div
(which I've gotten close to - except then the "cell" divs do not position
within their row), I'm not sure how to guarantee that there was no overlap
with the middle one.

This seems like such a simple layout!
BUT I want the width of these blocks to be independent of the blocks in the
other rows.

OK.

HTML:

block block

<div style="clear:both;"></div>

block block

<div style="clear:both;"></div>

block block

<div style="clear:both;"></div>

CSS:

block {float:left;}

Now you can use p or div or other things for my "block" to suit
your semantic needs. You do have such needs don't you? And you
can add margins and padding to all this as you like. All of it
can be shrink to fit the contents if you don't specify widths.

If you want further help, just say what specs you want.

--
dorayme
Feb 2 '08 #2
dorayme wrote:
In article <80******************@newsfe19.lga>,
Timothy Larson <th*********@cox.netwrote:
>I'm trying to create a 3 row layout in which each row will have two blocks,
BUT I want the width of these blocks to be independent of the blocks in the
other rows. So AFAICT a regular table layout is completely unsuitable.

Not at all. You *could* have 3 tables, one after another.
>I've been trying to recreate this idea with CSS for a couple hours now, using
positioned divs, but am not even close. (Maybe FF 1.5 is the problem?) Even
if I did manage to position the top and bottom rows within the overall div
(which I've gotten close to - except then the "cell" divs do not position
within their row), I'm not sure how to guarantee that there was no overlap
with the middle one.

This seems like such a simple layout!
>BUT I want the width of these blocks to be independent of the blocks in the
other rows.


OK.

HTML:

block block

<div style="clear:both;"></div>

block block

<div style="clear:both;"></div>

block block

<div style="clear:both;"></div>

CSS:

block {float:left;}

Now you can use p or div or other things for my "block" to suit
your semantic needs. You do have such needs don't you? And you
can add margins and padding to all this as you like. All of it
can be shrink to fit the contents if you don't specify widths.

If you want further help, just say what specs you want.
This group used to have a FAQ, and at one time even had a website.

Perhaps a resource somewhere for most of the common layouts so people
don't have to make all the wrong moves first. I mention that to you
because you have some interest in this. If nothing else, a regularly
posted metafaq would be helpful.

Jeff
>
Feb 2 '08 #3
Jeff wrote:
>
This group used to have a FAQ, and at one time even had a website.
The old site is archived, but wasn't kept up so became too outdated to
be very useful. Too bad.
Perhaps a resource somewhere for most of the common layouts so people
don't have to make all the wrong moves first.
Try the CSS-discuss mailing list site and archives
http://css-discuss.incutio.com/?page=CssLayouts

--
Berg
Feb 2 '08 #4
In article <13*************@corp.supernews.com>,
Jeff <jeff@spam_me_not.comwrote:
This group used to have a FAQ, and at one time even had a website.
Probably not a good idea as it would then have a central place
for everyone to constantly argue and misunderstand each other
about. Much better for everyone to be at cross purposes all the
time over issues that come and go. You see, my friend, their
going is the signal for the sky to smile in optimistic hope. Call
me cynical. Call me embittered. But I am not as silly as the sky.

--
dorayme
Feb 2 '08 #5
Bergamot wrote:
Jeff wrote:
>This group used to have a FAQ, and at one time even had a website.

The old site is archived, but wasn't kept up so became too outdated to
be very useful. Too bad.
>Perhaps a resource somewhere for most of the common layouts so people
don't have to make all the wrong moves first.

Try the CSS-discuss mailing list site and archives
http://css-discuss.incutio.com/?page=CssLayouts
I love it, and I never would have found it myself.

Now, I hate that there is no sitemap and that I don't have enough time
to read all of it.

Thanks,
Jeff
Feb 2 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

157 posts views Thread by Dennis | last post: by
61 posts views Thread by Toby Austin | last post: by
28 posts views Thread by Anthony Williams | last post: by
25 posts views Thread by Michael Schuerig | last post: by
4 posts views Thread by Rob Freundlich | last post: by
117 posts views Thread by phil-news-nospam | last post: by
16 posts views Thread by Jef Driesen | last post: by
13 posts views Thread by annecarterfredi | last post: by
4 posts views Thread by Tor Inge Rislaa | last post: by
2 posts views Thread by bgold12 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.