Need help using <div>s for layout (URL included) ...

[Ethan]

I'm trying to set up a page with a header and 2 columns. I would like
to use <div>s rather than tables. The page is here...

http://64.142.13.246/style_testing_s...yle_model2.htm

In both IE 6 and Mozilla 1.3.1 on Windows the two columns overlap a
little with the right column in front. I'd like them to touching but
not overlapping. #leftColumn has a width of 35% and #rightColumn has
left 35% and width 65% so they should just fill the page.

Another thing on that page is that the right column contains a <table>
which is used to lay out some content. I know that's not the
recommended method, but I don't know how you would use CSS to create
that same arrangement and get everything to line up right both
vertically and horizontally.

Thanks for your assistance,

- E

Here are my style definitions (the styles applied to <div>s have id
selectors).

h1, h2, h3 {
color: #004080;
font-weight: 800;
font-family: Verdana, Helvetica, Arial, sans-serif;}

h1 {
font-size: 1.5em;}

h2 {
font-size: 14px;}

h3 {
font-size: 11px;}
a:link {
color: #0080c0;
text-decoration: none;
font-weight: 600;}

a:visited {
color: #0080c0;
text-decoration: none;
font-weight: 600;}

a:hover {
color: #82b9fd;
font-weight: 600;
text-decoration: underline;}

a:active {
color: #ff8000;
font-weight: 600;
text-decoration: underline;}

#topBar1{
margin: 0em;
padding: 0em;
background-color: #8080c0;
height: 15px;}

#topBar2{
margin: 0em;
padding-left: 20px;
padding-right: 0em;
background-color: #c0c0c0;
border-top: 2px #0000a0 solid;
border-left: none;
border-right: none;
border-bottom: 2px #004080 solid;
padding-top: 15px;
padding-bottom: 15px;}

#leftColumn {
position: static;
width: 35%;
border: 1px #ff0000 dashed;
float: left;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 10px;}

#rightColumn {
background:#FFF;
border: 1px #0000ff dashed;
position: absolute;
left: 35%;
right: 0%;
padding-top: 20px;
padding-left: 10px;
padding-bottom: 20px;
padding-right: 20px;}

p.sitePlanName {
line-height: 16px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 4px;
padding-top: 8px;
border-top: 1px #000080 solid;}

p.sitePlanNotes {
line-height: 16px;
font-size: 11px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;}

p.sitePlanControls{
line-height: 16px;
font-size: 9px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 8px;
padding-top: 4px;}

p.node {
text-decoration: none;
font-size: 11px;
font-weight: 800;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0px;
padding-top: 0px;
border-top: 1px #000080 solid;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}

p.nodeNotes {
font-size: 11px;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
border: 1px #ff0000 none;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}

p.nodeControls{
font-size: 9px;
border: 1px #ff0000 none;
padding: 0em;
display: block;
white-space: nowrap;
margin: 2px;
border: 1px #ff0000 none;}

[Owen Jacobson]

Ethan wrote:

I'd like them to touching but not overlapping.
Why? I think the overlap looks really good. I'd keep it as-is.

The second part of your post is a little more interesting:
I don't know how you would use CSS to create that same arrangement and
get everything to line up right both vertically and horizontally.

Trees such as that generally work well as an unordered or ordered list
with the list marker hacked off, but the aligned control links are a
little different. What about putting each control in an appropriate
block (DIV, probably, as I can't think of anything better) and then
floating it right within the LI for that part of the tree?

Owen

[Ethan]

"Owen Jacobson" <oj**************@mx-deus.net> wrote in message news:<Jk*******************@news20.bellglobal.com> ...

Ethan wrote:

I'd like them to touching but not overlapping.

Why? I think the overlap looks really good. I'd keep it as-is.

OK, I worked with the positioning params of the two columns, and now
it's better, though still not great.

- In Mozilla 1.3 PC and Mac, it's fine.

- In IE 6 PC, the columns no longer overlap unless the browser window
is really narrow. However, there's a gap between them and the width of
the gap changes depending on the width of the window.

- In IE 6 Mac it's totally messed up. The columns completely overlap
and are illegible.

Any way to get this layout to work more or less the same in all of the
above browsers?

Any help would be greatly appreciated.

Thanks,

E

Here is the new stylesheet:

#topBar1{
margin: 0em;
padding: 0em;
background-color: #8080c0;
height: 15px;
z-index: 3;}

#topBar2{
margin: 0em;
padding-left: 20px;
padding-right: 0em;
background-color: #c0c0c0;
border-top: 2px #0000a0 solid;
border-left: none;
border-right: none;
border-bottom: 2px #004080 solid;
padding-top: 20px;
padding-bottom: 20px;
z-index: 4;}

h2.appTitle {
margin: 0em;
padding: 0em;
line-height: 15px;
vertical-align: middle;}

p.blank {
margin: 0em;
padding: 0em;
line-height: 1px;}

#leftColumn {
position: absolute;
border: 1px #ff0000 none;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 10px;
margin: 0em;
left: 0%;
top: 75px;
z-index: 2;
right: 65%;}

#rightColumn {
background:#FFF;
border: 1px #0000ff none;
position: absolute;
right: 0%;
padding-top: 20px;
padding-left: 10px;
padding-bottom: 20px;
padding-right: 20px;
top: 75px;
margin: 0em;
z-index: 1;
left: 35%;}

p.sitePlanName {
line-height: 16px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 4px;
padding-top: 8px;
border-top: 1px #000080 solid;}

p.sitePlanNotes {
line-height: 16px;
font-size: 11px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;}

p.sitePlanControls{
line-height: 16px;
font-size: 9px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 8px;
padding-top: 4px;}

p.node {
text-decoration: none;
font-size: 11px;
font-weight: 800;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0px;
padding-top: 0px;
border-top: 1px #000080 solid;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}

p.nodeNotes {
font-size: 11px;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
border: 1px #ff0000 none;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}

p.nodeControls{
font-size: 9px;
border: 1px #ff0000 none;
padding: 0em;
display: block;
white-space: nowrap;
margin: 2px;
border: 1px #ff0000 none;}