Newbie Div tag frustration

hi,
I'm working on a music website (
http://moronica.net) and first
created a flash header and animated menu which I then imported into
a draw AP div tag situated on the top of the page in dw (aligns
perfectly with all the graphics below - A COMPLETE MIRACLE).
I can center all the html images below so when you widen the
browser window the page continues to center but I can't seem to
figure out how to make the div that the flash menu is sitting in do
the same thing.
Currently my solution is just to keep everything flush left
but that's sorta lame...
any assistance would be most appreciated. I'm pretty decent
with flash but DW...ouch.
thanks!

> isn't the flash plugin installed on 97% of all
computers?
If you believe the Adobe hype it would be, but there are many
companies and
private individuals who do not have it, and either will not
have it or can
not have it. What is that number? It's more than zero.
> I don't mind about those users as well as those with
disabilities
Really? So you will turn those people away? How about search
engine
spiders?
It's simple to center anything. Put it in a fixed width
container with
margin:0 auto. In other words
<div style="width 800px; margin:0 auto;">
<p>this content will be exactly centered in its
container</p>
</div>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"superbooty" <[email protected]> wrote in
message
news:gm24nt$bi4$[email protected]..
> thanks murray for your advice -
>
> isn't the flash plugin installed on 97% of all
computers? since this
> is a
> music site, nothing corporate, I don't mind about those
users as well as
> those
> with disabilities. and there are only going to be about
10 links total on
> my
> site so I mind if I have to manually fix a broken
link...
>
> I just want to center the page and i can do that now but
the flash menu
> won't.
> I know it's because i'm using an AP div tag which allows
me to float the
> area
> over the page and position the flash file perfectly over
the graphics
> below but
> when I use an insert DV tag it only allows me to place
the area above or
> below
> the graphics on the page so it moves everything down or
up.
>
> I'll probably just hire someone but thanks anyway for
your comments - duly
> noted.
>

Similar Messages

Newbie with div tags

I am trying to design my webpage, www.evdetailing.com, using div tags.
Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
I am looking to have the bottom two tags (the text and the left hand margin tag) sitflush with the bottom of the browser, and stretch if there are more text. In Firefox, the text div aligns but not the left hand margin div.
Okay also I have the boxes aligning to the left at 15% absolute, how do I align so the text box will align with them if I set it at 15% it will sit on top of the margin div and cover it up, 20% is the closest to flush but there are still 2 or 3 px of space between the two boxes. You can see what im trying to do at the #1 Arrow, I want the whole site to be align
Lastly if anyone knows why my background is doing what it's doing in Firefox, I would love to know so that I can fix it, its working right in the picture above.
Any help is greatly appreciated.

OperationGreen wrote:
I am trying to design my webpage, www.evdetailing.com, using div tags.
Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
There's nothing to be seen at the link above?

Centering a DIV Tag

Hi,
am having trouble / don't have a clue how to centre a div tag
to the center of the page? Can someone point me where am going
wrong. Here is the html code:
thanks in advance
hammer.

