Div's over tables

This is a multi-part message in MIME format.
------=_NextPart_000_0021_01C6BC66.ACB70740
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
I am in a situation where I would like to use absolute
positioned Divs, =
bit I have had problems with them shifting differently
between IE and =
Firefox. So I have gone back to using tables.
Is there a way to set the divs so that they are exact in each
browser?
Thanks,
Scott
------=_NextPart_000_0021_01C6BC66.ACB70740
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.2900.2912"
name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=3D#ffffff>
<DIV><FONT face=3DArial size=3D2>I am in a
situation where I would like =
to use=20
absolute positioned Divs, bit I have had problems with them
shifting =
differently=20
between IE and Firefox. So I have gone back to using =
tables.</FONT></DIV><FONT=20
face=3DArial size=3D2>
<DIV><BR>Is there a way to set the divs so that
they are exact in each=20
browser?</DIV>
<DIV> </DIV>
<DIV>Thanks,</DIV>
<DIV> </DIV>
<DIV>Scott</FONT></DIV></BODY></HTML>
------=_NextPart_000_0021_01C6BC66.ACB70740--

Good luck!
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
==================
"Scott Powell" <[email protected]> wrote in message
news:[email protected]...
> Thanks!
>
> I'll give it a try.
>
> Scott
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Absolutely positioned elements do not shift - but
tables do. You are
>> seeing motion in the tables, I'm guessing.
>>
>> Yes - there's a way to make tables and absolutely
positioned elements
>> stay in register with each other -
>>
>> Change this -
>>
>> </head>
>>
>> to this -
>>
>> <style type="text/css">
>> 
>> </style>
>> </head>
>>
>> change this -
>>
>> <body ...>
>>
>> to this -
>>
>> <body ...>
>> <div id="wrapper">
>>
>> and this -
>>
>> </body>
>>
>> to this -
>>
>> </div>
>> </body>
>>
>> and see if that helps.
>>
>>
>> --
>> 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
>> ==================
>>
>>
>> "Scott Powell" <[email protected]> wrote in
message
>> news:[email protected]...
>> I am in a situation where I would like to use
absolute positioned Divs,
>> bit I have had problems with them shifting
differently between IE and
>> Firefox. So I have gone back to using tables.
>>
>> Is there a way to set the divs so that they are
exact in each browser?
>>
>> Thanks,
>>
>> Scott
>>
>
>

Similar Messages

How do I overlap text in a Div Tag over an Image

Hi,
I have a large image which I would like to set as as border around the page.
Please see www.touchw1.com, it is the grey border with the 3 archways on it that I would like as a border. At present, everything on this screen apart from the contact details at the bottom are saved as one JPEG. I saved it like this as I don't know how to set that border as a border and then insert other div tags over, or in it? Can anyone help??
Thanks

