CSS, Main content div and sidebar length

I'm using DW CS4 and am using the 2 column fixed left sidebar with header and footer.
I want to make sure the main content div is never shorter than the length of the sidebar. I've got a coloured background, but want the bottom of the sidebar and main content div to be the same, if that makes sense?
Thanks

For equal height columns, create a 2-colored background image and repeat-y (vertically). This technique is called Faux Columns. See examples below.
3-Col Layout Before -
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
3-Col Layout After -
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

CSS - main content h1 and p text doesn't display properly

Hi all,
I know this is something really simple, but I just can't seem to get it right. The h1 and the p text in the main content should have left and right padding to display properly (i.e. space on either side so it's not squished against the Accordion Spry), but it doesn't work. It shows correctly in DW, but not online. I'm just learning CSS so sorry for the ignorance! I've tried everything I know and can't seem to get it right. I would appreciate ANY help at all.
http://www.TailgatorsHockey.com/news.html
Attached is the .css file...
Thanks so much!

The padding and margin are certainly showing in the browser for the h1 tag but you have no padding or margin declared in your css styles for the paragraph tag in the 'main-content' <div>
Add ths to your css styles:
#main-content p {
padding: 0 25px 0 25px; /*top/right/bottom/left*/
margin-left: 10px;

Making sidebar fill colors "scroll" with main content div

Just when I think this newbie is getting the hang of Dreamweaver, something throws me a curve
I have a three column fixed layout designed in Dreamweaver CS4 at the URL below. Each of the two sidebars - left and right - has a fill color. I would like those sidebar fill colors to "scroll" or "flow" down as the content of the middle, main content div expands. As it is, the fill color of the two sidebars stops when their content stops, even if the middle content continues.
I'm guessing I'm overlooking something simple here. Can someone tell me how to accomplish this?
Many thanks in advance.
http://firinglinedesign.com/mathieu/

That is really ingenious! Many thanks for the lead. For anyone else who has this issue, while there are many links on Google, this is the first one I came across and it solved my problem.
http://www.communitymx.com/content/article.cfm?cid=afc58
Many thanks, Murray.

DW template - why is the main content div lower than the columns?

I'm looking to use the DW template with 3 columns, a header and footer and have a couple of queries:
There is a gap between the header div and the main content div which does not appear to be a margin or padding. Why is the gap there?
Is it possible to remove this gap and have the main content div flush against the header div (like the 2 side bar divs)?