>>I think you'll find significant disagreement here
about the following
Yes, here, I definitely will find significant disagreement.
But I'm very
much of the opinion that publishing to the web is for the
masses, not just
for you folk with the time, motivation, and expereince to
deal with the
range of issues relating to css layout. The simplicity of
tables far
outweighs the gains of css layout at this point in time.
>>There is nothing worse than a morass of nested tables
spanned to death,
>>not
only for you as the maintainer of the site, but also for the
browsers, some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Here you are wrong. I would actually revese that whole point.
It is css
layout that are notorious fo rbrowsers laying out or not
rendering properly.
Tables never came close to having such issues. Even nested
tables, one level
deep, are perfectly fine.
>>some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Politely, where the heck have you been living these last few
years!!
>>Future maintainence, bandwidth usage, and simplicity
of layout are big
benefits of using CSS as opposed to tables.
simplicity of layout??? Again, I think you are missing the
argument here.
Its almost a given that tables are simpler to use for layout.
Almost all
books on teh topic agree, but point out the long term benefit
of css layout
despite the added complexity. So please don't use the
'simplcity' as an
argument here. CSS layout is the most intimidating and hard
to fathom thing
for most beginners, not just the new syntax but all the
nonsensical
(seeming) twists and turns that must be taken to get it to
work properly -
not to mention they are buggy as hell. Tables? They don't
come close to
being as nasty as CSS layout as it is today.
>>Everyone here (I think) agrees that if tables work
better for you, then use them. BUT use them correctly if you
are going to
do that. It's pretty simple, really....
Agreed. I personally use tables for average sized websites
which have to be
edited/maintained by general staff - you can teach tables oto
people inside
of amorning to a day. You'd need weeks to months to teach
enough CSS layout
to a layman and even then he'd think it sucks. I will be
using css for
layout about two browser versions from now.
I don't see the sense on jumping on a technology that, at
every second turn
you get, go here for this hack, do this to get around that
problem, IE
cannot do this so use this javascript fix, oh it doesn't work
while looking
at in dreanweaver but it will work in the browser, blah blah
blah...its
enough to put someone off web design for life.
I came to the web initially becuase I was amazed at how much
I could do with
so little knowledge - it was awseome. I think this should
still happen to
people today - it's quite empowering. I think the reality is
a lot more folk
get disheartned, confused and simply don't run with it. We
scare the crap
out them with css layout.
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
>I think you'll find significant disagreement here about
the following -
>
> * CSS for layout is simply not there yet
> * Its only the accesibility issue which tables lose
points for
> * Possibly, the only benefit of css layout is that it
can be centrally
> goverened through a linked style sheet, but even this
can be done with DW
> templates and tables
>
> CSS for layout is certainly "there". Perhaps it's not
there for you, but
> it surely is for others.
>
> There is nothing worse than a morass of nested tables
spanned to death,
> not only for you as the maintainer of the site, but also
for the browsers,
> some of which simply cannot render such pages. CSS
layouts do not have
> these problems.
>
> Future maintainence, bandwidth usage, and simplicity of
layout are big
> benefits of using CSS as opposed to tables.
>
> But let's not make this a holy war. Nobody here is
saying that you have
> to replace tables with CSS. Everyone here (I think)
agrees that if tables
> work better for you, then use them. BUT use them
correctly if you are
> going to do that. It's pretty simple, really....
>
> --
> 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
> ==================
>
>
> "Arrdvark" <[email protected]> wrote in
message
> news:[email protected]...
>> tables are much simpler, translate well to knowledge
people have from
>> other tools (ie; ms word) and can do layout quite
well. CSS for layout is
>> simply not there yet - it feels like one great big
hack and is difficult
>> for people to learn, especially causal web designers
who just dont have
>> the time to amass all teh knowledge and expereince
needed just to get a
>> simple css layout working in both major browsers.
One of the things that
>> made the web so big was how simple it was to publish
to - CSS layout is a
>> step backward in this regard.
>>
>> tables are still fine for most sites, a perfectly
valid choice. Its only
>> the accesibility issue which tables lose points for.
Possibly, the only
>> benefit of css layout is that it can be centrally
goverened through a
>> linked style sheet, but even this can be done with
DW templates and
>> tables, or dynamic pages and tables (ie: asp.net
master pages).
>>
>> I am 50 / 50 these days as to wether css layout is
worth the hassle for
>> the average website being bult by the avergae
person.
>>
>>
>>
>>
>> "FreakyJesus" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Very well said, Thierry
>>> And Arrdvark, I hear you on this:
>>> "it almost always causes total confusion as to
"why" this is the case
>>> and puts
>>> people right off CSS altogther."
>>> I am showing a friend how to use CSS (blind
leading the blind) and on a
>>> regular basis she's like "wouldn't this be
easier with tables within
>>> tables."
>>> Css CAN be very confusing.
>>>
>>> Andy
>>>
>>>
>>>
>>>
>>>
quote:
Originally posted by:
Newsgroup User
>>> Al wrote:
>>> > On Fri, 01 Dec 2006 09:39:18 -0500, Murray
*ACE*
>>> > <[email protected]>
wrote:
>>>
>>> >> Not only something different, but an
inferior choice at that!
>>>
>>> > I guess it can sometimes be difficult for
an inexperienced user to
>>> > assess and evaluate multiple solutions. If
there are downsides to
>>> > public forums, that would be at least one
of them. It's hard enough
>>> > for newbies to assess a single solution,
but wading through a
>>> > sub-discussion between third-parties
micro-analyzing their personal
>>> > favorite solutions can be untenable.
>>>
>>> I agree, but I can also understand that it can
be frustrating for people
>>> (people in general) who try to help to see that
the OP (OPs in general)
>>> didn't even try a solution that didn't require
too much effort.
>>> IMHO, there was not much for the OP to go
through here since *early* in
>>> this
>>> thread, the OP had everything to make it work.
>>> First post FreakyJesus said to set up the
left/right margin of the DIV
>>> to
>>> "auto" and second post Murray gives a very
explicit "fix" for IE5:
>>> body { text-align:center; }
>>> #graybox { text-align:left; }
>>> Actually, just trying margin auto could have
been enough for the OP.
>>> Sometimes it is important to know "some"
Javascript, HTML or else to be
>>> able
>>> to implement (not necessary understand) a
solution, but here it was not
>>> the
>>> case.
>>>
>>> Nothing against the OP here, and nothing to get
excited either ;-)
>>> This is just a general statement about the other
side of the coin.
>>>
>>> > Note to self: Recite Serenity Prayer before
posting here in the
>>> > future.
>>>
>>> Let's hope that works :)
>>>
>>> --
>>> Thierry
>>> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
>>> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
>>> CSS-P Templates:
http://www.TJKDesign.com/go/?1
>>> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
>

