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;}