Create a 'wrapper" and 'footer1' <div>
<div id="wrapper">
</div>
<div id="footer1">
</div>
Create some css:
#wrapper {
border: 1px solid #333;
border-bottom: none;
width: XXXpx /* width you require */
margin: 0 auto; /* centers wrapper horizontally in browser window */
#footer1 {
background-image: url(archway.gif); /*archway image plus borders */
background-repeat: no-repeat;
height: XXpx /* height of background archway image */
width: XXXpx /* width you require */
margin: 0 auto; /* centers footer1 horizontally in browser window */
Then start adding content to the 'wrapper' <div>. Insert your logo into a <h1> header.
<div id="wrapper">
<h1><img src="images/logo.jpg" width="XXX" height="XXX" alt="TouchW1 Sales and Press Agency - Central London" /></h1>
<p>TouchW1 is a newly created niche agency that specialises in all aspects of sales management, press and licensing, based in the heart of Central London</p>
</div>
<div id="footer1"></div>
Move h1 header into position in the 'wrapper" <div> with css:
h1 {
margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
padding: XXpx XXpx XXpx XXpx;
Do the same with the paragraph tag
#wrapper p {
margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
padding: XXpx XXpx XXpx XXpx;
Add rose as background to 'wrapper' <div>
#wrapper {
border: 1px solid #333;
border-bottom: none;
width: XXXpx /* width you require */
margin: 0 auto; /* centers wrapper horizontally in browser window */
background-image: url(rose.jpg);
background-position: top right;
background-repeat: no-repeat;
Hummm that its really....add a 'footer2' <div> for the address line

DIV's or Table's

I'm in the middle of redesigning a site that happens to use a
lot of tables. My question to you is, is it better to use DIV's or
Table's? I could be wrong but from my understanding, I have a lot
more functionality with DIV's due to them being able to float
anywhere on a page, much like a layer.

Do you ALWAYS follow web standards...I doubt it.
I think it's a little harsh to say "If web standards mean
little or nothing
to you,...."
"Shane H" <[email protected]> wrote in
message
news:ev3srb$ies$[email protected]..
> If web standards mean little or nothing to you, then you
can use a table
> for a layout. IMHO, this isn't the best practice, when
using a strictly
> CSS-based layout can give you the same results, as well
as complying to
> web standards (e.g., seperating structure from content.)
>
> --
> Shane H
> [email protected]
>
http://www.avenuedesigners.com
>
> =============================================
> Back for 2007, close-up magic:
>
http://deceptivemagic.com
>
> Web dev articles, photography, and more:
>
http://sourtea.com
> =============================================
> Proud GAWDS member
>
http://www.gawds.org/showmember.php?memberid=1495
>
> Delivering accessible websites to all ...
> =============================================
>
>
> "Misha Cohen" <[email protected]> wrote in message
> news:ev3skd$hqk$[email protected]..
>> It makes little difference. the trend is towards
tableless layouts as it
>> does give more flexibility. And one of the arguments
is that tables are a
>> structural organizer and should be used for exel
type spreadsheets.
>>
>> However for many sites a simple table layout styled
with CSS is fine. If
>> you're just starting out then this is also much
easier to do.
>>
>>
>>
>> rmiman wrote:
>>
>>> I'm in the middle of redesigning a site that
happens to use a lot of
>>> tables. My question to you is, is it better to
use DIV's or Table's? I
>>> could be wrong but from my understanding, I have
a lot more
>>> functionality with DIV's due to them being able
to float anywhere on a
>>> page, much like a layer.
>>>
>
>

Use of "overflow:auto" in a div vs a table

Pest is back.
I am building pages where there are potentially VERY long tables, and I only want them to take up "X"px of vertical space.
Using a <div> to surround the table, adjusting the height and width of the <div> to whatever I want has been VERY successful -
no problems, can use it anywhere, feel comfortable.
Recently, I've learned from this forum that <div>s should only be used when really necessary,
and I've been able to get rid of many of my <div>s - except on tables that scroll.
Recently did an experiment with a <div> around a LOOOOONG table - worked fine.
Then I removed the <div> and added the "overflow:auto" to the table style with various
table heights selected.
I've done the experiment with and without "table-layout:fixed" - no luck.
Here's the <style> portion:
table.scrolltable {
    table-layout:fixed;
    height:100px;
     width:640px;
    border:2px solid #000;
    cellpadding:1;
    background-color:#DCF1F8;
    margin-left:1%;
    margin-right:1%;
    overflow:auto;}
table.scrolltable td {
     text-align:center;
    border:1px black solid;
Questions:
1. Is it possible to effectively use "overflow:auto" directly on a <table> layout?
2. If yes, what should I change in the above style?
And again, I thank you in advance.

"Division-itis (excessive overuse of divs for every element) should be avoided. But Jon is right, divisions are a basic and necessary part of HTML. You must use them.
Vertical Scrolling Table (this is how I do it)
http://alt-web.com/DEMOS/vertical-scrolling-table.shtml
Nancy O."
I think I'm getting a better feel for <div>s.
Thank you VERY VERY much for your "trade secret" on the scrolling table.
I've put it together and it works great!
Super!
Thanks!
PS - And the other teaching point is the "overflow-y" - more to study! Thanks again

Div to replace table

Got the following idea from an article in Web Builder
magazine. I thought it might be a way to eliminate tables in favor
of div's. The bottom paragraph wraps around the right column. How
do I get the text to drop below the columns?
Herman
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0px; padding: 0px; font: small Verdana; }
#ltcolumn { float: left; width: 150px; border: 1px solid; }
#centercolumn { float: left; width: 150px; border: 1px solid;
#rtcolumn { float: left; width: 150px; border: 1px solid; }
</style>
</head>
<body>
<p>Ut enim ad minim veniam, duis aute irure dolor ut
aliquip ex ea commodo consequat. Quis nostrud exercitation
excepteur sint occaecat velit esse cillum dolore. Mollit anim id
est laborum.
<ul id="ltcolumn">
<h3>Left Column </h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<ul id="centercolumn">
<h3>Center Column </h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<ul id="rtcolumn">
<h3>Right Column</h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<p>Ut enim ad minim veniam, ut labore et dolore magna
aliqua. In reprehenderit in voluptate consectetur adipisicing elit,
ullamco laboris nisi. Cupidatat non proident, sunt in culpa lorem
ipsum dolor sit amet. Quis nostrud exercitation mollit anim id est
laborum.</p>
</body></html>

http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
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
==================
"cycler" <[email protected]> wrote in
message
news:[email protected]...
> Got the following idea from an article in Web Builder
magazine. I thought
> it
> might be a way to eliminate tables in favor of div's.
The bottom paragraph
> wraps around the right column. How do I get the text to
drop below the
> columns?
>
> Herman
>
> <!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">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> body { margin: 0px; padding: 0px; font: small Verdana; }
> #ltcolumn { float: left; width: 150px; border: 1px
solid; }
> #centercolumn { float: left; width: 150px; border: 1px
solid; }
> #rtcolumn { float: left; width: 150px; border: 1px
solid; }
> </style>
> </head>
> <body>
> <p>Ut enim ad minim veniam, duis aute irure dolor
ut aliquip ex ea commodo
> consequat. Quis nostrud exercitation excepteur sint
occaecat velit esse
> cillum
> dolore. Mollit anim id est laborum.
> <ul id="ltcolumn">
> <h3>Left Column </h3>
>
Line one</li>
>
Line two</li>
>
Line three</li>
> <ul id="centercolumn">
> <h3>Center Column </h3>
>
Line one</li>
>
Line two</li>
>
Line three</li>
> <ul id="rtcolumn">
> <h3>Right Column</h3>
>
Line one</li>
>
Line two</li>
>
Line three</li>
> <p>Ut enim ad minim veniam, ut labore et dolore
magna aliqua. In
> reprehenderit
> in voluptate consectetur adipisicing elit, ullamco
laboris nisi. Cupidatat
> non
> proident, sunt in culpa lorem ipsum dolor sit amet. Quis
nostrud
> exercitation
> mollit anim id est laborum.</p>
> </body></html>
>