Re-positioning div tags

I am grappling with div tags - I am a newbie and have created an experimental web page. However all was good until I started to add a spry menu. the right container moved and I cannot figure out how to get it to move left. I tried the positioning properties but could not get it to budge! Can anyone help. I only have 2 div tags "left_column" and "right_column" plus the container The page is here
http://web.me.com/suethomo/Site2/Index.html
This is how it used to look before I mucked around with the spry menu
http://web.me.com/suethomo/Site2a/Index.html
Thanks

You didn't close the left_column so the right column is in the left column. Add </div> before <div id="right_column">

What's wrong with my div tag / site won't center....

Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #9B9E6B;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
          font-family: "Arial Black", Gadget, sans-serif;
          font-size: 20px;
          text-align: center;
          padding: 8px;
Here is the code for the site......
<!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>Kiahuna 104</title>
<script type="text/javascript">

</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">

<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>

<table width="1000" bgcolor="000">
<tr>
    <td width="40"> </td>
    <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
    <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>

<table id="content1" table width="1000" height="371">
<tr>
    <td width="34"> </td>
    <td width="897"><p>blah blah blah.</p>
      <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
    <td width="53"> </td>
</tr>
</table>
</body>
</html>

I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #000;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
font-size: 16px;
          font-family: Papyrus, Arial, "Helvetica Bold", serif;
          font-size: 22px;
          text-align: center;
          padding: 8px;
table#imagegallery{
          background-image: url(_images/imageGallery_bckgrnd.png);
          background-repeat: no-repeat;
#imagegallery a img{
    padding: 0px;
    margin: 2px;
    border: 2px solid #000;
#imagegallery a:hover img {
          border: 2px solid #C00;
table#footer{
          background-image: url(_images/footer_bckgrnd.png);
          background-repeat: no-repeat;

Problem with Flash in a Hide/Show Div Tag

What is the best way to handle Flash files on an HTML page
within a <div> tag you hide and show (via javascript). It
seems to reload when you hide and then show the <div> tag
when using display: block.
Positioning instead (move offscreen)?
Visibility?
Other?

I would say off-screen is going to give you the best
cross-platform performance. I've found visibility show/hide
prevents the swf from working in IE while hidden much like you
alluded to. Of course in mozilla browsers hide doesn't behave the
same way.

Div tags in design view

How is it that I can no longer control the position and size of a Div in design view? There appears to be no way to resize or move the div tag.I am using CS5

Do you mean Divs or AP Divs?

Dreamweaver crashes when i drag my div tags in design view

Hi
Ive just encountered a problem with dreamweaver cs4 at work.
I was creating a website using CSS and creating multiple div tags to house my images around the page. I normally position them using the CSS style sheet, but on this occasion, I grabbed the div tag whilst in design view and dragged it manually, and dreamweaver crashed! See image below It does so everytime I try the same thing again. Ive even restarted my PC. Anyone know why?

I've not see this before, so can't say why it would be happening. Would the pc be low on resources? but then again you say it happened even after a restart of the pc.
Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
http://forums.adobe.com/thread/417116#cache
PS: While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout.... unless you know the repercussions of using them.
Here's why: (from the Dreamweaver FAQ)
http://forums.adobe.com/thread/477969

Can you change the default code that targets a new window to change the content in a div tag instead

I created a database for store locations. I was able to display the list of stores. Here though I don't want the list to show the number in front of it... I still need to find the CSS to edit my results for this one. However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.
This is the code that is created to display the list of stores.
{module_webapps,5665,a,,,_blank,,50,,1}
Currently it opens a blank window. I'd like to target a div tag on the right of the list area where the store info can appear.
Perhaps the gurus at adobe can upgrade this feature? Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.
Below is the blank window that it opens.
Would like to make it open in a div to the right of the list. Not sure how to change to core code that was created to make that change.

