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.

Similar Messages

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

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'

Making my side by side divs even in Height in different browsers

I have been wrestling with a problem for the past few hours. I don't know how to solve it and hope someone can help me. Here is a page that I thought I set up in such a way that I would be able to have the same height on both divs (left-text and right-flash movie). When I thought I had it worked out in Firefox, I looked at safari and saw uneven height.
Here is the page:
http://www.margaritascafe.com/parties.html
I have tried everything I can think of including the dreaded adding a height parameter to the div tags, however nothing is working to make both browsers show the same result.
here is my html:
<!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>

<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="150" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 5.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 5.swf" width="1000" height="150">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <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>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="menus/lunch.html">Lunch</a></li>
          <li><a href="menus/dinner.html">Dinner</a></li>
          <li><a href="menus/cocktail.html">Cocktail</a></li>
          <li><a href="menus/takeout.html">Take Out</a></li>
        </ul>
      </li>
      <li><a href="photo_gallery.html">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="parties.html">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="reservations.html">Reservations</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
        <ul>
          <li><a href="facebook.html">Facebook</a></li>
          <li><a href="twitter.html">Twitter</a></li>
          <li><a href="youtube.html">Youtube</a></li>
          <li><a href="merchant_circle.html">Merchant Circle</a></li>
<li><a href="directions.html">Directions</a></li>
        </ul>
      </li>
      <li><a href="reviews.html">Reviews</a></li>
      <li><a href="specials.html">Specials</a></li>
    </ul>
</div>
<div id="sidebar">
    <h2>Come Dine With Us!</h2>
    <p><span id="name">Margarita's Cafe</span> is the prime location to have your next party or event. Our experienced team of event planners are ready to help you have the time of your life! Margarita's Cafe is the only restaurant that will allow you to customize your menu and pricing to your needs.</p>
    <p>We offer a large dining room area for a large party or event up to 75 people. We also have a smaller dining area for a more intimate gathering of up to 20 people. Need Music, entertainment or decorations? No problem! Our staff will work with you to create the ultimate party experience.    </p>
    <p>Take a look at our party packages to get an idea of how we can create that special atmosphere for your next event. Got a date in mind or have questions? Give us a call at 516-745-0033 or 516-222-0328.</p>
    <p>Private Parties for:</p>
    <ul>
      <li>Weddings | Anniversaries</li>
      <li>Birthdays | Bar/Bat Mitzvahs | Sweet Sixteens</li>
      <li>Corporate Functions | Business Luncheons</li>
      <li>Bachelor / Bachelorette Parties<br />
        <br />
      </li>
    </ul>
    </div>
<div id="maincontent">
<script type="text/javascript">

</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="315" id="FlashID2" title="Parties">
    <param name="movie" value="flash_movies/parties.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    
    
    <object type="application/x-shockwave-flash" data="flash_movies/parties.swf" width="560" height="315">
      
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      <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>
      
    </object>
    
</object>
</div>
<div id="clearboth"></div>
<div id="page_container"></div>
<div id="footer"><a href="http://www.facebook.com/margaritascafe" target="_blank"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /></a> <a href="http://twitter.com/#!/MargaritasCafe" target="_blank"><img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /></a><a href="http://www.merchantcircle.com/business/Margaritas.Cafe.516-745-0033" target="_blank"><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></a> Powered by Kemite Multimedia ©2011 Margarita's Cafe</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and my CSS:
body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    background-color: #FCAF5D;
#wrapper {
    text-align: left;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 1000px;
#header {
    margin: 0px;
    padding: 0px;
#navigation {
    padding: 0px;
    background-color: #909;
    margin-top: -3px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
#sidebar {
    background-color: #77c4cb;
    width: 420px;
    float: left;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 20px;
    font-style: italic;
    color: #FFF;
    margin: 0px;
#wrapper #sidebar p #name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
#maincontent {
    margin: 0px;
    padding: 0px;
    width: 560px;
    float: right;
#maincontentlayout3 {
    background-color: #0F0;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 250px;
#specials {
    background-color: #CC9;
    text-align: center;
    margin: 0px;
    padding: 0px;
    float: left;
    clear: both;
#footer {
    margin: 0px;
    background-color: #fdc58a;
    clear: both;
    font-style: italic;
    font-size: 11px;
    text-align: right;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