Dynamic iterating over table columns

hello there,
i have to create a string depending on the values in my table columns. this string creation is used on different tables with different number of columns and different column types.
so i want to write a procedure which does simplified the following:
1. create dynamic rowtype with a select statement
2. iterate over rowtype columns and append column value to a string
3. insert the created string in another table.
by trying this dynamically for any table i run in the following two issues:
1. creation of a rowtype needs the tabletype
2. no iterating over rowtype possible
are their any ideas to solve this issue. or do i have to write a procedure for every table i use.
regards,
rené

You can do it with a single, generic procedure using DBMS_SQL.
Joe Fuda
SQL Snippets

Help with importing from PS to DW; DIV expanding my tables

I am a newbie.
I just made a site in photoshop, sliced it and exported into Dreamweaver. I created DIV tags for my editable regions and saved as a dwt.
I am adding content to my main container and the table properties are expanding. The layout is seperated. I thought it might have been the automatic padding and border properties....so I set those to zero on my CSS. It's still expanding.
If there is no content, the site stays together and looks great. If I enter on sentence it pulls apart.
I have clean slices and the box height and width of the DIV tag for the content container match the table width and height I sliced it from.
Any idea what I am doing wrong? Thank you so much for your help.

Glynn1981 is right. Graphics editors should be used for making web graphics and image slices only. The Image Ready HTML / CSS code you have now is mainly for quick prototypes or comps; not for production use. It invariably falls apart when you try to edit it.
Start here:
Basic HTML & CSS Tutorials - http://w3schools.com/
Community MX Web Standards Lesson Plan Series
http://www.communitymx.com/abstract.cfm?cid=3D074
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Cloud icon over Table

