Hi. I am trying to straighten out some DIV issues in the rendering of my
no-tables CSS website. Right now the biggest issue is trying to render 2
columns several DIVs deep in the box model for my index page. If you go to
http://galtsvalley.com/newindex.html - you will see the problem area. I've
highlighted the relevant blocks with nice, harsh primary colors.
Clearly there are positioning problems begetting flow issues - the blocks
subsequent to the 2 side-by-side columns are not positioned relative to
them. Instead, they act as if the columns were not there.
My page's box model breaks down into a TopSection (the header bar) and a
MidSection (content and menu). Both of these in turn contain 2 side-by-side
columns: TopSection-1 & TopSection-2; and MidSection-1 and a MidSection-2.
MidSection-1 is the left column, for content. MidSection-2 is the right
column, for the menu. There is no BottomSection as yet. The relevant style
is copied below.
My problem is in MidSection-1, in what I call the LeadContentSect . Under the
text heading "Consulting Domains" are those problem columns. Again, their
relevant broken style is copied below.
Any ideas where I'm going wrong. Feel free to lambaste me for my CSS!
Brian
p.s. a warning: I have no idea how this page will render on a Mac!
---
newdefault.css:
body
{
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/*************** *****
** Begin DIV defs **
*************** *****/
/* TopSection (Header) Style */
#TopSection {
position: fixed;
width: 100%;
height: 160px;
top: 0; right: 0; left: 0; bottom: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, Serif;
font-size: 12px;
font-weight: normal;
border-bottom: 1px solid #003300;
background-color: #9999FF;
}
#TopCol-1 {
/* position: absolute;*/
float: left;
width: 40%;
height: auto;
top: 0; left: 0; bottom: auto;
color: #000066;
font-size: 14px;
padding: 140px 5px 0px 10px;
}
#TopCol-2 {
/* position: relative;*/
float: right;
width: 60%;
height: auto;
top: 0; left: 40%; bottom: auto;
text-align: right;
margin-right: 0px;
padding: 114px 10px 0px 0px; /* top right bot left */
/* background-image: url(/img/pine_at_dusk.jp g);
background-repeat: no-repeat;
background-position: right;*/
}
/* MidSection Style */
#MidSection {
position: absolute;
width: 100%;
height: 100%;
top: 160px; left: 0; bottom: auto;
background-color: #ffc;
padding: 0px 0px 0px 10px;
margin: 0;
}
#MidCol-1 {
float: left;
width: 68%;
height: auto;
top: 0; left: 0; bottom: auto;
border-bottom: 10px solid black;
margin-top: 40px;
margin-bottom: 40px;
padding-bottom: 40px;
}
#MidCol-2 {
float: right;
width: 30%;
height: auto;
top: 0; right: 0; left: 70%; bottom: auto;
font-size: 11px;
line-height: 13px;
color: #000000;
background-color: #cc0;
border-left: 2px dotted #000000;
border-bottom: 3px solid #444444;
min-width: 155px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
}
#LeadContentSec t {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}
..col-container {
position: absolute;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: red;
}
..col-container .Col1 {
float: left;
width: 50%;
height: auto;
top: 0; left: 0; right: auto; bottom: auto;
background-color: blue;
}
..col-container .Col2 {
float: right;
width: 50%;
height: auto;
top: 0; left: 50%; right: auto; bottom: auto;
background-color: yellow;
}
