How to use CSS display:table-xxxx to horizontally position divs

[jqpdev]

I'm trying to move my initial layout that is currently <table>,<tr>, <td>
driven. I would like to structure a template that uses div's, but uses
display: table-row, table-cell, table-col to properly position my div's
horizontally. Here is the way I want to structure my template:

- 3 major sections arranged vertically from top to bottom (top, middle,
bottom)
- all three sections have 100% widths
- the middle section is split into two containing divs (left and right)
- left-middle div should take up 20%, the right should claim the remaining
80%
- left-middle div is for menu, right-middle div is for content

The problem I'm having is that div's don't behave the way table cells/rows
do. I have hunch that I could use div's and the above table display
technique. However, I haven't made much progress.

[Murray *TMM*]

jqpdev:

This should be very doable without tables.

<style>
body { margin: 0 10px; } /* assuming you want 10px left and right margins */
#topsection { width:100%; }
#middlewrapper { position:relative; }
#middleleft { width:20%;float:left; }
#middleright { width:80%; float:right; }
#bottomsection { ... }
</style>

....

<div id="topsection">blah</div>
<div id="middlewrapper">
<div id="middleleft">blah</div>
<div id="middleright">blah</div>
</div>
<div id="bottomsection>blah</div>


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
ANSWERS
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"jqpdev" <jqpdev@hotmail.com> wrote in message
news:bo58fk$5aa$1@forums.macromedia.com...

> I'm trying to move my initial layout that is currently <table>,<tr>, <td>
> driven. I would like to structure a template that uses div's, but uses
> display: table-row, table-cell, table-col to properly position my div's
> horizontally. Here is the way I want to structure my template:
>
> - 3 major sections arranged vertically from top to bottom (top, middle,
> bottom)
> - all three sections have 100% widths
> - the middle section is split into two containing divs (left and right)
> - left-middle div should take up 20%, the right should claim the remaining
> 80%
> - left-middle div is for menu, right-middle div is for content
>
> The problem I'm having is that div's don't behave the way table cells/rows
> do. I have hunch that I could use div's and the above table display
> technique. However, I haven't made much progress.
>
>

[jqpdev]

Murray,
Thanks for your quick response. Will either of the middle div's that you've
defined clip (appear on-top-of) the bottom section div or will it just
stretch the middle container and thus push the bottom section further down
in the document? Also how will the 10px margins affect the middle
left/right div's?... does the 10px get added to the ends of the middle
div's, the middle div container or does is shrink them by 10px? If I sound
like a newb it is because I am, but I'm trying to sort out the behavior of
the tags in relation to the CSS code.

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:bo5hcg$jub$1@forums.macromedia.com...

> jqpdev:
>
> This should be very doable without tables.
>
> <style>
> body { margin: 0 10px; } /* assuming you want 10px left and right margins

*/