I don't have access to CS4 so cannot really determine what might be causing the gap. My suspicion, however, is that it's an escaping margin that is pushing the two divs apart. Try this - run a 1px solid border along the top of the main content div, e.g.,
div.content {
border-top:1px solid white;
Does that gap go away with the border in place? If so, then the top margin on the first child of that div is the culprit. The first child in that content div is usually an H1 tag.

Inheriting #main-content styling on sidebar a:link

The sidebar keeps "inheriting" #main-content styling on the sidebar links...
What can I do to have different styling for sidebar over 10 or so pages in my site?
Can see site at: artdesignsneed.com/joeldoctor
Sample styling in code for sidebar_right_inner link:
#sidebar_right_inner p a:link {
    color: #1A619A;
    border-bottom: 1px solid #1A619A;
    text-decoration: none;
Thanks ever so much!

CSS Pseudo-classes - Link States
You need to define a full set of link states (link, visted, hover, active) for each ID or class name required.
Let's say you want to have red links in your #header and white links in your #footer.
CSS:
#header a {text-decoration:none}
#header a:link {color:red}     /**unvisited**/
#header a:visited {color:gray} /**visited**/
#header a:hover,               /**on mouse over**/
#header a:active,              /**on click**/
#header a:focus                /**on tab key**/
    {text-decoration:underline}
#footer a {text-decoration:none}
#footer a:link {color:white}
#footer a:visited {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus
     {text-decoration:underline}
HTML:
<div id="header">
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
</div>
<div id="footer">
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
</div>
For more on CSS pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS layout - two questions on sidebar

So I'm having trouble with my sidebar:
site
1. I want to get it to stretch to the bottom of the div it's
in, with a 10 px margin on the bottom, basically, stretch exactly
the same distance down as the main content div. I get the
impression this is tough in CSS, but there has to be some work
around? I don't think I can use faux columns in this instance,
though if it's possible please explain how.
2. This isn't really a big deal, but it'd be nice to have a 1
px black line on only the left side of my sidebar (I have one drawn
onto the actual images, it'd be nice to do that in CSS). Is this
possible?
Thanks a lot and sorry for the beginner questions.

I have another question about the same site. In IE I'm
getting this:
pic
In Firefox I'm getting this:
pic
Firefox is much closer to what I want, but I'm not sure why
IE is showing up like it does. Seems the margins are changing and
IE is padding my sidebar for some reason. Any ideas?

Content Div drops down when browser re-sized in IE6

Hi all
Made my page width 100% in order to fix a background issue
Now when I make the browser width smaller the main content
div drops down in
IE6. Using min-width fixes the problem in IE7 and FF but IE6
does not work
with min-width.
Tried the hack width: expression(document.body.clientwidth
< 1026? "1024px"
: "auto"); in the css - placed in the #mainwrapper div but
does not seem to
be working in IE6
any ideas
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here

page is at
http://www.visit-the-coqui.com/Demo/index.html
cheers
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here
"B" <[email protected]> wrote in message
news:gh630q$229$[email protected]..
> Hi all
>
> Made my page width 100% in order to fix a background
issue
>
> Now when I make the browser width smaller the main
content div drops down
> in IE6. Using min-width fixes the problem in IE7 and FF
but IE6 does not
> work with min-width.
>
> Tried the hack width:
expression(document.body.clientwidth < 1026?
> "1024px" : "auto"); in the css - placed in the
#mainwrapper div but does
> not seem to be working in IE6
>
> any ideas
>
> --
> B
>
http://www.visit-the-coqui.com
> If you are thinking of a vacation to Puerto Rico
>
>
http://www.thegadgettraveler.com
> Travel gadget and other news here
>
>
>

Main content moves down in IE

Ok, here’s a quick question. This layout works in all
the browsers except IE 7 (I haven’t tried 6 or 5.5). In IE 7
it displays the main content below the sidebar floated to the
right. I tried ‘clear’ on both the sidebar and main
content. The conditional comments seem to work but, don’t
seem to quite fix the problem and I’m not sure if
that’s it or if they’re set up correctly.
I know I’m missing something probably easy. Any help
would be appreciated.
Here’s the url
http://www.garza-design.com/testsite/santa_b/index.html.
Thanks...

Opppss. Therewas a period at the end. Here you go.
http://www.garza-design.com/testsite/santa_b/index.html
Thanks...

How to keep the right sidebar on this website from going under the main content (center) column?

Hi...is there a way to keep the right sidebar on this website from going under the main content (center) column when the browser window is made smaller? It would be great if the middle (main content) column could get smaller instead of the sidebar moving under the text when the window is made smaller. I'm working with a fluid layout and this is the first time I've tried this. Any help would be appreciated. Here is the link to the website:
http://www.elynncohen.com
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">

</style></head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header">
    <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
    ; display:block;" /></a></p>
    <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
    <p class="clearfloat"> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">High School Students</a></li>
      <li><a href="#">College Students</a></li>
      <li><a href="#">Parents/Educators</a></li>
      <li><a href="#">Professionals</a></li>
      <li><a href="#">Bio</a></li>
      <li><a href="#">Q & A Blog</a></li>
      <li><a href="#">Testimonials</a></li>
    </ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
      <br><br><li><strong>Considering your college choices & career options</strong></li>
      <li><strong>Preparing for the world of work after college</strong></li>
      <li><strong>Seeking a new position to further your career</strong></li>
      <li><strong>In-transition and considering new opportunities</strong></li>
      <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
    </ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
    <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
    <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
     <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
     <p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
    <div id="footer">
      <h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
         </div>
    <p> </p>
</div>
</div>
</body>
</html>

You should make your sidebar1 and sidebar2 fixed positioned. Make your content DIV fluid.
This should help you: http://www.glish.com/css/7.asp

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

How do I make sidebar div move with the content div in Firefox 14?

Hello,
The sidebar div blocks the content div in Firefox 14 when the browser window is resized smaller. In other browsers, this is not a problem.
The website url is: www.gaddislaw.com
Thanks for your help!

I assume you want the main content text to be 'flexible' i.e., narrow and widen when you alter the size of the browser window. If so amend your 'content' css to as below:
.content {
padding-top: 25px;
padding-bottom: 10px;
margin-left: 290px;
margin-right: 40px;

Aligning Sidebar links to main content headings

In firefox I can align sidebar links to category headings so that when reading main content a reader is able to see related links in the sidebar....It doesn't aling in internet explorer....also in internet explorer the links indent I don't want them too...can someone please assist
http://www.informationrequested.com/SystemsTrading.html
Thanks for the help

Looks to me like Deja Vu all over again! As I told you before, the problem is still with your duplicated, erratic and often times contradictory CSS code.
Open a New, HTML document. In CODE VIEW, paste the following code. Look Ma, no validation errors!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/**zero out browser defaults on everything**/
* {margin: 0; padding: 0; border: 0; line-height:100%; font-size: 100%;
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #666666;
text-align: center;
color: #000000;
/**MAIN STYLES**/
h1 {line-height:2;
color: #FFF;
font-size: 150%;
font-style: italic;
font-weight: bold;
text-align: center;
h2 {margin: 15px 0 15px 0; line-height:1.5;}
h3 {margin: 12px 0 12px 0; line-height:1.2; font-size:90%}
#sidebar1 h3 {color: #FFF;}
#sidebar2 h3 {color: #F60;}
p {color: #FFF; line-height: 1.5}
a img {border: none}
img {padding: 15px 0 12px 0}
ul,li {
list-style:none;
line-height:1;
font-size: .80em;
/**LAYOUT**/
#container {
width: 780px;
background: #000;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
#header {
background: #000;
border-bottom: medium double #FFF;
#sidebar1 {
float: left;
width: 150px;
padding: 15px 10px 15px 20px;
font-size: 100%;
color: #000;
background-color: #000;
#sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
background-color: #000;
color: #B16D2E;
padding: 0px 10px 15px 20px;
#mainContent {
margin: 0 200px;
padding: 0 10px;
background-color: #000053;
color: #FFF;
#footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
#footer p {
margin: 0;
padding: 10px 0;
font-size: 12px;
color: #000;
/**SIDEBAR LISTS**/
#sidebar1 ul li a {
color: #FFF;
text-decoration: none;
padding: 2px;
display: block;
#sidebar1 ul li a:hover {
color: #FFF;
background-color: #0000FF;
#sidebar2 ul li a {
color: #F60;
background-color: #000;
padding: 2px;
display: block;
#sidebar2 ul li a:hover {
color: #F60;
background-color: #FFF;
/**FLOATS**/
.fltrt { float: right;margin-left: 8px;}
.fltlft { float: left;margin-right: 8px;}
.clearfloat { clear:both; height:0;font-size: 1px; line-height: 0px;}
/**LINKS**/
a:link {color: #FFF;}
a:visited {color:#CCC;}
a:hover {color:#FF9900;}
a:active{color:#CCFF00}
</style>

</head>
<body>
<div id="container">
<div id="header">
<h1> COMMODITY FUTURES</h1>
</div>
<div id="sidebar1">
<h3>Commodity Futures</h3>
<ul>
<li><a href="index.html" title="Commodity Futures">Home</a></li>
<li><a href="DayTradingFutures.html" title="Day Trading Futures">Day Trading Futures</a></li>
<li><a href="#">Emini Trading </a></li>
<li><a href="#">Forex Trading Online </a></li>
<li><a href="#">Futures Options</a></li>
<li><a href="#">Index Trading</a></li>
<li><a href="#">Managed Futures</a></li>
<li><a href="#">Online Futures Trading</a></li>
<li><a href="SystemsTrading.html" title="Systems Trading">Systems Trading</a></li>
</ul>
<p><img src="images/Choice.jpg" width="148" height="113" alt="Online Futures Trading"></p>
<h3>Futures Trading Strategies</h3>
<ul>
<li><a href="#">Short-Term Trading</a></li>
<li><a href="#">Intraday Trading</a></li>
<li><a href="#">Swing Trading</a></li>
<li><a href="#">Spread Trading</a></li>
<li></li>
</ul>
<h3>Option Trading Strategies</h3>
<ul>
<li><a href="#">Buying Options </a></li>
<li><a href="#">Selling Options </a></li>
<li><a href="#">Option Spreads</a></li>
</ul>
<h3>Tutorials on</h3>
<ul>
<li><a href="#"> Futures Market</a></li>
<li><a href="#">Futures Trading</a></li>
<li><a href="#">Futures Options Trading</a></li>
<li><a href="#">Technical Analysis</a></li>
</ul>
</div>
<div id="sidebar2">
<h3><img src="images/SystemsTrading.jpg" alt="Systems Trading" width="113" height="170"></h3>
<h3>Systems Trading </h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading"> Advantages </a></li>
<li><a href="#Disadvantages" title="Disadvatages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type">Types of Systems</a></li>
<li><a href="#Design" title="Systems Trading Design">Designing Systems</a></li>
</ul>
<p><img src="images/Advantages.jpg" width="109" height="170" alt="Advantages of Systems Trading"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design">Designing Systems</a></li>
</ul>
<p><img src="images/Disadvantages.jpg" width="113" height="170" alt="Disadvantages of Systems Trading"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing Trading Systems">Designing Systems</a></li>
</ul>
<p><img src="images/Types of Trading Systems.jpg" width="124" height="121" alt="Types of Trading Systems"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Type of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing Trading Systems">Designing Systems </a></li>
</ul>
<p><img src="images/Designing.jpg" width="125" height="122" alt="Designing a Trading System"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing a Trading System">Designing a System</a></li>
</ul>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Actual System</a></li>
<li><a href="#">Constructing a System</a></li>
<li><a href="#">Ask a Developer</a></li>
</ul>
</div>
<div id="mainContent">
<h1>Systems Trading</h1>
<p>A Trading System is an automatic implementation of a trading strategy through the use of entry and exit orders based on a set of predefined rules. One major reason trading systems have become so popular is the basic concept that automated systems trading is supposed to takes out the human emotion of trading. These trading systems are also able to deploy complex strategies more easily and efficiently.The use of such trading systems has intensified with the continuous growth in the volume of trade worldwide.</p>
<p>Computerized Systems Trading methods rely on one simple assumption, that price trends may be discerned in the futures markets and speculative risk can be reduced utilizing such trading systems. These trading systems are able to calculate very large mathematical ideas within a very short period of time, thus supposedley giving the edge to the systems trader. </p>
<p>I would like to point out that the by utilizing trading systems it is not the holy grail to trading. Though there are plenty of gurus on the internet that supposedy have found the secret with their trading systems and for a mere x amount of dollars you too can own or lease the their holy grail of trading. It is my intention just to make the buyer of these systems aware that utilizing trading systems is a viable option but is not without the same risk every trader assumes when speculating in the commodity markets.</p>
<p>With that said systems trading has it's definite advantages for certain type's of traders and also has it's drawbacks. In this article I will address some of the advantages, disadvantages, system concepts and alternate recsources for system traders. We also invite you to share some of your insights about systems trading and how it may have helped or hindered you in your pursuit of profits in the marekts.</p>
<h2>Advantages of Systems Trading</h2>
<p>The first advantage for systems trading is that once it is developed, tested and implemented the need for a trader to monitor the markets and implement the trades are no longer necessary. Computers become the trade executioner and manager. Therefore, a trader that does not have the ability to monitor the markets as do professional traders then a trading system might be a good way for this type of trader to participate in the markets.</p>
<p>Another advantage of system trading is that it takes the emotion out of trading, which is often cited as one of the biggest problems traders encounter. By utilizing a trading system a commodity trader need not make any decisions, which in turn will make an automated trading system more consistent in it's entry and exit of trading strategies.</p>
<p>And if you don't have the time or experience to develop your own trading system you could buy or lease a trading system. Some companies sell trading systems that they have created while other companies will give you the signals generated by their trading systems for a fee. You may also have a profitable manual trading strategy that can benefit from automation, but you lack the necessary programming skills. In this instance there are companies that will take your manual strategy and automate it. There are other companies that can audit your trading system or proposed trading system and suggest areas of improvement. which could substantially improve your bottom line results. There are definetley plenty of resources for traders looking at utilizing trading systems.</p>
<h2>Disadvantages of Systems Trading</h2>
<p>Trading Systems can be very complex and typically required a thorough understanding of technical analysis, order entry and risk management. Acquiring these skills can be time consuming and overwhlming for novice and intermediate commodity traders.</p>
<p>Another reality of designing, building and testing a trading system is that it can be very time consuming. A non-professional trader who has other commitments may just not have the time required to develop the trading system and get it online functioning properly.</p>
<p>Another disadvantage system traders encounter is that simulated results sometimes differ greatly from actual results and can be a major problem to implementing the trading system. The reason could be the accuracy of the data, slippage, transaction costs and or commissions. </p>
<p> A commodity trader attempting to design and build a trading system may find themselves frustrated and overwhelmed with the process. Therefore, don't forget it sometimes a systems consultant can be worth the expense in helping get your trading system working properly.</p>
<p>There is no fool proof trading system and there are many type of trading system to choose. There are systems that specialize in certain markets and or designed specifically for day trading or longer-term time frames. Each trading system will have unique characteristics in regard to money management, time in the market and whether it is part of a single or diversified portfolio.</p>
<h2>Types of Trading Systems</h2>
<p>Most trading systems are based upon technical analysis, which is what I will be focusing on. Trading systems are based on technical analysis such as; moving averages, relative strength indicators, chaos theory, fibonacci retracements just to name a few. They can be simple to very complex in how they generate trading signals and can be implemented in several markets or just one.</p>
<p> There are thousands of trading systems that generally operate on one of three time frames or objectives. The times frames are typically intraday, intra-week or intra-month and long term. Each of these time frames can se a commodity trader implement a trend-following system, a countertrend system or a breakout system.</p>
<p>Each system strategy and time frame has advantages and disadvantages and the common denominator within all these systems is that they all are fully automated and do not require constant monitoring of the markets once deployed.</p>
<p>A Trend-Following System is probably the most common method of system trading. In it's most basic form, this trading system simply watis for a significant price movement in one direction and then buys or sells the commodity in that direction. A trading system designed with this concept will utilze such trading models as a moving average crossover. </p>
<p>A Countertrend system is basically the opposite of a trend-following system. The fundamental idea behind countertrend trading systems is to sell when markets are rallying and buy when markets are selling-off. A trading system designed with this basic concept will utilize differenct types of Oscillators that illustrate trend weakness or strength through mathematical calculationssuch as Stochastics or Relative Stregth Indicators.</p>
<p>A Breakout Trading System is based on the theory that if a market establishes a new high or low, the price movement is most likely to continue in the direction of the breakout. An example of a simple breakout system would be if a previous high in a market over a period of days, weeks or months was broken and a buy stop order was deployed would be an example of a very simple Breakout System.</p>
<p>Just like anything in regard to trading there are no magic wands or super secret trading systems that will make you a millionare overnight. Trading is a game of calculated risks in the pursut of profit and the type of methodology you decide to employ whether it is a manual trading system you designed or an automated system designed for you it all comes down to your personal preference. </p>
<h2>Systems Trading Design</h2>
<p>In planning a trading system here are some basic principles that govern the construction of any trading system. A Trading System must be objective, easy to use and must give clear entry and exit signals. Furthermore a Trading System must produce winning trades while not only attempting to limit the risk per trade but also too keep the drawdowns to a minimum.</p>
<p>These are the foundation blocks from which a trading system can be designed, contructed, tested and implemented, though they are not a guarantee of succeess. This artilce has given you a basic understanding of trading systems and the different types of trading systems that are deployed in the commodities market. Be sure to utilize the resources found on this website to help you in all aspects of systems trading. </div>
<br class="clearfloat">
<div id="footer">
<p>2009 Commodity-Futures All Rights Reserved</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Scrolling main content in an AP Div disappearing behind other AP Divs...?

Newbie here, using CS3. No CSS power user (yet!)--general concepts, yes, but not much practice. Meanwhile two recent CS3 classes, several books, and a concerted search through online forums have failed to point me toward a fix for this prob. Any help greatly appreciated.
Prob statement: In design view the core content of my pages disappears behind my footer and a secondary box, both AP Divs, so that I cannot see or edit anything beyond the bottom edge of the core-content AP Div. Overflow for that AP Div is set to scroll. The "obscured" content shows up only as an outlined shape extending past the footer etc. (and I can see some of the obscured text "through" the footer). Down arrow doesn't get me there: it just scoots down the outlined-but-obscured section. Doubleclicking highlights everything that's obscured so that I can see the relative shapes of the paragraphs, but doesn't expose the content. This seemed to start the first time I set the content div to scroll any overflow. I've changed it back/forth since; no joy.
Rendered in IE or Firefox, all the pages with all their varying content lengths look fine. Scrollbar works great. It's just that in order to edit or compose further, I have to copy everything into Notepad or something, work there, and then paste it back into DW. Definitely non-optimum, though: can't format or add hyperlinks to the content.
I'm using AP Divs, with scroll on in the "content" AP Div, because I couldn't figure out how to create a template where the footer would slide down the page in response to varying amounts of content. Started out with a table to handle all this, but an instructor recommended AP Divs so I went that way. I'd like to resolve this, rather than just go back to using tables while leaving this AP Div oddness a mystery.
The footer is full of a Spry tabbed panels giving my legal/green/design statements and other small bits of info. The secondary box is an AP Div called "quotations" and is for friendly little bits of cute/clever nonsense at the bottom of each page.
Tried a number of different settings so far and by now I've probably truly messed things up. Can anyone suggest a fix?
The code for the template file seems long, so my apologies. However, the content type isn't allowed for attachments so I've pasted it in below.
Much appreciation!
=================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>

<style type="text/css">

</style>
<meta name="Description" content="Skyway Consulting: taking your information to a higher level! We do information design: planning, writing, editing, and indexing your user documentation. We also design websites, website graphics, print layouts, and logos. Basically, we want to be your source for the way your organization interfaces with the world. " />
</head>
<body onload="MM_preloadImages('../Images/Button_WebDesignOver.gif','../Images/Button_UserDocsO ver.gif','../Images/Button_LogoDesignOver.gif','../Images/Button_PrintLayoutOver.gif','../ Images/Button_ITSvcsOver.gif','../Images/Button_Home.gif','../Images/Button_HomeOver.gif', '../Images/Button_WebDesign.gif','../Images/Button_UserDocs.gif','../Images/Button_ITSvcs. gif','../Images/Button_LogoDesign.gif','../Images/Button_AboutUs.gif','../Images/Button_Co ntact.gif','../Images/Button_AboutUsOver.gif')">
<div id="LeftSidebar"></div>
<div id="Banner">
<div align="center"><img src="../Images/Banner.gif" alt="Skyway Consulting" width="335" height="184" /></div>
</div>
<div id="BannerPhone">
<p align="center">Taking your information to a higher level.</p>
<p align="center">530.965.2624</p>
<p align="center"><img src="../Images/email_Info.gif" alt="Address" width="203" height="23" /></p>
</div>
<div id="NavBar">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="../index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','../Images/Button_HomeOver.gif',1)" onmouseover="MM_nbGroup('over','Home','../Images/Button_HomeOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_Home.gif" alt="Skyway Consulting Homepage" name="Home" border="0" id="Home" onload="" /></a></td>
      <td><a href="../webdesign.html" target="_top" onclick="MM_nbGroup('down','group1','WebsiteDesign','../Images/Button_WebDesignOver.gif', 1)" onmouseover="MM_nbGroup('over','WebsiteDesign','../Images/Button_WebDesignOver.gif','',1) " onmouseout="MM_nbGroup('out')"><img src="../Images/Button_WebDesign.gif" alt="Website Design Services" name="WebsiteDesign" width="106" height="30" border="0" id="WebsiteDesign" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','UserDoc','../Images/Button_UserDocsOver.gif',1)" onmouseover="MM_nbGroup('over','UserDoc','../Images/Button_UserDocsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_UserDocs.gif" alt="User Documentation Services" name="UserDoc" width="106" height="30" border="0" id="UserDoc" onload="" /></a></td>
      <td><a href="../it_svcs.html" target="_top" onclick="MM_nbGroup('down','group1','ITServices','../Images/Button_ITSvcsOver.gif',1)" onmouseover="MM_nbGroup('over','ITServices','../Images/Button_ITSvcsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_ITSvcs.gif" alt="IT Services" name="ITServices" width="106" height="30" border="0" id="ITServices" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','LogoDesign','../Images/Button_LogoDesignOver.gif',1) " onmouseover="MM_nbGroup('over','LogoDesign','../Images/Button_LogoDesignOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_LogoDesign.gif" alt="Logo Design Services" name="LogoDesign" width="106" height="30" border="0" id="LogoDesign" onload="" /></a></td>
      <td><a href="../about.html" target="_top" onclick="MM_nbGroup('down','group1','AboutUs','../Images/Button_AboutUsOver.gif',1)" onmouseover="MM_nbGroup('over','AboutUs','../Images/Button_AboutUsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_AboutUs.gif" alt="AboutUs" name="AboutUs" border="0" id="Contact" onload="" /></a></td>
    </tr>
</table>
</div>
<div id="Content">
<p>Content</p>
</div>
<div id="Footer">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Info</li>
      <li class="TabbedPanelsTab" tabindex="0">Legal</li>
      <li class="TabbedPanelsTab" tabindex="0">Privacy Policy</li>
      <li class="TabbedPanelsTab" tabindex="0">Green Statement</li>
      <li class="TabbedPanelsTab" tabindex="0">Design Credit</li>
      <li class="TabbedPanelsTab" tabindex="0">Webmaster</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Click for information on these topics.</div>
      <div class="TabbedPanelsContent">(c) 2009 Skyway Consulting. All content, including photographic content, is owned by Skyway Consulting. You may not copy, reproduce, modify, or publicly display, perform, distribute, or otherwise use the content provided on this site in any way for any public or commercial purpose. Skyway Consulting will not work on websites involving objectionable material, including but not limited to pornography, hatred, intolerance, or animal abuse. Our management staff's decision on what constitutes "objectionable material" is final. </div>
      <div class="TabbedPanelsContent">We recognize that your privacy is important. This privacy policy applies to all of our services and website pages. We do not set cookies. We do not sell or otherwise seek to profit from the contact information you provide, although we may preserve some information for use by Skyway Consulting. If you have questions about this privacy policy, please [link]contact us.</div>
      <div class="TabbedPanelsContent">Skyway Consulting is an American home-based business that makes every effort to conserve, reduce, reuse, and recycle.</div>
      <div class="TabbedPanelsContent">
        <p>Page design by Skyway Consulting. (Of course!)</p>
        <p>Tiling forest graphic at left by the talented Silvia Hartmann, <a href="http://silviahartmann.com/">http://silviahartmann.com/</a>. (Thank you, Silvia!)</p>
      </div>
      <div class="TabbedPanelsContent">Page problems? Contact <img src="../Images/email_Webmaster.gif" alt="Webmaster e-dress" width="177" height="18" align="absmiddle" /></div>
    </div>
</div>
</div>
<div id="Quotation">Quotation</div>
<div id="Heading">Heading</div>
<div align="center"></div>
<script type="text/javascript">

</script>
</body>
</html>

I hadn't looked at the code at all. I was relying on the Dreamweaver GUI to correctly guide me to a desired outcome.
I think that this is not a desirable approach to Dreamweaver, which will write perfect HTML if you let it, but it's too easy to click buttons and apply wizards without regard for the markup consequences, thereby producing a veritable pig's ear of a page. If you are going to use DW professionally, you will have to become comfortable with code. That doesn't mean you will have to spend 100% of your time in Code view, but you will definitely need to watch the code as it is formulated.
I'm not starting from an engineering background.
Neither did I. But I did start with a sincere desire to become proficient, and to learn the technology.
Murray, I get the idea of redoing my template without AP Divs, and will get into that. I don't know what "image swaps and links" mean, though. Would you mind teaching this newbie on this point?
Not at all. When you select the "NavBar" feature, you are placing elements and code on your page that were designed in the dark ages of HTML (frames). Some of the features in the NavBar will only work in a framed page (the down image and the over while down). The code is antique, invalid, and just wrong to be included. My suggestion was to forego this and just place your button images on the page (in whatever container you need to use), and apply links to them so that they link to the desired pages. Then apply swap image behaviors to them to create your rollover effects, one for each button. The result will be modern code, that has none of the legacy stuff of the navbar, and that will work fine for you. As you become more familiar with CSS you can investigate even better ways to do such menus (if you want a preview of this, Google "CSS Sprites). The latter method is usually the only way I do menus anymore. And even then, I use both text and graphics for accessability and SEO purposes.
I will say that I like your attitude. A determination to learn and improve is a winning approach.

I want my content div to the right of sidebar

I'm building a page from scratch (to my specs for layout of
other pages in my site), blank HTML, fixed at 780 pixels. I have
all of my divs in place but I want my sidebar (which will be my nav
bar) to the left of the page and all the way down, and to the left
of my content, but my content is positioned under my sidebar and
spans across the width of the page. I want my content to the right
of the sidebar and under the header. Can someone tell me what rules
I should edit to get this to happen.
I attached my code. Thanks.

Hello,
Float the sidebar left, like so:
#sidebar {
font-family: Arial, Helvetica, sans-serif;
background-color: #e8e8e8;
width: 200px;
float: left;
Give the content div a left margin of 210px.
I also added some padding. Adjust as needed.
#content {
background-color: #121922;
padding: 10px;
margin: 0px 0px 0px 210px;
font-family: Arial, Helvetica, sans-serif;
color: #e8e8e8;
The content of the divs will determine the height.
If you want the sidebar to appear to be the same height as
the content div,
check out this technique:
http://www.alistapart.com/articles/fauxcolumns/
Take care,
Tim
"Rock Artist" <[email protected]> wrote in
message
news:[email protected]...
> I'm building a page from scratch (to my specs for layout
of other pages in
> my
> site), blank HTML, fixed at 780 pixels. I have all of my
divs in place but
> I
> want my sidebar (which will be my nav bar) to the left
of the page and all
> the
> way down, and to the left of my content, but my content
is positioned
> under my
> sidebar and spans across the width of the page. I want
my content to the
> right
> of the sidebar and under the header. Can someone tell me
what rules I
> should
> edit to get this to happen.
>
> I attached my code. Thanks.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <title>Photo Gallery</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="wrapper">
> <div id="header"></div>
> <div id="sidebar">This will be my navigation bar
with all of my pages
> listed............right here.........</div>
> <div id="content">Content for id "content" Goes
Here and I wonder if I
> fill
> this up some that it will actually move to the right off
my sidebar and it
> did,
> but why is my content section not going all the way to
the top next to the
> header div? Maybe I should give it a fixed size and
float it to the right.
> </div>
> <div id="footer">Content for id "footer" Goes
Here</div>
> </div>
> </body>
> </html>
>

Fixed Nav Bar, Fixed Sidebar, Scroll Main Content

Can someone direct me to some good documentation to learn how to design a page to have a fixed nav bar, fixed sidebar and main content that scrolls?
My objective is to have the nav bar/sidebar visible at all times when the user is scrolling through the main content.
Thanks.

On line 135, you have this:
<td align="left"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" align="left" />
Try this:
<td align="left"> <div style="overflow:auto; height: 200px"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" />
Don't forget to close the division right before the cell closure.
</div>
</td>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS, Main content div and sidebar length

Similar Messages

Maybe you are looking for