#clearboth {
    margin: 0px;
    padding: 0px;
    clear: both;
#page_container {
    margin: 0px;
    padding: 0px;
#menu {
    margin: 0px;
    padding: 0px;
#menutitle {
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #FFF;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
#menutable {
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
Can anyone tell me what to do to solve this problem?

The easy way is to google 'faux columns'. It won't make the divs the same height, but it will make it look like they are.
The (probably) best way to do it would be to leverage some CSS2 as I show in the following table (view it in Live view in DW) -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#wrap {
          display:table;
          border:1px solid #000;
#col1, #col2 {
          display:table-cell;
          width:350px;
#col1 {
          background-color:#CCC;
#col2 {
          background-color:#FFC;
</style>
</head>
<body>
<div id="wrap">
<div id="col1">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt eu fugiat nulla pariatur.</div>
<div id="col2">Similique sunt in culpa qui officia deserunt mollitia animi, qui in ea voluptate magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem nam libero tempore, eaque ipsa quae ab illo inventore veritatis.</div>
</div>
</body>
</html>

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!

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

Same float code compiled differently on different machines

Hi,
Scenario: same project build on different machines. and then both the application executed on
same machine .. giving slightly different results..(like 23.07499 to 23.07500)
project involves many float operations. project build on vs2013. c++
there is difference oberved in the final value of float calculations.. like 23.07499 to 23.07500
seems , Same float code compiled differently on different machines, any input
Regards,
james

>Scenario: same project build on different machines. and then both the application executed on same machine ..
giving slightly different results..(like 23.07499 to 23.07500)
Do you get consistent results with the same executable each time you
run it?
Assuming you do, and the only difference is the EXEs, what's the
difference between them - there must be something. Have a look at "How
to compare binary images of the same project builds"
https://support.microsoft.com/en-us/kb/164151/ and see if that sheds
any light onto the issue.
Dave

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)

Creating Cells with differing heights in Numbers '09

In any given Row is it possible to have different cells with different heights because I've found that if I set the cell height to be e.g. 1cm then all the cells in the whole row are 1cm which isn't always the desired effect.
Thanks

S,
A Row is a unit with a singular height value. All cells in that row will have the same height in a Numbers Table. Adjacent rows can be made to appear to have cells with differing heights by manipulating the Cell Border characteristics. You also have the option to combine individual tables in such a way that they appear to be a single table with different row heights.
Jerry

Pismo drives -- different heights?

Recently removed the 18GB Toshiba drive that came with my Pismo when I originally bought it. It measures 11mm or 7/16" high.
Yesterday I picked up a Nexxtech portable hard drive enclosure (model NHDE25) with a USB 2.0 connection, just so I could use the drive for some extra, portable storage. The enclosure was only 6 bucks (Criag's List), so I'm not going to lose any sleep over it -- but no matter how closely I follow the installation instructions, and how snugly it fits into place, it still protrudes a couple of millimetres too high, and there's no way the top portion of the enclosure will snap into place.
Clearly, the enclosure is designed to hold a drive of the same length and width (the screw holes line up just fine), but one that's at least 2 millimetres thinner. Yet I can't find anything in either the printed manual or the accompanying pdf that mentions anything about the drive's maximum height.
So did these 2.5" drives in fact come in different heights? Or does anyone familiar with this kind of NexxTech drive enclosure know how I might get this 11mm peg into an 8-9mm hole?
Thanks,
John Bertram
Toronto

Thanks for the above. I found a pdf online for the drive, and it does indeed give the height as 12.5mm, as you said. I'll definitely consider that option of just getting a larger capacity (+ thinner) drive, since I'm not sure how much I still trust the old 18GB one.
Even so, I wish NexxTech et al would be a lot clearer in their documentation -- and even right on their packaging -- about the "height limitations" for these 2.5" drive enclosures. I can't believe I'm the only human still trying to squeeze out some use from one of these older (i.e. "thicker") drives -- but then again, maybe I am!
In any case, thanks for clearing up my confusion about the size differences.
Cheers,
jb

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

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>

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" />

<title>Untitled Document</title>

<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" />


<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" />

<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
    
    <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" />
    
    <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>
    
</object>

</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>
    
</div>

<div id="mainContent">
    <p><strong>Template for Financial & Accounting</strong></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<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 © 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>

Floating divs of different heights

Similar Messages

Maybe you are looking for