CSS layout, again...at wits end

Question

I'm tellin' ya, I've been trying to grasp this stuff for 2
weeks, and it's just not working.
I am trying to recreate a pretty simple layout that I've used
before pre-CSS, using tables.
It's a simple top "banner" area, then 2 columns in the middle
(one narrow on left for links, one wide on right for content), and
another banner that flows below the middle area.
I've tried every possible combination of DIVs (and
Layers...), float, clear, whatever. It just doesn't work.
Here's the working URL of the master Template page:
http://www.valentines-day-flowers-by-schaefers.com/
In DW, I don't get that white gap below the logo at the top,
but in a browser I do. For this attempt, I made a Parent DIV, and
put the 2 columns in as Children, thus allowing me to put the
bottom banner in place, and have it move down as the body content
grows in height.
Plus, the red bar of white text links on the left does not
"fill" the height down to the bottom banner area. I have about had
it, and am going to have to go back to my old Template way just so
I can get the stupid site up and running.
Can someone take a quick look at the code and see if anything
is obviously wrong?
here's the .css file:

Answer 1

>white gap below the logo
You need to: apply float:left to the #right-body. Change the
CSS to
#middle-parent #right-body {
margin-left: 220px; float:left;
You need to remove the <p> </p> before
the closing tag of
#middle-parent. You also need to clear the floats before the
closing tag.
Your webpage code
Replace
<p>d</p>
<p>d </p>
</div>
<p> </p></div>
with
<p>d</p>
<p>d </p>
</div>
<br style="clear:both" />
</div>
>red bar of white text links on the left does not "fill"
the height
It won't. Divs are different from tables. Divs are
independant of each other
unlike table cells of the same row, which stretch in height.
Google faux columns and you'll get solutions.
There are other CSS inconsistencies but I am not too
qualified to comment
there.
You cannot lose until you give up !!!
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I'm tellin' ya, I've been trying to grasp this stuff for
2 weeks, and it's
> just
> not working.
>
> I am trying to recreate a pretty simple layout that I've
used before
> pre-CSS,
> using tables.
>
> It's a simple top "banner" area, then 2 columns in the
middle (one narrow
> on
> left for links, one wide on right for content), and
another banner that
> flows
> below the middle area.
>
> I've tried every possible combination of DIVs (and
Layers...), float,
> clear,
> whatever. It just doesn't work.
>
> Here's the working URL of the master Template page:
>
>
http://www.valentines-day-flowers-by-schaefers.com/
>
> In DW, I don't get that white gap below the logo at the
top, but in a
> browser
> I do. For this attempt, I made a Parent DIV, and put the
2 columns in as
> Children, thus allowing me to put the bottom banner in
place, and have it
> move
> down as the body content grows in height.
>
> Plus, the red bar of white text links on the left does
not "fill" the
> height
> down to the bottom banner area. I have about had it, and
am going to have
> to go
> back to my old Template way just so I can get the stupid
site up and
> running.
>
> Can someone take a quick look at the code and see if
anything is obviously
> wrong?
>
> here's the .css file:
>
>
>
> body,td,th {
> font-family: Arial, Helvetica, sans-serif;
> background-image: url(images/mainhearttile.jpg);
> width: 175px;
> }
> body {
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> }
> a:link {
> color: #CC6666;
> text-decoration: none;
> }
> a:visited {
> text-decoration: none;
> color: #CC3300;
> }
> a:hover {
> text-decoration: underline;
> color: #FF0099;
> }
> a:active {
> text-decoration: none;
> color: #FF3366;
> }
> h1,h2,h3,h4,h5,h6 {
> font-weight: bold;
> }
> h1 {
> font-size: 24px;
> color: #000000;
> }
> h2 {
> font-size: 18px;
> color: #CC3399;
> }
> h3 {
> font-size: 16px;
> color: #CC0066;
> }
> h4 {
> font-size: 12px;
> color: #000000;
> }
> #top_nav {
> clear: both;
> width: 920px;
> overflow: hidden;
> background-image: url(images/heart-tile.jpg);
> height: 159px;
> z-index: 1;
> }
> #top-links {
> position:absolute;
> left:226px;
> top:93px;
> width:490px;
> height:24px;
> z-index:3;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 14px;
> font-weight: normal;
> color: #FFFFFF;
> text-decoration: none;
> }
> #middle-parent {
> width: 900px;
> clear: both;
> overflow: visible;
> }
> #bottom {
> height: 100px;
> width: 900px;
> background-color: #FFCCFF;
> }
> #middle-parent #left-nav {
> width: 143px;
> background-color: #990000;
> padding-left: 20px;
> padding-right: 10px;
> padding-top: 30px;
> padding-bottom: 20px;
> float: left;
> font-size: 12px;
> color: #FFFFFF;
> height: 100%;
> }
> #middle-parent #right-body {
> margin-left: 220px;
> }
> #top-links a:active {
> color: #FFFFFF;
> text-decoration: none;
> }
> #top-links a:link {
> color: #FFFFFF;
> text-decoration: none;
> }
> #top-links a:visited {
> color: #FF99FF;
> text-decoration: none;
> }
> #top-links a:hover {
> text-decoration: none;
> color: #660000;
> }
>