> #topsection { width:100%; }
> #middlewrapper { position:relative; }
> #middleleft { width:20%;float:left; }
> #middleright { width:80%; float:right; }
> #bottomsection { ... }
> </style>
>
> ...
>
> <div id="topsection">blah</div>
> <div id="middlewrapper">
> <div id="middleleft">blah</div>
> <div id="middleright">blah</div>
> </div>
> <div id="bottomsection>blah</div>
>
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver MX
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
> ANSWERS
> ==================
> [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> ==================
>
> "jqpdev" <jqpdev@hotmail.com> wrote in message
> news:bo58fk$5aa$1@forums.macromedia.com...

> > I'm trying to move my initial layout that is currently <table>,<tr>,

<td>

> > driven. I would like to structure a template that uses div's, but uses
> > display: table-row, table-cell, table-col to properly position my div's
> > horizontally. Here is the way I want to structure my template:
> >
> > - 3 major sections arranged vertically from top to bottom (top, middle,
> > bottom)
> > - all three sections have 100% widths
> > - the middle section is split into two containing divs (left and right)
> > - left-middle div should take up 20%, the right should claim the

remaining

> > 80%
> > - left-middle div is for menu, right-middle div is for content
> >
> > The problem I'm having is that div's don't behave the way table

cells/rows

> > do. I have hunch that I could use div's and the above table display
> > technique. However, I haven't made much progress.
> >
> >

>
>

[Murray *TMM*]

> thus push the bottom section further down

> in the document?

This is what will happen.

> the middle div container

The margins will appear to left and right of the container only.

> If I sound
> like a newb it is because I am

Don't worry - so am I! 8)

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
ANSWERS
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"jqpdev" <jqpdev@WhyAreYouAsking.com> wrote in message
news:bo5sds$apd$1@forums.macromedia.com...

> Murray,
> Thanks for your quick response. Will either of the middle div's that

you've

> defined clip (appear on-top-of) the bottom section div or will it just
> stretch the middle container and thus push the bottom section further down
> in the document? Also how will the 10px margins affect the middle
> left/right div's?... does the 10px get added to the ends of the middle
> div's, the middle div container or does is shrink them by 10px? If I

sound

> like a newb it is because I am, but I'm trying to sort out the behavior of
> the tags in relation to the CSS code.
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:bo5hcg$jub$1@forums.macromedia.com...

> > jqpdev:
> >
> > This should be very doable without tables.
> >
> > <style>
> > body { margin: 0 10px; } /* assuming you want 10px left and right

margins

> */

> > #topsection { width:100%; }
> > #middlewrapper { position:relative; }
> > #middleleft { width:20%;float:left; }
> > #middleright { width:80%; float:right; }
> > #bottomsection { ... }
> > </style>
> >
> > ...
> >
> > <div id="topsection">blah</div>
> > <div id="middlewrapper">
> > <div id="middleleft">blah</div>
> > <div id="middleright">blah</div>
> > </div>
> > <div id="bottomsection>blah</div>
> >
> >
> > --
> > Murray --- ICQ 71997575
> > Team Macromedia Volunteer for Dreamweaver MX
> > (If you *MUST* email me, don't LAUGH when you do so!)
> > ==================
> > [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO

GET

> > ANSWERS
> > ==================
> > [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> > [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> > [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> > [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> > ==================
> >
> > "jqpdev" <jqpdev@hotmail.com> wrote in message
> > news:bo58fk$5aa$1@forums.macromedia.com...

> > > I'm trying to move my initial layout that is currently <table>,<tr>,

> <td>

> > > driven. I would like to structure a template that uses div's, but

uses

> > > display: table-row, table-cell, table-col to properly position my

div's

> > > horizontally. Here is the way I want to structure my template:
> > >
> > > - 3 major sections arranged vertically from top to bottom (top,

middle,

> > > bottom)
> > > - all three sections have 100% widths
> > > - the middle section is split into two containing divs (left and

right)

> > > - left-middle div should take up 20%, the right should claim the

> remaining

> > > 80%
> > > - left-middle div is for menu, right-middle div is for content
> > >
> > > The problem I'm having is that div's don't behave the way table

> cells/rows

> > > do. I have hunch that I could use div's and the above table display
> > > technique. However, I haven't made much progress.
> > >
> > >

> >
> >

>
>

[jqpdev]

You stated in your earlier post that it is doable without tables. However,
my original question was never answered. I'm not looking to use the
infamous table, tr, td, and col tags. I want to use div's but have them
displayed with table/row/cell like behavior using the CSS:
- display: table-row
- display: table-col
- display: table-cell

I haven't been successful thus far. I'm using IE v6 SP-1 on Windows XP Pro.
If my hunches are correct this would allow the browser to scale/adjust the
width/height of a div much the way columns and cells are stretched and
shrunk.

Consider this... If I use the left-middle div for a vertical menu and the
right-middle div for page content, and the heights both divs may vary from
page to page, then it is possible for the height of one of the divs to *not*
be visually adjacent to the bottom-div. This gives the page an awkward look
if the divs have different background colors.

I'm getting my ideas from W3 Schools on this page
[url]http://www.w3schools.com/css/pr_class_display.asp[/url]

and a response to an "a list apart" article. Here is a link to the article.
[url]http://www.alistapart.com/articles/flexiblelayouts/[/url]

Here is a link to the specific response I'm referring to.
[url]http://www.alistapart.com/discuss/flexiblelayouts/2/[/url]

See the post titled "A table by another name" by Alun David Bestor.

Am I on the right track?


"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:bo5t7b$cmu$1@forums.macromedia.com...

> > thus push the bottom section further down
> > in the document?

>
> This is what will happen.
>

> > the middle div container

>
> The margins will appear to left and right of the container only.
>

> > If I sound
> > like a newb it is because I am

>
> Don't worry - so am I! 8)
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver MX
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
> ANSWERS
> ==================
> [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> ==================
>
> "jqpdev" <jqpdev@WhyAreYouAsking.com> wrote in message
> news:bo5sds$apd$1@forums.macromedia.com...

> > Murray,
> > Thanks for your quick response. Will either of the middle div's that

> you've

> > defined clip (appear on-top-of) the bottom section div or will it just
> > stretch the middle container and thus push the bottom section further

down

> > in the document? Also how will the 10px margins affect the middle
> > left/right div's?... does the 10px get added to the ends of the middle
> > div's, the middle div container or does is shrink them by 10px? If I

> sound

> > like a newb it is because I am, but I'm trying to sort out the behavior

of

> > the tags in relation to the CSS code.
> >
> > "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> > news:bo5hcg$jub$1@forums.macromedia.com...

> > > jqpdev:
> > >
> > > This should be very doable without tables.
> > >
> > > <style>
> > > body { margin: 0 10px; } /* assuming you want 10px left and right

> margins

> > */

> > > #topsection { width:100%; }
> > > #middlewrapper { position:relative; }
> > > #middleleft { width:20%;float:left; }
> > > #middleright { width:80%; float:right; }
> > > #bottomsection { ... }
> > > </style>
> > >
> > > ...
> > >
> > > <div id="topsection">blah</div>
> > > <div id="middlewrapper">
> > > <div id="middleleft">blah</div>
> > > <div id="middleright">blah</div>
> > > </div>
> > > <div id="bottomsection>blah</div>
> > >
> > >
> > > --
> > > Murray --- ICQ 71997575
> > > Team Macromedia Volunteer for Dreamweaver MX
> > > (If you *MUST* email me, don't LAUGH when you do so!)
> > > ==================
> > > [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO

> GET

> > > ANSWERS
> > > ==================
> > > [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> > > [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> > > [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> > > [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> > > ==================
> > >
> > > "jqpdev" <jqpdev@hotmail.com> wrote in message
> > > news:bo58fk$5aa$1@forums.macromedia.com...
> > > > I'm trying to move my initial layout that is currently <table>,<tr>,

> > <td>

> > > > driven. I would like to structure a template that uses div's, but

> uses

> > > > display: table-row, table-cell, table-col to properly position my

> div's

> > > > horizontally. Here is the way I want to structure my template:
> > > >
> > > > - 3 major sections arranged vertically from top to bottom (top,

> middle,

> > > > bottom)
> > > > - all three sections have 100% widths
> > > > - the middle section is split into two containing divs (left and

> right)

> > > > - left-middle div should take up 20%, the right should claim the

> > remaining

> > > > 80%
> > > > - left-middle div is for menu, right-middle div is for content
> > > >
> > > > The problem I'm having is that div's don't behave the way table

> > cells/rows

> > > > do. I have hunch that I could use div's and the above table display
> > > > technique. However, I haven't made much progress.
> > > >
> > > >
> > >
> > >

> >
> >

>
>

[Murray *TMM*]

Have you ever traveled in a foreign country where you have studied the
language and want to try conversational interactions? You spend 10 minutes
thinking of the correct way to say something, then you say it, and OMG the
person replies and worse, expects a response!

That's where I am right now! 8)

Umm - I dunno how to do what you have asked! But judging from your
resources and the content of your links, I'd say - GO FOR IT! And please,
when you get this nut cracked, post back here so I can know too....

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
ANSWERS
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"jqpdev" <jqpdev@hotmail.com> wrote in message
news:bo6pao$d9r$1@forums.macromedia.com...

> You stated in your earlier post that it is doable without tables.

However,

> my original question was never answered. I'm not looking to use the
> infamous table, tr, td, and col tags. I want to use div's but have them
> displayed with table/row/cell like behavior using the CSS:
> - display: table-row
> - display: table-col
> - display: table-cell
>
> I haven't been successful thus far. I'm using IE v6 SP-1 on Windows XP

Pro.

> If my hunches are correct this would allow the browser to scale/adjust the
> width/height of a div much the way columns and cells are stretched and
> shrunk.
>
> Consider this... If I use the left-middle div for a vertical menu and the
> right-middle div for page content, and the heights both divs may vary from
> page to page, then it is possible for the height of one of the divs to

*not*

> be visually adjacent to the bottom-div. This gives the page an awkward

look

> if the divs have different background colors.
>
> I'm getting my ideas from W3 Schools on this page
> [url]http://www.w3schools.com/css/pr_class_display.asp[/url]
>
> and a response to an "a list apart" article. Here is a link to the

article.

> [url]http://www.alistapart.com/articles/flexiblelayouts/[/url]
>
> Here is a link to the specific response I'm referring to.
> [url]http://www.alistapart.com/discuss/flexiblelayouts/2/[/url]
>
> See the post titled "A table by another name" by Alun David Bestor.
>
> Am I on the right track?
>
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:bo5t7b$cmu$1@forums.macromedia.com...

> > > thus push the bottom section further down
> > > in the document?

> >
> > This is what will happen.
> >

> > > the middle div container

> >
> > The margins will appear to left and right of the container only.
> >

> > > If I sound
> > > like a newb it is because I am

> >
> > Don't worry - so am I! 8)
> >
> > --
> > Murray --- ICQ 71997575
> > Team Macromedia Volunteer for Dreamweaver MX
> > (If you *MUST* email me, don't LAUGH when you do so!)
> > ==================
> > [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO

GET

> > ANSWERS
> > ==================
> > [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> > [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> > [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> > [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> > ==================
> >
> > "jqpdev" <jqpdev@WhyAreYouAsking.com> wrote in message
> > news:bo5sds$apd$1@forums.macromedia.com...

> > > Murray,
> > > Thanks for your quick response. Will either of the middle div's that

> > you've

> > > defined clip (appear on-top-of) the bottom section div or will it just
> > > stretch the middle container and thus push the bottom section further

> down

> > > in the document? Also how will the 10px margins affect the middle
> > > left/right div's?... does the 10px get added to the ends of the middle
> > > div's, the middle div container or does is shrink them by 10px? If I

> > sound

> > > like a newb it is because I am, but I'm trying to sort out the

behavior

> of

> > > the tags in relation to the CSS code.
> > >
> > > "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> > > news:bo5hcg$jub$1@forums.macromedia.com...
> > > > jqpdev:
> > > >
> > > > This should be very doable without tables.
> > > >
> > > > <style>
> > > > body { margin: 0 10px; } /* assuming you want 10px left and right

> > margins

> > > */
> > > > #topsection { width:100%; }
> > > > #middlewrapper { position:relative; }
> > > > #middleleft { width:20%;float:left; }
> > > > #middleright { width:80%; float:right; }
> > > > #bottomsection { ... }
> > > > </style>
> > > >
> > > > ...
> > > >
> > > > <div id="topsection">blah</div>
> > > > <div id="middlewrapper">
> > > > <div id="middleleft">blah</div>
> > > > <div id="middleright">blah</div>
> > > > </div>
> > > > <div id="bottomsection>blah</div>
> > > >
> > > >
> > > > --
> > > > Murray --- ICQ 71997575
> > > > Team Macromedia Volunteer for Dreamweaver MX
> > > > (If you *MUST* email me, don't LAUGH when you do so!)
> > > > ==================
> > > > [url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY

TO

> > GET

> > > > ANSWERS
> > > > ==================
> > > > [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> > > > [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> > > > [url]http://www.DreamweaverFAQ.com[/url] - DW FAQs, Tutorials & Resources
> > > > [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM)

Technotes

> > > > ==================
> > > >
> > > > "jqpdev" <jqpdev@hotmail.com> wrote in message
> > > > news:bo58fk$5aa$1@forums.macromedia.com...
> > > > > I'm trying to move my initial layout that is currently

<table>,<tr>,

> > > <td>
> > > > > driven. I would like to structure a template that uses div's, but

> > uses

> > > > > display: table-row, table-cell, table-col to properly position my

> > div's

> > > > > horizontally. Here is the way I want to structure my template:
> > > > >
> > > > > - 3 major sections arranged vertically from top to bottom (top,

> > middle,

> > > > > bottom)
> > > > > - all three sections have 100% widths
> > > > > - the middle section is split into two containing divs (left and

> > right)

> > > > > - left-middle div should take up 20%, the right should claim the
> > > remaining
> > > > > 80%
> > > > > - left-middle div is for menu, right-middle div is for content
> > > > >
> > > > > The problem I'm having is that div's don't behave the way table
> > > cells/rows
> > > > > do. I have hunch that I could use div's and the above table

display

> > > > > technique. However, I haven't made much progress.
> > > > >
> > > > >
> > > >
> > > >
> > >
> > >

> >
> >

>
>