Hi,
Does anyone know what means when a cloud is over the table icon under "Tables". Is this an error icon?
Thanks

There is no iCloud icon because iCloud is a service, not an app. You will only find iCloud in Settings.

An HTML DB application over table with CDM RuleFrame

Hi guys,
I have an Oracle Forms application we built using the CDM RuleFrame framework available with Headstart (an offering from Oracle Consulting). This framework allows us to validate all our business rules in the database using PL/SQL packages and DB triggers at commit time. When at least 1 rule is invalid, a generic exception is raised and all messages are available thru a call to a procedure that returns a PL/SQL table of records.
Now, we need to build a Web interface to that application and I need to know if we can reuse the same messaging framework we already have if we use HTML DB.
I don't know if it is relevant or not but Headstart does come with a mechanism to display those errors with the now defunct WebDB.
What do you guys think?
Thanks
P.S. Be gentle please as I have no experience (yet) with HTML DB

In this small example, you create a process and button which fires the process. Also, create an item called ERR_TXT. Make the process source:
begin
:foo := 1/0;
exception when others then
:ERR_TXT := sqlerrm;
end;
When you run this page and click the button, you'll see that the item ERR_TXT contains the value:
ORA-01476: divisor is equal to zero
In your case, you'd be looking for a specific exception and you'd get the error messages out of the PL/SQL table rather than simply from SQLERRM.
Once you have the messages and assigned them to one or more HTML DB items you can print them out in separate region.
Sergio

Choosing div vs table layout

Me again, hello.
I'd like to get your perspectives on the debate between <table>s and <div>s in CSS.
Over and over I've read the proponents of <div>s vs those of <table>s, and what I've taken away is:
"If you have a lot of tabular data, use a <table>, if not, use <div>s."
"Tables inside of tables are a big problem"
So I'll give you a specific example
Here is a mockup of a simple series of <div>s.
The large one on the right will be for a photo.
The other 12 <div>s will be for textual data.
http://www.heartinstitutehd.com/php/testingcsslayout.htm
I've done exactly the same layout using a table with rowspan="3" for the picture.
In your opinion(s), what are the pros and cons of using <div> vs <table> in this particular example?
For noobs such as myself, here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style>
.largebox {
height:200px;
width:800px;
margin-left:auto;
margin-right:auto;
background-color:lime;}
.shortwidebox {
width:85%;
height:33%;
background-color:gray;
float:left;}
.picturebox {
height:100%;
width:15%;
background-color:navy;
float:right;}
.smallboxblue {
    height:100%;
    width:25%;
    float:left;
    background-color:blue;}
.smallboxgreen {
    height:100%;
    width:25%;
    float:left;
    background-color:green;}
.smallboxred {
    height:100%;
    width:25%;
    float:left;
    background-color:red;}
.smallboxblack {
    height:100%;
    width:25%;
    float:left;
    background-color:black;}
</style>
</head>
<body>
<div class="largebox">
<div class="picturebox"></div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
<div class="shortwidebox">
<div class="smallboxred"></div>
<div class="smallboxgreen"></div>
<div class="smallboxblue"></div>
<div class="smallboxblack"></div>
</div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
</div>
</body>
</html>

"Tables inside of tables are a big problem"
That's really not true. Tables inside of tables is wasteful, and troublesome since it creates LOTS of markup that gets in the way of troublshooting, and that adds to the weight of the page. It's not uncommon to find tables nested 7 or 8 deep on pages that use tables for layout. You will rarely find such contorted structures on CSS pages. What makes tables within tables big trouble and even dangerous is when those tables contain lots of colspans and rowspans. This leads to relative unstable structures that will figuratively explode if someone bumps up the text size on the page.
My critique of your page is that you have assigned heights to those elements. While I recognize that you may be doing that for effect, it's never a good idea - let the contents determine the height - you risk overflow problems when you don't.
And finally, I have used tables on a page perhaps three times in the last year. All three times were to present tabular data. While tables can be an important tool in your toolbag when you need to use them, I'd avoid them for any other uses.

Help: AP Div Shifts All Over The Place

