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!

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

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>

Bullets not spaced correctly next to floated div

This page displays the issue I'm having (see the second set of bullets on the bottom right side of the page):
http://kwikturnmachine.com/machining-capabilities.html
The image to the left is inserted into a div tag. Here is the style for the div:
#wrapper #content-wrapper #content-middle #content-bg-gradient #img-holder-flt-left {
    margin: 10px;
    padding: 0px;
    float: left;
    clear: both;
Anyone know why the top set of bullets indents just fine but the bottom set is right on the edge of the inserted image? How can I fix the second set of bullets so that they appear indented the same as the first set?
Thanks!
Aaron

Please see the validation errors here -
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkwikturnmachine.com%2Fmachining-c apabilities.html
Most of these can be solved by using DW's FILE | Convert > XHTML1.0 Transitional (these errors are a mismatch between perhaps legacy code on the page and the XHTML doctype - that will be fixed by doing this conversion).
The ones that concern me, though, are the reused ID values. An ID must be unique on a given page. Can you fix those, please before pushing ahead with your bullet issue? I'm guessing you could just convert navimage to a class instead of an ID.

Novice.... cannot create a floating div on top of image for my paragraph

how can i insert a section of writing over the top of my image? below is obviously what i have for my image,
<img src="images1/logo.jpg" alt="" width="1000" height="418" class="logo" /><br />
i need a paragraph of text to go over the top of that, but when i insert a new ap div it goes above that or below that i need it to float over the top.
the easier option i feel is with the image im using is just to type the text in the image, but i fear this is bad designing and it would not display correctly with certain browsers?? am i correct
because i am new to this whole thing i am struggling to find the right words to explain this, i hope this makes sense.

ok this is my html im amazed i have got this far, the reason im struggling is because my idea has changed halfway through and im struggling to remember what to put where to achieve what i want,
now then where i have inserted an image width 523 height 418 leaves a gap beside it which is 477 i need to fill that 477 gap with 2 divs (boxes) 1 on top of the other the top box will have an image, the box below that will have some text. this is where i am now stuck,
i have attached a jpeg image to this reply so you can see how the website has layed out so far, the red box i have highlighted in the jpeg is what i am trying to achieve, can you tell me what i need to put where to achieve that?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="index_1" onload="new ElementMaxHeight();">
<div id="main">

<div id="header">
<div class="menu">
<ul>
<li><a href="index.html">Home page</a></li>
<li class="active"><a href="index-1.html">About Us</a></li>
<li><a href="index-2.html">Gallery</a></li>
<li><a href="index-3.html">Services</a></li>
<li><a href="index-4.html">Articles</a></li>
<li class="last"><a href="index-5.html">Contact us</a></li>
</ul>
</div>
<img src="images1/islandlogo.jpg" alt="" width="523" height="418" class="logo" /><br />
</div>

<div id="middle">
<div class="container">
<div class="column1 maxheight">
<div class="indent">
<div class="title1">
<div class="inner">
<h2>Biography</h2>
</div>
</div>
<div class="content">
<a href="#" class="fs14">Sed ut perspiciatis undesuser lerase</a><br />
Lum mleie kertase miaserillus lerasert sere nertas um sociis natotdisrie jertas leraaerts keyuaroonec accnec porta ter.<br />
<div class="imgtext">
<img alt="" src="images1/page2_img1.jpg" class="imgindent" />
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul><br class="clear" />
</div>
</div>
</div>
</div>
<div class="column2 maxheight">
<div class="indent2">
<div class="title2">
<div class="inner">
<h2>My Experience</h2>
</div>
</div>
my experience to go in here
<div class="container">
<ul class="col1">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul class="col2">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<br class="clear" />
</div>
a brief description here<br />
<a href="#" class="more">read more</a><div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>

<div id="footer">
<div class="container">
<div class="column1">
up and down © 2008 | <a href="index-6.html">Privacy policy</a>
</div>
<div class="column2">
<div class="home">21 chapel Street Second Floor<br />
norwich</div>
</div>
<div class="column3">
<span class="phone">Tel./Fax 01603872094</span>
</div>
<br class="clear" />
</div>
</div>

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

Floating divs

Similar Messages

Maybe you are looking for