Overlapping floating divs

I have asked a similar question to this before because I cant get my head around the problem at all.
the code bellow produces the result shown in the FIRST picture bellow (note that I have selected the chive div in the code to make a blue outline appear where the div is being rendered behind the red one)
what is causing this?
how do i prevent it on this occasion?
how do i do it deliberately in future?
just as an item of curiosity i have added the SECOND image which shows what it looks like when the hidden
div is given just enough margin left to partially poke out to the far right side. as you can see it appears behind the other divs and it stays behind them regardless of Z-index settings.
-------------------------------------------------<!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>Untitled Document</title>
<style type="text/css">
#james {
background-color: #F00;
height: 500px;
width: 500px;
float: left;
#rosie {
background-color: #00C;
height: 100px;
width: 100px;
float: left;
#chive {
background-color: #390;
height: 200px;
width: 200px;
</style>
</head>
<body>
<div id="james"></div>
<div id="rosie"></div>
<div id="chive"></div>
</body>
</html>

the code bellow produces the result shown in the FIRST picture bellow (note that I have selected the chive div in the code to make a blue outline appear where the div is being rendered behind the red one)
what is causing this?
how do i prevent it on this occasion?
how do i do it deliberately in future?
What is causing this?  I assume you mean why is the chive div behind the james div?  The answer is that the james and the rosie divs are floated.  When an element is floated it is removed from the flow of the code on the page.  Being removed from the flow, they cannot affect the location of other non-floated elements.  The first element on the page that is not floated is the chives div.  Since it is position:static (the default), it is placed at the top, left corner of the page - and that's where you see it lurking underneath the james div.
How do you prevent it on this occasion?  By clearing the float (assuming that you WANT the chives div to fall BELOW the james div.  See the page after changing the chive CSS to this code -
#chive { background-color: #390; height: 200px; width: 200px; clear:left; }
  3.  How do you do it deliberately in future?  Place a non-floated block element after a floated block element.
just as an item of curiosity i have added the SECOND image which shows what it looks like when the hidden
div is given just enough margin left to partially poke out to the far right side. as you can see it appears behind the other divs and it stays behind them regardless of Z-index settings.
That's exactly what you would expect.  None of these elements are positioned as anything other than the default (static) so z-index would not apply.  By adding left margin to the chive div, you cause it to migrate away from the left margin, and your margin setting has migrated it far enough to begin to show to the right of the james div.
Make sense?  Read about floats to really get it....
Message was edited by: Murray *ACP*

Similar Messages

  • Floating divs of different heights

    I have a layout that a client requires that is 3 columns wide
    I am trying to set it up with floating divs and the divs have different heights.
    What is the best way to lay this out and is it possible to use Edge Reflow to do this as when I lay out the divs at my starting resolution and then start to change it for media queries the divs move from their starting positions.
    Hope it clear what I'm trying to achieve.
    Would I be better using Dreamweaver to do this than edge reflow?

    I think you are expeciencing someting similar to this user's post:
      http://forums.adobe.com/message/5542351#5542351
    We are looking at solutions, and it definitely helps us to understand how users experience the problem.

  • Floated DIV alignment woes

    I have created 9 left-floated DIV 3 a row with the last div of the first row taller than the first two, how can i make the first two div of the second row occupy the space on top of them instead of aligning to the bottom of the 3rd div in the first row.

    It's difficult to envision your layout, considering a float left on 9 divs should have the effect of aligning them next to one another, from left to right, like so: http://www.webmagi.com/Tests/Floating-Divs.htm
    Dreamweaver leaves much to be desired with regards to visually working with CSS based layouts. You might look into Stylizer 5 for this: http://www.stylizerapp.com/ (Great video intros)

  • Why is the length of a floated div ignored by the outer wrapper?

    I'm having a hard time understanding whether floated elements are relatively or absolutely positioned.
    When I do a "float:right" on a narrow column, the text outside that column seems very aware of its existence. It won't appear under it - it will instead wrap around it. It will make room for it.
    However, the outer wrapping div ignores the floated div completely. It will only take into account (and accomodate for) whatever amount of text is NOT in that inner floating div.
    Example :
    <div class="wrapper">
      <div style="float:right">
        Float right contents.
      </div>
      This is the content that isn't floating right.
    </div>
    If the right-floated contents are longer than the content that isn't floated right, the outer wrapper ignores it. It will only accomodate the text that isn't being floated. If the floated text exceeds the non-floating text, the floating text will bleed outside the outer wrapper.
    How do I make the outer wrapper accomodate the right-floated div as well?

    I'm having a hard time understanding whether floated elements are relatively or absolutely positioned
    Neither.  Floats are floats.  The take content out of the normal flow.  For this reason, you must clear floats after they are no longer needed.   I typically use a br, p or hr tag with a clearing class like so:
    CSS:
    .clearFloat {clear:both; height 1px; visibility: hidden}
    HTML:
    <hr class="clearFloat" />
    Floats and Margins Demo.
    http://alt-web.com/DEMOS/3-CSS-boxes.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Floating divs

    Hey TLF team,
    Do you have any immediate plans to implement floating blocks instead of just floating images?  I am currently implementing a stop-gap measure that splits the input up into multiple blocks, renders each to a different textflow, then lays them out on the page, but obviously this isn't optimal and if you guys are on the verge of implementing floating divs then I'll hold off!
    The reason I ask this is that I noticed that Jin Huang posted 'We are implementing border feature and backgroundColor of "block element" now', which suggests that you might be implementing other block features too...
    To confirm I am talking about the kind of block floats that would allow layouts similar to:
    http://www.maxdesign.com.au/articles/css-layouts/two-fixed/
    to be created in a single text flow.

    Thanks for your reply - in that case I shall continue with my original plan.  It would be really cool if you guys could add this feature at some point as when you have a lot of floating divs as seperate TextFlows on the screen at once things can get slow and it would be nice if this was handled within a single TextFlow.
    Congratulations on your work on TLF so far!

  • Floating divs made to have equal heights

    Hi all
    Is there a CSS way to get two divs (that will have different
    lengths of
    text) to have the same height. If not CSS what other
    techniques are there to
    achieve this - or is it not possible
    Thanks
    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

    Thanks Osgood - I did not think of the faux column option and
    using it for
    divs - I'll check that out - thanks
    Thanks for the P7 link too
    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
    "Osgood" <[email protected]> wrote in
    message
    news:gbg62d$14n$[email protected]..
    >B wrote:
    >> Hi all
    >>
    >> Is there a CSS way to get two divs (that will have
    different lengths of
    >> text) to have the same height. If not CSS what other
    techniques are there
    >> to achieve this - or is it not possible
    >>
    >> Thanks
    >>
    >
    > You can use javascript, read this article about eqaul
    height columns
    >
    >
    >
    http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
    >
    >
    > or you can wrap the two floated <divs> in another
    <div> and use a
    > repeating background image, google 'faux columns'

  • Arranging a tight grid of floating divs with varying heights

    When creating a grid using floating divs of varying height, the divs that carry over into the next row often find themselves in the second or third column rather than going immediately below the first div in the first column.  I'm curious how I could make them fill in each column. I've attached some photos to better exemplify this.
    Currently the first div in the second row is only moving into the 4th column do to the varied heights of the divs in the first row.
    I'd like to have the divs look like this:

    Division-itis.  You don't need to place each thumbnail inside it's own floated division.  Why not just insert the thumbnail images into a single container like so?
    <div id="thumbnails" style="width:900px">
    Image here, image here, image here, etc...
    </div>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • WMA Player Plug-in in Floating DIV

    Here is a 'test' page that I've created:
    http://www.justus.ca/test/vocab/professions.html
    It has a 'floating' Windows Media Play plug-in within a
    floating div at the
    upper left of the screen. I can not get it to play, so I
    copied the player
    and pasted it into the first cell of the table as a 'test'.
    That player
    plays fine. It is an exact duplicate of the player in the
    floating div
    other than where it is located. Can anyone tell me how I can
    get the
    floating player to work? I want the player to stay fixed on
    the screen
    while people scroll the page to follow the audio being
    played.

    Try using this website
    http://cit.ucsf.edu/embedmedia/
    Note its easily to test an online media file then a local
    media file I find.
    For online files you can simply type the web address into the
    media player script
    for local file it has to be something like this src=file://
    etc..
    not just src=file.mp3
    so try to upload you music or video file onto the internet
    then
    use the generator on the website
    easy peasy
    Bookmark it its the best around....
    Daniel Lee
    | CEO - Lead Developer
    | Developer Trainer
    |
    http://www.onemegamarket.com

  • Background div do not support floating divs

    I've created quite simple construction, but it doesn't work in way I want to.
    I have wrapper which do not wrap up the floating divs placed in it as it should -
    it shrinks to base size (top and bottom corners) and stays like that while floating substances maintain previously defined positions - only without background...
    Any suggestions how to fix this?
    The construction looks round about like this:
    <body>
    <div> div tag  with height: 5px; contains top corners for layout </div>
    <div class= "opened div tag with backround attributes (color and borders)">
             <div>here comes the floating content (list with style set to: none;)
                   I set it inside the div with background attributes to have floating content wrapped into background color and borders
            </div>
    </div (here i close "background wrapper")>
    <div> div tag with heightL 5px; contains bottom corners for layout </div>
    </body>
    Thanks.

    This is a bit of a shot in the dark but try overflow: hidden; in the CSS rule for your wrapper?
    It would be much easier to see the page.
    Martin

  • Floating div pushes p content down

    Hello,
    I have created a floating div that a use to place pictures in
    so that the text will flow around it. This all works fine.
    However when i place the text within a <p></p>
    tag, it forces the text below the picture and not flow around it.
    Why might this be? Thanks

    Impossible to say without seeing your code....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Si Fi" <[email protected]> wrote in message
    news:eqil2v$d80$[email protected]..
    > Hello,
    >
    > I have created a floating div that a use to place
    pictures in so that the
    > text
    > will flow around it. This all works fine.
    >
    > However when i place the text within a
    <p></p> tag, it forces the text
    > below
    > the picture and not flow around it.
    >
    > Why might this be? Thanks
    >

  • Issues with floated DIV layout

    Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
    I have tried display: inline thinking it may be a margin/padding issue?
    http://www.sopasbeauty.co.uk
    what am I doing wrong, should I be adding clearfloats to separate area's of the page??
    Mark

    First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional.  Then try changing this -
    <div class="boxes" id="box1">
          <h1>Acrylic Nails</h1>

  • How do you keep bottom columns from overlapping another div

    I am using DW CS3 and am following instructions on making first web page everything is fine till I get to positioning the columns at the bottom of page when i try and set a css rule to position left column the column overlaps the previous div the instructions i am using are from adobe http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt2_08.html here is the code that I have up to the point that I put in the rule for the left column for the design page   
    <div id="container">
       <div id="banner"></div>
       <div id="main_image></div>
       <div id="left_column">Content for id"left_column" Goes Here</div>
       <div id="column_container">
           <div id="right_column">Content for id"right_column" Goes Here</div>
           <div id="center_column">Content for id"center_column" Goes Here</div>
       </div>
    </div>
    On the CSS page that is attached to it the code is as follows:
    #container  {
    width:  968 px;
    background:  FFFFFF;
    margin:  0 auto:
    padding-left:  10px:
    padding-right:  10px:
    overflow:  hidden;
    #banner  {
    background-image:  url(images/banner.gif);
    height:  100px;
    width:  968px;
    #main_image  {
    background-image:  url(images/main.jpg);
    height:  376px;
    width:  968px;
    and then I am suppossed to do a box with width of 316 and float left when I do this it floats left and goes down in size but also goes up into the top of my main image why is this happening?

    Zabberwan is correct  :-)   If the basic css is not written correctly, the page will not display as intended.  You are using a colon (:) instead of a semi-coon (;) to close off the style rule... in addition, the #hash tag was missing from the background rule.
    This is what your code should look like before proceeding with the next step of the tutorial:
    <!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>Untitled Document</title>
    <style type="text/css">
    #container {
        width:  968px;
        background: #FFFFFF;
        margin:  0 auto;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    #banner {
        background-image: url(images/banner.gif);
        height:  100px;
        width:  968px;
    #main_image {
        background-image: url(images/main.jpg);
        height: 376px;
        width: 968px;
    </style>
    </head>
    <body>
    <div id="container">
      <div id="banner"></div>
      <div id="main_image></div>
       <div id="left_column">Content for id"left_column" Goes Here</div>
      <div id="column_container">
        <div id="right_column">Content for id"right_column" Goes Here</div>
        <div id="center_column">Content for id"center_column" Goes Here</div>
      </div>
    </div>
    </body>
    </html>

  • Header image overlapping menu div tag...

    Hi,
    I have decided to play some more with Dreamwaver, and started to build a website in it. So far everything went smooth, but I have to place the menu buttons over the header image (which is the background for my buttons in the same time) and noticed that the same header image is overlapping the menu buttons, but only in the editor mode, when I test the website inside my browser the buttons are visible and are ok.
    I have tried to set both in positioning to Absolute, and set the z-index...but in the editor mode the header still overlaps the menu buttons.
    Here is the source 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>InfoSpot</title>
    <link href="css/template.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!--main wrapper-->
    <div id="wrapper">
    <!--header-->
    <div id="header"><img src="images/logo.png" alt="logo" name="logo" width="783" height="167" id="logo" /></div>
    <!--menu buttons-->
    <div id="homeBtn">Home</div>
    <!--main content-->
    <div id="mainContent">
      <p>Lorem ipsum dolor </p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor.  Aenean massa.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.  Nulla consequat massa quis enim.  Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.  Nullam dictum felis eu pede mollis pretium.  Integer tincidunt.  Cras dapibus.  Vivamus elementum.</div>
    </div>
    </body>
    </html>
    And the css:
    @charset "utf-8";
    body {
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg.png);
    #wrapper {
    width:900px;
    height:800px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    #header {
    width:800px;
    height:167px;
    font-size: 2em;
    color:#900;
    padding:0em;
    margin-left:100px;
    float:left;
    #homeBtn {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    font-weight:bold;
    color:#5a5959;
    width:70px;
    height:30px;
    float:left;
    margin-top:-10px;
    margin-left:370px;
    padding: 3px;
    text-align: left;
    #mainContent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height:1.6em;
    color: #5a5959;
    border:;
    margin-top: 70px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 355px;
    width: 450px;
    float: left;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: left;
    #mainContent p {
    font-family: "Arial", Times, serif;
    font-weight:bold;
    font-size: 1.6em;
    color: #5a5959;
    .imagesLeft {
    padding: 3px;
    clear: left;
    float: left;
    margin-top: 3px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 5px;
    border: 1px solid #CCC;
    REGARDS!
    vedtam

    Hi, and thanks for your response. I did as you said, but the header still overlaps the menu button ( se the attached images).
    #header {
    width:800px;
    height:167px;
    font-size: 2em;
    color:#900;
    padding:0em;
    margin-left:100px;
    float:left;
    background-image: url(../images/logo.png);
    Regards
    Editor:

  • Floating div tags - won't align

    Hi there,
    I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank you

    Copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style>
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    body {
        padding: 0;
        width: 90%; /**adjust width as required**/
        margin: 0 auto; /**this is centered**/
        background: #F5DD83;
        color: #2294AE;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        box-shadow: 2px 2px 4px #333;
    header {
        margin: 0;
        padding: 0 1%;
        width: 100%;
        background: #B00202;
        color: #FFF;
    header h1, header h2 {
        display: inline;
        color: #F5DD83;
        padding: 0 3%;
    section {
        margin: 0;
        padding: 0;
        background: #FFF;
        overflow: hidden; /**float containment**/
    article {
        margin: 0;
        padding: 0 2%;
        float: left;
    article.left { width: 60%; }
    article.right {
        border-left: 1px solid #366;
        width: 40%;
    footer {
        background: #B00202;
        clear: left;
        display: block;
        padding: 2%;
        color: #FFF;
    </style>
    </head>
    <body>
    <!--begin header-->
    <header>
    <h1>Sitename</h1>
    <h2>Some pithy slogan...</h2>
    <nav>Horizontal menu  goes here...</nav>
    </header>
    <!--begin main content-->
    <section>
    <article class="left"> <h3>Article Left 60% wide</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <!--end left article-->
    </article>
    <!--begin right article-->
    <article class="right"> <h3>Article Right 40% wide</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    </article>
    <!--begin footer-->
    <footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
    </section>
    </body>
    </html>
    Nancy O.

  • Help with floating divs

    Hi All,
    I have given up on the liquid template and now started from scratch with fixed divs.
    My problem now is the floating elements.
    I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
    Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
    I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
    If I am not making sense please let me know
    Any help would be appreciated.
    Thanks in advance
    This is my code and css.
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    </style>
    <script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../faarcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body,td,th {
        font-family: "Myriad Pro";
    h1,h2,h3,h4,h5,h6 {
        font-family: "Myriad Pro";
        font-weight: bold;
    h1 {
        font-size: 110%;
    h2 {
        font-size: 105%;
    h3 {
        font-size: 100%;
    h4 {
        font-size: 90%;
    h5 {
        font-size: 90%;
    h6 {
        font-size: 90%;
    p  {font-size: 90%;
    </style>
    </head>
    <body onload="KW_doClock()">
    <div id="wrapper">
      <div id="topNav">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
            <ul>
              <li><a href="#">Finance Overview</a></li>
              <li><a href="#">More than Just a Mortgage</a></li>
              <li><a href="#">Line Of Credit</a></li>
              <li><a href="#">The Latte Factor</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
            <ul>
              <li><a href="#">The Importance of Insurance</a></li>
              <li><a href="#">Why do we need Insurance</a></li>
              <li><a href="#">Personal Insurance</a></li>
              <li><a href="#">Health Insurance</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
            <ul>
              <li><a href="#">Creating your financial security</a></li>
              <li><a href="#">Superannuation</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Budgeting</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
            <ul>
              <li><a href="#">Accounting</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Taxation</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Property</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Property Archives</a></li>
              <li><a href="#">Property F.A.Q.</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
            <ul>
              <li><a href="#">Estate Planning</a></li>
              <li><a href="#">Solicitors</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Information</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Seminars</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Media</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Media</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
            <ul>
              <li><a href="#">Our Point of Difference</a></li>
              <li><a href="#">Our Undertaking</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Site map</a></li>
              <li><a href="#">Contact FAAR</a></li>
    </ul>
          </li>
        </ul>
      </div>
      <div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
      <div id="name">
      <img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
    <div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
      <param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></div>
    <div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
      <div id="clock">
        <script language='JavaScript'>
    // Kaosweaver Live Clock Start
    function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
        this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
        this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
    if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
    var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
    // If the clock's size needs adjusting, change the 287 above.
    d=document
    if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
    else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
    else {KW_doClock(1);}
    function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
        d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
        tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
        h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
         {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
         {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
        if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
            lc.document.write(dClock);lc.document.close();
        } else if (d.all) {    activeClock.innerHTML = dClock;
        } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
        if (!a) setTimeout("KW_doClock()",1000);
    function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
      var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
      var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
      var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
      for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
      case "M":if  ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
      str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
      case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
      case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
      case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
    // Kaosweaver Live Clock End
        </script>
        <!-- KW Live Clock -->
      </div>
      <!-- TemplateBeginEditable name="mainContent" -->
      <div id="mainContent">
        <p><strong>Template for Financial &amp; Accounting</strong></p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <!-- TemplateEndEditable -->
      <div id="sidebar">
        <ul id="MenuBar2" class="MenuBarVertical">
          <li class="navMenu"><a href="#">Home</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
            <ul>
              <li><a href="#">Finance Overview</a></li>
              <li><a href="#">More Thank Just a Mortgage</a></li>
              <li><a href="#">Line of Credit</a></li>
              <li><a href="#">The Latte Factor</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
            <ul>
              <li><a href="#">Importance of Insurance</a></li>
              <li><a href="#">Why do we need Insurance</a></li>
              <li><a href="#">Personal Insurance</a></li>
              <li><a href="#">Health Insurance</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
    <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
      <ul>
        <li><a href="#">Creating your financial security</a></li>
        <li><a href="#">Superannuation</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Budgeting</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
      <ul>
        <li><a href="#">Accounting</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Property</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Property Archives</a></li>
        <li><a href="#">Property F.A.Q.</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
      <ul>
        <li><a href="#">Solicitors</a></li>
        <li><a href="#">Estate Planning</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Information</a>
      <ul>
        <li><a href="#">Seminars</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Media</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
    <li><a href="#">Site Map</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
      <ul>
        <li><a href="#">Our Point of Difference</a></li>
        <li><a href="#">Our Undertaking</a></li>
        <li><a href="#">Site map</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">CONTACT FAAR</a></li>
      </ul>
    </li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
        </ul>
    </div>
      <div id="footer">
      <p class="copyright">Copyright &copy; Financial And Accounting Resources  2011   
    <p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.  
    </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>
    CSS.
    @charset "utf-8";
    /* CSS Document */
    body {
        background-color: #FFF;
        padding: 0px;
        margin-top: 25px;
        text-align: center;
        background-image: url(images/watermark.jpg);
        background-repeat: repeat-y;
        background-position: center;
    html, body {
        margin: 0px;
        padding: 0px;
    #wrapper {
        background-color: #FFF;
        width: 1000px;
        text-align: left;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        position: relative;
    #topNav {
        background-color: #00A0C4;
        width: 1000px;
        padding-top: -25px;
        clear: left;
        float: left;
        padding-bottom: 5px;
    #logo {
        background-color: #FFF;
        height: 230px;
        width: 230px;
        float: left;
        padding-top: 10px;
    #name {
        background-color: #FFF;
        height: 230px;
        width: 300px;
        float: left;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
    #header {
        background-color: #FFF;
        height: 230px;
        width: 450px;
        float: right;
        clear: right;
        padding-top: 10px;
    #motto {
        background-color: #FFF;
        height: 25px;
        width: 1000px;
        float: left;
        text-align: center;
        color: #000;
        font-weight: bold;
        font-size: 110%;
        font-style: italic;
        padding-top: 15px;
    #clock {
        background-color: #FFF;
        height: 30px;
        width: 1000px;
        clear: both;
        float: left;
        font-size: 100%;
        text-align: right;
        font-weight: normal;
        color: #000;
        vertical-align: middle;
        padding-top: 10px;
    #mainContent {
        background-color: #FFF;
        height: auto;
        width: 720px;
        float: right;
        margin-bottom: 10px;
        padding-right: 25px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        background-image: url(images/watermark.jpg);
        background-repeat: repeat-y;
        background-position: center;
        background-attachment: fixed;
        text-align: justify;
    #sidebar {
        background-color: #00A0C4;
        width: 225px;
        clear: left;
        float: left;
        height: auto;
        padding: 10px;
    ul nav {
        background-color: #00A0C4;
        width: 250px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        list-style-position: inside;
        list-style-type: none;
    #footer {
        background-color: #00A0C4;
        height: 100px;
        width: 940px;
        float: left;
        clear: left;
        padding: 10px;
    body,td,th {
        font-family: Arial, Helvetica, sans-serif;
    sidebar.menu {
        font-size: 100%;
        font-weight: bold;
        color: #FFF;
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
        float: left;
    .navMenu {
        font-size: 100%;
        text-align: left;
        padding-right: -10px;
        color: #FFF;
        font-weight: bold;
    .sideNav {
        font-size: 80%;
        text-align: left;
        padding: 10px;
    .copyright {
        font-family: "Myriad Pro";
        font-size: 110%;
        font-weight: bold;
        color: #FFF;
        text-align: center;
    .disclaimer {
        font-size: 75%;
        color: #FFF;
        text-align: left;
    Thank you
    muznik

    The table is still above the text, not on the side like in the image you sent.
    I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
    The code i have now is below... Not sure what I'm doing wrong :/
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <head>
    <title>style.css</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="masthead">
        <div id="logo">
        </div>
        <div id="header">
        </div>
    </div>
    <div id="container">
        <div id="left_col">
          <table width="188" border="1">
          <tr>
            <td>Test 1 </td>
          </tr>
          <tr>
            <td>Test 2 </td>
          </tr>
          <tr>
            <td>Test 3 </td>
          </tr>
          <tr>
            <td>Test 4 </td>
          </tr>
        </table>
        </div>
      <div id="page_content" style="overflow: auto;">
          <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>
        </div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

Maybe you are looking for

  • Creating a batch job for the sapscript

    Hi folks, I have a question of how schedule a batch job in the background for the sapscript? I have the print program and I am using  the following FM to read the output device which I pick up printer device from the pop up dialog box. How can i do t

  • Gaming consoles on Mac

    hi, I was just wondering if there's a way to use your iMac as a monitor for a playstation? With Apple Tv etc, I'm sure there's probably a way of going it, but many forums seem to have conflicting ideas!

  • Block Negative Payment on Account

    Hello I suggest there should be a block when a negative payment on account will be added. I have explain more 5 people at my company how to correctly receive payments using the incoming payment screen, and the 5 have made the following mistake at lea

  • Why brightness changes when subtitles appear?

    Good evening, I'd like to ask for advice about a problem I found on iTunes running on Mavericks. I convert a video content (using handbrake)  adding subtitles from .srt file. When I watch that movie, if (and onlu when) subtitles appear, picture brigh

  • Migrate tracking information

    Ouch! I can find none of the tracking data for files I had sent previously via "SendNow" (and before you forced me over to "Send". Adobe, where is this tracking data?