Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

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_site/style_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;}