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)

Similar Messages

Floating div problem!

Having some trouble aligning these div tags in Dreamweaver CC, I've tried various different things / even watched tutorials on how to fix common errors and still come up with nothing!
Any help would be really appreciated
I've attached pics of what I'm talking about!
I can send my code in if needed also.
I'm trying to get the main body to sit next to the two navigation div's..
also the 2 different navigation div's don't sit (auto left width) as the header is sitting in both screen shots?
Thanks!!!!
Live View Image -
Preview in browser (Google Chrome) -

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#pageWrapper {
width: 96%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
background-color: #807C7D;
border: thin solid #000000;
#header { height:50px; width:800px;
background-color: #807C7D;
border: thin solid #000000;
#leftCol {
float: left;
width: 25%;
border-color: #000000;
#mainNavigation {
width: 200px;
height: 200px;
background-color: #807C7D;
border: thin solid #000000;
#healthInfoNavigation {
width: 200px;
height: 200px;
background-color: #807C7D
#rightCol {
width: 600px;
height: 200px;
float: left;
width: 75%;
overflow-x: visible;
overflow-y: scroll;
background-color: #807C7D;
border-color: #000000;
</style>
<link rel="stylesheet" href="css/ajxmenu.css" type="text/css">
</head>
<body>
<div id="pageWrapper">
<div id="header">
<div align="center">Content for header goes here</div>
</div>

<div id="leftCol">
<div id="mainNavigation">
<div align="center">
<p>Content</p>
</div>
</div>

<div id="healthInfoNavigation">
<div align="center">Content for health info navigation goes here</div>
</div>

</div>
<div id="rightCol">
<div align="center">Content for main body goes here </div>
</div>

</div>

</body>
</html>

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.

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

Dreamweaver CS3 Div Alignment Problems.

I have been building a website on my new MacBook. I have it
just about done so I uploaded it to my web host to check out the
appearance. It looks great on my Mac, but I checked it on my
parents PC and it looked terrible. Being a new Mac user, I thought
it was something going on with the operating systems, but I checked
it on a Mac deskop and the alignment was still messed up. On the
Mac desktop it is too far to the left and on the PC it is too far
to the right. This is the link to the site:
http://www.potomacsouth.com/Home.html
You can click View>Source to see the code.
I noticed if you drag the window to a different size the
images behind the div move, but the div stays in place. Is there
some kind of code or something that I can do to make it stay in the
designated area on every computer regardless of settings?
Thanks.

evansdb78 wrote:
> I noticed if you drag the window to a different size the
images behind the div
> move, but the div stays in place. Is there some kind of
code or something that
> I can do to make it stay in the designated area on every
computer regardless of
> settings?
Thats because you are using Absolutely Positioned
<divs> so they stay...
well.... Absolutely Positioned i.e., they WILL NOT move as
you increase
or decrease the width of the browser window.
Solution:
Open your page and go to code view
FIND THIS PIECE OF CODE:
<div align="center"><img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832" height="558" /><br />
CHANGE IT TO:
<div style="position: relative; width: 832px; margin: 0
auto;">
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND YOUR ABSOLUTELY POSITIONED <DIV> CODE:
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
MOVE IT TO DIRECTLY BETWEEN THE TWO LINES OF CODE YOU
ORIGINALLY
CHANGED. SO IT LOOKS AS BELOW:
<div style="position: relative; width: 832px; margin: 0
auto;">
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND THE 'apDiv2' CSS IN THE HEAD SECTION OF YOUR PAGES
CODE AND
CHANGE THE 'LEFT' AND 'TOP' POSITIONING AS BELOW.
#apDiv2 {
position:absolute;
width:315px;
height:358px;
z-index:1;
left: 70px;
top: 160px;
overflow: auto;
THATS IT. IT SHOULD NOW MOVE AS YOUR BACKGROUND IMAGE MOVES

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>

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>

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

<header>
<h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
<nav>Horizontal menu goes here...</nav>
</header>

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

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

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

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

Need help with floating div's and clear property

Link to page
Link to CSS file
I have the website currently setup as a 3 column website and everything is working fine. I need to make some pages as a 2 column page with the left column having several "leftcolumn" div's stacked on top of each other so that there are several rounded box sections in the left column.
I have the leftcolumn div floated left with a clear left to get the left column div's to stack on top of each other.
The rightcolumn is floated right.
How do I get my right column to align with the top of the first leftcolumn div?

It's not always necessary to float every column. One float is usually enough for a 2-column layout.
Where you have this:
#rightcolumn {
    width: 620px;
    float: right;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    border:3px solid #5f605f;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -opera-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background-color: #858586;
    font-size: 12px;
    margin: 10px;
Change it as follows:
#rightcolumn {
/**REMOVE ALL THIS**/
    width: 620px;
    float: right;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    border:3px solid #5f605f;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -opera-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background-color: #858586;
    font-size: 12px;
/**REMOVE THIS**/
    margin: 10px;
/**ADD THIS**/
    margin-left: 350px; /**adjust as needed**/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Message was edited by: Nancy O.
Strikethroughs are not working in the forum. I edited the code to make more sense.

Floated DIV alignment woes

Similar Messages

Maybe you are looking for