I created a form inside of an AP Div. I place the Div on the page on top of the background graphic without a problem. But when I preview it in IE, the div and its contents shifts over off the page. When I preview it in Firefox, it shifts in the other direction off the page. What gives?

Try this (changes in bold) - and apDiv4 will move relative to the wrapper div.
<!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>Contact Me</title>
<style type="text/css">
body {
background-color: #6D2812;
#wrapper {
position: relative;
width: 640px;
margin: 0 auto;
.maintext {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
.pattietip {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
color: #000;
#apDiv4 {
position:absolute;
width:492px;
height:181px;
z-index:1;
left: 239px; /* adjust to suit */
top: 208px; /* adjust to suit */
</style>
</head>
<body>
<div id="wrapper">
<div id="apDiv4">
    <table width="463" height="190" border="0" cellpadding="2">
      <tr>
        <td width="79" class="pattietip">Name:</td>
        <td width="266"><form id="form1" name="form1" method="post" action="">
          <input name="Name" type="text" class="maintext" id="Name" size="30" />
        </form></td>
        <td width="98"> </td>
      </tr>
      <tr>
        <td class="pattietip">Phone:</td>
        <td><form id="form4" name="form4" method="post" action="">
          <input name="Phone" type="text" class="maintext" id="Phone" size="30" />
        </form></td>
        <td> </td>
      </tr>
      <tr>
        <td class="pattietip">Email:</td>
        <td><form id="form5" name="form5" method="post" action="">
          <input name="Email" type="text" class="maintext" id="Email" size="30" />
        </form></td>
        <td> </td>
      </tr>
      <tr>
        <td class="pattietip">Occasion</td>
        <td><form id="form2" name="form2" method="post" action="">
          <select name="Occasion" class="maintext" id="Occasion">
            <option selected="selected">Pick one</option>
            <option>Birthday</option>
            <option>Anniversary</option>
            <option>Graduation</option>
            <option>Holiday</option>
            <option>Other (please enter below)</option>
          </select>
        </form></td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td><form id="form3" name="form3" method="post" action="">
          <textarea name="Info" cols="45" rows="5" class="maintext" id="Info"></textarea>
        </form></td>
        <td><form id="form6" name="form6" method="post" action="">
          <input type="submit" name="Submit" id="Submit" value="Submit" />
        </form></td>
      </tr>
    </table>
</div>
<img src="contact.jpg" width="640" height="480" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="132,410,203,433" href="occasions.html" />
    <area shape="rect" coords="223,408,340,431" href="flavors.html" />
    <area shape="rect" coords="362,408,447,432" href="album.html" />
    <area shape="rect" coords="6,10,369,64" href="index.html" />
</map>
</div>
</body>
</html>

AP Div vs Tables?

After using Dreamweaver MX for many years, I have now switched over to Dreamweaver CS5.5. I have been busy reading help files, watching Adobe TV, and reading whatever else I can find so I can make the switch as painlessly as possible. However, there is one thing that I am having trouble conceptualizing. I have spent years using tables as the basic organizational structure of my web sites. I always found utilizing tables a refreshingly simple and effective way to keep order on the page.
Now that I am using Dreamweaver CS5.5 and gettng more deeply involved in using proper CSS from the get-go, it appears that using tables to organize data has become rather passe, and AP Div tags seem to have taken the place of tables. Because I am so used to table structures, for some reason I still can't fully get grip on this other concept. Using the example I utline below, can someone try to explain this to me (the short and sweet version)? Every time I think I've got it, I read something else and get confused again.
For example: Using Dreamweaver MX I created a very simpe web site. The underlying structure includes a primary table 950 pixels wide, centered on the page. Within this primary table I nested a second table consisting of three columns. Left and right columns are fixed in size, and the center column (main content) is not fixed and is free to resize depending on browser dictates. The fixed columns also contain another nested table or two.
If I were to take this same simple page and re-create it from scratch using Dreamweaver CS5.5, but using AP Div instead of tables for the underlying structure, what initial steps do I need to take to make it all come together?
If someone can provide just a simple explanation that will help me understand this part of basic page creation using the div tags instead of tables, then it wil be greatly appreciated. Everything else is a piece of cake. Many thanks.

The best way to create a web site is to use CSS rather than rables. In fact, I dare say that tables should only be used for tabular output.
Having said that, a normal layout should not rely on absolute positioned elements. If you require more info on the why's then you can Google the subject.
A good place to start with a CSS layout is to click Ctrl-n (windows) and the following dialog pops up
Simply choose the layout that you want.
Gramps

Problem with Div and table

I have a table that contains data parsed for a weather station page. It also has a webcam picture on the page. Up until now, the webcam pic has loaded via an applet but I want to change that to a jquery slideshow so it's accessible to more mobile devices.   My problem is that no matter what I do (aside from putting a 5x240 spacer) I can't get the table data to display below the webcam div (id="featured"). I've put the webcam and data table in their own div, the webcam's div in the table, used clear:both on the divs, tried setting block size, but it's like nothing is working.   So I'm back to go and thought I'd post it here since there are so many folks here who know more about this than me. This is the html, right now with no CSS classes or anything added. So whatever you would suggest as far as div and/or table layout and any CSS would be appreciated.
<table width="100%" cellpadding="3">
<tr align="center"><td >
      <div id="featured"> <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img0" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-9.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img10" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-8.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img9" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-7.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img8" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-6.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img7" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-5.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img6" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-4.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img5" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-3.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img4" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-2.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img3" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-1.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img2" /></a>
              <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-0.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img1" /></a> </div>
</td></tr>
<tr>
<td><img src="images/spacer5x260.gif" width="5" height="260"></td></tr>
<tr>
                      <td colspan="4"><p align="center"><a href="images/06/Waterspout/Waterspouts.htm"><br />
                          </a></p>
                        <div align="center">
                          <p><a href="images/Waterspout/Waterspouts.php">Waterspout on Lake Mich </a>||| <a href="images/ANIFreighter.gif">Freighter Leaving Harbor</a><br />
                          </p>
                        </div></td>
                      </tr>
                    <tr>
                      <td colspan="4" bgcolor="#EAEFF9"><div align="center">
                        <h2>Weather Conditions Last Updated wvcurudwv at wvcurutwv </h2>
                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Temperature                      </div></td>
                      <td><div align="left">                        wvcur01wv                      </div></td>
                      <td><div align="right">                        Wind Speed                      </div></td>
                      <td><div align="left">                        wvcur18wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Average High                      </div></td>
                      <td><div align="left">                        wvahtempwv                      </div></td>
                      <td><div align="right">                        Wind Direction                      </div></td>
                      <td><div align="left">                        wvcur17wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Record High                      </div></td>
                      <td><div align="left">                        wvrhtempwv in
                      wvrhtyrwv                      </div></td>
                      <td><div align="right">                        Peak Wind Gust                      </div></td>
                      <td><div align="left">                        wvhigh18wv at
                      wvhight18wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        High
                      Since Midnight                      </div></td>
                      <td><div align="left">                        wvhigh01wv
                      at wvhight01wv                      </div></td>
                      <td><div align="right">                        Wind Chill Factor                      </div></td>
                      <td><div align="left">                        wvcur02wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Low                      </div></td>
                      <td><div align="left">                        wvlow01wv
                      at wvlowt01wv                      </div></td>
                      <td><div align="right">                        Yesterday Max Wind                      </div></td>
                      <td><div align="left">                        wvyhigh18wv at wvyhight18wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Rainfall Since
                      Midnight                      </div></td>
                      <td><div align="left">                        wvcur16wv                      </div></td>
                      <td><div align="right">                        Relative Humidity                      </div></td>
                      <td><div align="left">                        wvcur13wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Rainfall Yesterday                      </div></td>
                      <td><div align="left">                        wvyhigh16wv                      </div></td>
                      <td><div align="right">                        Barometric Pressure                      </div></td>
                      <td><div align="left">                        wvcur15wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Sunrise                      </div></td>
                      <td><div align="left">                        wvsrisewv                      </div></td>
                      <td><div align="right">                        Heat Index                      </div></td>
                      <td><div align="left">                        wvcur04wv                      </div></td>
                    </tr>
                    <tr>
                      <td><div align="right">                        Sunset                      </div></td>
                      <td><div align="left">                        wvssetwv                      </div></td>
                      <td><div align="right">                        Dew Point                      </div></td>
                      <td><div align="left">                        wvcur03wv                      </div></td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td> </td>
                      <td> </td>
                      <td> </td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td>Moon
                      distance from earth</td>
                      <td><span>wvmdistwv</span></td>
                      <td> </td>
                    </tr>
                    <tr>
                      <td><h2> </h2></td>
                      <td><h2> </h2></td>
                      <td><h2> </h2></td>
                      <td><h2> </h2></td>
                    </tr>
                    <tr>
                      <td><h2><a href="http://www.coastwatch.msu.edu/twomichigans.html" target="_blank">Lake
                        Michigan<br />
Water Temp</a></h2></td>
                      <td><h2><a href="http://www.woodtv.com/Global/category.asp?C=2906&nav=0Rcf">TV
                      8</a> & <a href="http://www.wzzm13.com/weather/forecast/weather.asp">TV13</a> Weather </h2></td>
                      <td><h2><a href="http://www.deq.state.mi.us/beach/Default.aspx?County=70" target="_blank">Ottawa County Beach Conditions</a></h2></td>
                      <td><h2><a href="http://www.crh.noaa.gov/product.php?site=grr&product=nsh&issuedby=grr" target="_blank">Nearshore
                      Marine Forcast</a></h2></td>
                    </tr>
                  </table>

Of course as soon as I posted that, I found the error of my ways. I had forgotten to set containerheight:   on my .js script for 'div#featured'
Arrrghh, why couldn't I have realized that a hour ago!!!

Inserting a table in a div in FF blows my design

Hello,
I've been wrestling with this problem for weeks now and found
a fix that works in IE, but not in FF (big surprise). So - my
question is - is there a fix for FF ? here goes:
www.stainlessrhino.com
Finally have all three divs in the center of the page (left
nav, content and right nav) filling the container div. Works in IE
by placing the content in the right div inside a table with 95%
width. However, in FF this right div fills 95% of the page and
shoots down below the other two divs. Why does this happen and is
there a fix?
(I know the page doesn't validate... most of it is this
shopping cart script I'm using - rrrrrrrrrrrrrrgh)
Thanks

Hello,
It's a couple of typo mistakes in your CSS.
Change this:
#Lnav
float: left;
width:
20%:
to this:
#Lnav
float: left;
width: 20%;
Notice the " : " after 20% is replaced with " ; "
and then, change this:
#Rnav
float:right;
width: 25%:
To this:
#Rnav
float:right;
width: 25%;
Notice the " : " after 25% is replaced with " ; "
Firefox is the standards compliant browser so it behaves as
it should by ignoring the invalid line (25%:) in the #RNav CSS.
Leave it to IE to still render the page and cause trouble :-)
Hope that helps,
Tim

DIV and Table Tag - height issue

Help. I'm using div tags to setup the structure for sections
of my Web page. But when it comes to populating these pages with
dynamically generated text, the height changes. Sure the table td
cell expands, but the div surrounding the table tags DOES NOT. Here
is the page where I am having the problem.
http://www.fuelcellmagazine.com/story2.cfm?id=17
Scroll down to the bottom of the page and you'll see the
table tag overflowing past the div tag settings.
Any suggestions?
D

That is quite a div soup you have there. Why so much absolute
positioning?
Two ticks of the enlarge text in FF and the page is
completely broken. Your
problem is not the div heights, it's the absolute
positioning.
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
==================
"OnDemand Junkie" <[email protected]> wrote
in message
news:e246jj$1fb$[email protected]..
> Help. I'm using div tags to setup the structure for
sections of my Web
> page.
> But when it comes to populating these pages with
dynamically generated
> text,
> the height changes. Sure the table td cell expands, but
the div
> surrounding
> the table tags DOES NOT. Here is the page where I am
having the problem.
>
>
http://www.fuelcellmagazine.com/story2.cfm?id=17
>
> Scroll down to the bottom of the page and you'll see the
table tag
> overflowing
> past the div tag settings.
>
> Any suggestions?
>
> D
>

Div's over tables

Similar Messages

Maybe you are looking for