I'm doing something wrong. I have the list showing the stores in CA
<div class="flip" id="woodcontainer" style="width: 160px; height: 23px;">
<h1>CALIFORNIA</h1>
</div>
<div class="panel">
<script>
$("#infochange").load("{module_webapps,5665,c,41140}"); /* this creates the list of stores in CA where #infochange is the DIV I am targeting.
</script>
</div>
<br />
The code for the DIV where I want the details to load.
<div id="infochange"></div>
This doesn't make sense because I need to have something in the DIV as a holder of some sort?

How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
     <p>This is a default paragraph style.</p>
     <p class="red">This is red.</p>
     <p class="highlight">This is highlighted.</p>
     <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

Dreamweaver cs5.5 - div tags won't float next to eachother

I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
<!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>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
/**this styles image container**/
#thumbs p {
          float:center;
          width: 50px;
          height: 75px;
          /**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
          color: #666;
          text-align:center;
          border: 1px solid silver;
          margin-top: 10px;
          margin-right: 5px;
          margin-bottom: 18px;
          margin-left: 5px;
/**recommend using same size images**/
#thumbs img {
          width: 50px; /**adjust width to photo**/
          height: 75px; /**adjust height to photo**/
          /**CSS3 drop shadows**/
-moz-box-shadow: 5px 5px 5px #666;
          -webkit-box-shadow: 5px 5px 5px #666;
          -khtml-box-shadow: 5px 5px 5px #666;
          box-shadow: 5px 5px 5px #666;
/**float clearing**/
#thumbs:after{
          display:block;
          visibility:hidden;
          height:0;
          font-size:0;
          content: " ";
          clear: left;
#wrapper #thumbs #imagewrapper {
          height: 362px;
          width: 280px;
          float: right;
          margin-right: 720px;
#wrapper #thumbs #imagewrapper img {
          height: 362px;
          width: 280px;
#wrapper #textbox {
          float: right;
          height: 300px;
          width: 600px;
          margin-right: 70px;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<img src="product and website photos/header.png" width="1064" height="116" alt="header" />

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#home.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
<li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
<li><a href="bwt.html">Tops</a></li>
<li><a href="bws.html">Skirts/Shorts</a></li>
<li><a href="bwl.html">Trousers/Leggings</a></li>
<li><a href="bwa.html">Accessories</a></li>
<li><a href="bwd.html">Dresses</a></li></ul></li>
<li><a href="#" class="MenuBarItemSubmenu">Men</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Bottoms</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Semi-Unique</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
<li><a href="t-shirt shop.html">Men</a></li>
<li><a href="t-shirt shop.html">Women</a></li>
<li><a href="t-shirt shop.html">Unique</a></li>
</ul></li>
<li><a href="clearance.html">Clearance</a></li>
<li><a href="#">About</a></li>
</ul>
<h2> </h2>
<div id="textbox"></div>
<div id="thumbs">
<div id="imagewrapper"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<div align="left">© 2012 your footer text goes here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
In the OP's example:
#wrapper = 1064+0+0 = 1064px
#textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop

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.

Quick question about div tags

How do you make a div tag only as wide as the content that is
inside of it, rather than the width of the cell that surrounds
it?

<div style="width:200px; float:left">
Would give you a div 200px wide and floated to the left. You
can similarly
float another div to the right of this div etc. When you are
done with a row
of divs, you would want to clear the float so that the next
set of divs
starts with the extreme left as the reference point. To clear
a float you
would use style="clear:both;" or style="clear:left;" etc.
Please do some
reading on all this before you start experimenting else
you'll run into a
multitude of issues.
You cannot lose until you give up !!!
"AngryCloud" <[email protected]> wrote in
message
news:f133f2$jk4$[email protected]..
> How do you make a div tag only as wide as the content
that is inside of
> it, rather than the width of the cell that surrounds it?

Noob question about DIV tags

Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.

love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables.

Is this a bug for using DIV tag in adf page?

I'm using the version 11.1.1.2.0. And when I write the adf page code with empty content in div tag like this :
<div id="ex"></div>
<othertags>123</othertags>Then the code in randered page :
<div id="ex">
<othertags>123</othertags>
</div>Bug ?
Edited by: Derek.Jaa on 2010-4-21 上午4:00

Hi Simon
Thanks for you help and I can't see the tag you suggested. Maybe you should make you code between tag, replace the [] with {} .

Newbie Div tag frustration

Similar Messages

Maybe you are looking for