{module_cataloguelistdump} won't fit inside sidebar div tag

How to make {module_cataloguelistdump}
fit inside sidebar div tag
Module does not move to left margin inside the div tag.
see html below - see screen shot below.
<!— SIDE BAR -->
    <div class="col-xs-12 col-sm-4 col-lg-3 pull-left sidebar">

    <div class="section module-list-items">
    <h4 class="section-title">Categories</h4>
{module_cataloguelistdump,-1,1,_self,Weight}
</div>

</div>

Hey there,
View the CSS on it and view the html on it. It is pretty straight forward if you inspect markup and then change the CSS to suit.
With those catalog names though your space does not look big enough for them so most of them will instantly be on two lines no matter what you do. So consider that as well.

Similar Messages

Will a Flash navbar work inside a div tag?

I created a pretty simple navbar in Flash and put it inside a <div>. It looks great but the links don't work. Am I missing something or will this not work?

Your code is fine if you take out the other stuff. Got an error somewhere else?
Tear it down starting with this and then rebuild one line at a time......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#navbar {
position:fixed;
z-index:1;
padding:0px;
height: 20px;
width: 100%;
top: 0px;
text-align: center;
vertical-align: top;
background-color: #000;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FFF;
#navbar a:link {
background: transparent;
color: #FFF;
#navbar a:visited {
text-decoration: none;
color: #006;
background: transparent;
#navbar a:hover {
text-decoration: none;
color: #999;
background: transparent;
#navbar a:focus {
text-decoration: none;
color: #999;
background: transparent;
#navbar a:active {
text-decoration: none;
color: #FFF;
background: transparent;
a {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
font-weight: bold;
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
color: #FFF;
a:hover {
text-decoration: none;
color: #CCC;
a:active {
text-decoration: none;
color: #FFF;
</style>
</head>
<body>
<div id="navbar"><a href="javascript:alert('../indexNew.html')">home</a> | <a href="javascript:alert('rooms.html')">our rooms</a></div>
</body>
</html>

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

Div tags - I'm totally confused

I just finished a website that employed AP divs...and was
heartily chastised for doing so. So, I'm attempting to create
another site that employs div tags.
I created a new site and began working on the design. Banner
at the top (jpg image in a div tag - 760 px wide, no float, no
clear), left sidebar (jpg in a div tag - 154 px wide, no float, no
clear), attempted to create another div tag (right sidebar) but I
can't get the div tag to hug the right margin of the page at the
same height as the left tag. It keeps appearing below the left
sidebar div tag....I have no clue how to get the div tag to appear
on the right side of the page.....assistance would be greatly
appreciated. (I have lots of other questions, but if I can get past
this issue, I MAY be able to work those out myself).
David Bird

Well, because #leftsidebar is a block tag, and because you
have not
controlled its width, it occupies the full width of its
container, so there
is no room to the right for anything. And by the way, why so
many rules for
#leftsidebar img? Also, you have misformed the selector for
#rightsidebar.
Anyhow, this may be what you are after - not sure, though....
<!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>Home</title>
<style type="text/css">

</style>
<link href="fsbstyle.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrapper"><div id="topbanner"><img
src="Art/topbanner.jpg"
alt="banner" width="760"
height="153" /></div>
<div id="leftsidebar">
<p><img src="Art/Sidebar.jpg" width="152"
height="474" /></p>
</div>
<div id="rightsidebar">Content for id "rightsidebar"
Goes Here</div></div>
</body>
</html>
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
==================
"SwampeastMO" <[email protected]> wrote in
message
news:[email protected]...
> Murrary....Here's the fsbstyle code
>
> #wrapper {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10px;
> font-style: normal;
> color: #000000;
> background-color: #CCCCCC;
> padding: 10px;
> width: 760px;
> margin-right: auto;
> margin-left: auto;
> }
>
> #leftsidebar img {
> width: 154px;
> padding-top: 0px;
> padding-left: 0px;
> position: relative;
> left: auto;
> }
> #topbanner img {
> width: 760px;
> }
> #leftsidebar img {
> padding-left: 500px;
> }
> #leftsidebar img {
> padding: 0px;
> width: 154px;
> margin-left: 600px;
> }
> #leftsidebar img {
> width: 154px;
> margin-left: 0px;
> }
> #right sidebar {
> width: 154px;
> margin-left: 452px;
>

UPDATED: Trouble with duplicate div tag...

I am working on validating the code for my blog now as I
think that might solve some of the issues I am having. I was able
to clear out all of the xhtml errors except for one... a duplicate
sidebar div tag. One of them is at the bottom of the header file
and the other is at the top of the sidebar file.
My first thought was just to delete one of them so I tried
that and it validated. Problem is that it screwed up the layout on
my pages in Safari and Firefox when you do a search or look at any
of the archives, etc.
So I deleted the other one and it was worse.
I think this issue is what is making my search results and
archive results load below the sidebar... so it obviously needs to
be fixed, but Im not sure how.
The page is at
http://www.babybumps.net/blog
and the code is attached.
Any thoughts?

Try leaving the duplicate tag in, but renaming it to
something that is not a
duplicate first.
If that doesn't work, then we will have to take a closer look
at your code
and particularly your floated elements.
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
==================
"ArtsyAndi" <[email protected]> wrote in
message
news:g01mke$6cr$[email protected]..
> Ok... I deleted the duplicate tag on the top of the
sidebar, then deleted
> the
> close div tag at the bottom of that file and the code
now validates.
>
> However, it didn't solve my issue with the content
loading below the
> sidebar
> when you do a search or view archives in safari or
firefox.
>
> Any ideas?
>

CSS Div tag content???

I am a novice working on a website... all the help is needed...
I have a div layout for my website but want to create content with pictures, text, links inside the div tags... I know that there is many options to do it.
What is the best way?
Tables?
Incorporating HTML?
I guess if I can get past this obstacles I am well on my way.
Thank you.
GC02

Tables are not required for modern web page layouts.
Basic 1-column CSS Layout (view source in browser to see the CSS and HTML code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.shtml
Basic 2-column CSS Layout
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Tutorial: Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

None editable Div tag within a editable Div tag template

I am using a template i created to build a website and the only editable Div is the 'Content'. Using this template i have created a 2nd template for a portfolio page. On my 2nd template i have a Div tag within the 'Content' Div tag with list of all the jobs i have done with hyperlinked to photos. I want this list to be only editable on the template so when i update the 2nd template rest of the files related to this template get updated.
Is it possible to have a none editable Div tag within an editable Div tag?
I hope i have explained this well. Many thanks for your help

Thank you for your respond.
I have a main template with just the 'Content' Div Tag editable. Using this template i created anyother template for my portfolio page. Inside the editable Div Tag i have another Div Tag with 2 sets of tables for my portfolio lists. I want this Div tag to be only editable through the 2nd template only as i will have portfolio lists of over 30 pages/links.
I selected the Div Tag with the 2 set of tables and selected 'Add Object to Library'. First message was that the CSS coding will not be copied but errors messages as follows;
'While executing canInspectSelectio in phatfusion slideShow_FAB75CA2.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Ken Burns Slideshow.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Shadowbox3b Gallery_2528933A.htm, a JavaScript error occurred.'
Everytime i click inside the Div Tag, i keep getting these messages.
I went to the library and amended the list but only the 2nd template changed, not the related pages linked to the 2nd template.
Is there a place where i can upload my page in this website so you can see it?
Please see below the coding for the 2nd template for my portfolio pages;
<!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" />
    <META NAME="robots" CONTENT="index, follow">
    <meta name="google-site-verification" content="a_way2ZMkNZuMTtOveF3o1bvtWsVMBQujbA5jw9i0Q0" />
    <META name="y_key" content="d38873598f3b3934" />

<title>???s</title>

<link href="../_css/main.css" rel="stylesheet" type="text/css" />

    <link href="../Galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="../Galleria/jquery.min.js"></script>
    <script type="text/javascript" src="../Galleria/jquery.galleria-0.9.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ $('ul.gallery_demo2').galleria({nextText:'Next portfolio item'}); }) // activates the gallery
    </script>
    <style media="screen,projection" type="text/css">
    p,.caption{
    font-size: 10px;
    color:#006;
    .demo2{
    position:relative;
    clear:both;
    background:black;
    width: 600px;
    .gallery_demo2{
    width: 600px;
    .gallery_demo2 li{
    width:68px;
    height:50px;
    border:thin solid #000;
    background:#111;
    padding-left: 5px;
    overflow: hidden;
    .gallery_demo2 li.active{
    border-color:#623;
    .gallery_demo2 li div{
    top:60px;
    left:0;
    border:3px solid #111;
    background:#111;
    .gallery_demo2 li img.thumb{
    opacity:.3;
    padding-left: 3px;
    .gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{
    opacity:.99;
    </style>
    



<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #FFF;
    background-image: url(../_images/background.jpg);
</style>
</head>
<body>
<div class="container">
<div class="header">
    <div class="header2">
      <h4><strong>ARCHITECTURAL & STRUCTURAL ENGINEERING SERVICES<br />
        PROJECT MANAGEMENT & CONSTRUCTIONS</strong></h4>
    </div>
</div>
<div class="linkBar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT US</a></li>
      <li><a href="service.html" class="MenuBarItemSubmenu">SERVICES</a>
        <ul>
<li><a href="service.html">Overview</a></li>
<li><a href="planning.html">Planning Permission</a></li>
<li><a href="building.html">Building Regulations</a></li>
<li><a href="partywall.html">Party Wall Act</a></li>
          <li><a href="schedule.html">Schedule of Work</a></li>
          <li><a href="project.html">Project Management</a></li>
          <li><a href="structural.html">Structural Surveys</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html">PORTFOLIO</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
    </ul>
</div>

<div class="content">
    <h3>PORTFOLIO- website under construction</h3><div class="portfolioText">
      <h2 class="textSubHeading">Commercial</h2>
      <div class="portfolioCommercial">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">AA Partner Ltd</td>
            <td width="181" height="20">Railing London Ltd</td>
          </tr>
          <tr>
            <td height="20">Pemon Ltd</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20">lhjffkhgkhg</td>
          </tr>
        </table>
</div>
      <h2 class="textSubHeading"><br />
      </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading">Residential</h2>
      <div class="portfolioResidential">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">Batchworth Lane, <span dir="ltr">Northwood</span></td>
            <td width="181" height="20">Derrylands, Harrow</td>
          </tr>
          <tr>
            <td height="20">Pine Walk, Surrey</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20">teytdytyt</td>
            <td height="20"> </td>
          </tr>
        </table>
</div>
    </div><div class="portfolioSlideshow">
      <p>Project Title Goes Here:</p>
      <div class="demo">
</div>
<div class="demo2">
<ul class="gallery_demo2">
    <li class="active"><img src="../_images/portfolio/planning.jpg" alt="Planning sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/building.jpg" alt="Building Reg sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/structural.jpg" alt="Structural sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/fabrication.jpg" alt="Fabrication sample drawing" width="600" height="400"></li>
</ul>
</div>
    </div>
</div>

<div class="footer">
<table width="1025" border="0">
<tr>
    <td width="500"><h6>??? </h6></td>
    <td width="10"> </td>
    <td width="500" align="right"><h6>???</h6></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

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;

Please help! IE6 won't display my div tags!

My page looks fine in the other Mac browsers but the divs won't show up in Internet Explorer. Please tell me what I am doing wrong and how to fix it so that my div tags display correctly. Here is my source and CSS 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=UTF-8" />

<title>Untitled Document</title>



<style type="text/css">

</style>
<link href="../navmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="nav"></div>
<div id="buffer">this is a buffer</div>
</div>
</body>
</html>
     margin: 0px;
     padding: 0px;
#wrapper {
     width: 909px;
     background-color: #999;
     margin-right: auto;
     margin-left: auto;
     height: 54px;
     overflow: auto;
#wrapper #logo {
     width: 208px;
     float: left;
     background-color: #33F;
     height: 39px;
#wrapper #nav {
     background-color: #933;
     float: right;
     width: 701px;
     height: 39px;
#wrapper #buffer {
     width: 909px;
     clear: both;
     background-color: #0F6;
     height: 15px;

Because IE 6 is 5+ years old and hasn't been updated in a long while and the only reason it's still kicking in somewhat decent numbers is because some large companys utilized IE-only type features for internal applications and intranets and thus forced Microsoft to conitnue to support it beyond the original end-of-support date. :-)
By the way, potentially you could just give IE 6 a really bare-bones layout - but you'll need to make sure that that's acceptable for the project. Also it's good for your sanity if you stop trying to make the site look exactly the same in every browser. It's much easier to make it look "good enough" and make sure that the content is accessible and the site usable.

Trying to get content to fit better within a div tag

I've got a couple sliced up jpgs placed within a couple div tags (boxes) and aren't sure how to improve the fit. There's excess space vertically and it's not quite centered horizontally.
Here's the page: http://doughertyautomotive.com/New_Site/index.html
Thanks.

First off, from your post, we don't know which "couple of div tags" concern you. In Firefox, I did notice some elements not aligned with others that I am presuming are supposed to square up, but without a specific example it would be a waste of time to review your code in detail. Hazarding a guess, I'd say that you have assigned widths and heights to the jpegs that make them larger than the container you put them in. So you're just going to have to comb through all of your CSS and double check any assigned widths and heights of elements. It's also possible that you've added a CSS style which conflicts with one in the Project 7 style sheets. And for troubleshooting the Project 7 app, you need to go to its web forum.
Chris
www.cdeatherage.net

How do I center an image inside a CSS div tag using dreamweaver?

I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
</style>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
<div id="PageMenu">Content for id "PageHeader" Goes Here</div>
<div id="PageBody">Content for id "PageHeader" Goes Here</div>
<div id="PageFooter">Content for id "PageHeader" Goes Here</div>
</body>
</html>
Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.

Centering Pages, Images and other elements with CSS:
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.

Accessing parent document div tags from child document loaded inside parent document

I am loading an ASP document (Child)inside another ASP document (Parent) using Include statements.
The parent document has certain div tags which have some properties to be accessed from inside the code in child document using javascript.
Please advise on how to access the parent document varioables and div tags from inside the child document which has been loaded from within the parent document.

<script src="/SpryAssets/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" language="javascript" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="/SpryAssets/SpryHTMLPanel.css" rel="stylesheet" type="text/css" />
<script language="javascript">
Spry.Widget.HTMLPanel.evalScripts = true;
</script>
</head>
<body>
<div class="TabbedPanels" id="TabbedPanels2">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" >Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab2.loadContent('test1/load.asp');return false;">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="tab1">test content 1</div>
<div class="TabbedPanelsContent" id="tab2">test content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var tab1 = new Spry.Widget.HTMLPanel("tab1");
var tab2 = new Spry.Widget.HTMLPanel("tab2");
</script>

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.

.SWF not functioning inside DIV tag

Ok so here is my problem... I'm trying to insert a nice
little xml banner into my site and I'm trying to insert it inside a
Div to control its position. As soon as I insert the file into the
</div> it renders it useless other than a black screen. I'm a
novice at best and I'm trying to work my way through W3Schools, but
for the mean time are there any suggestions as to what I can do? I
know that the files function because if I simply insert them into a
new blank document the operate fine.
Any help would be much appreciated!
Thanks

Could you reduce it to just the code that is giving you a
problem?

{module_cataloguelistdump} won't fit inside sidebar div tag

Similar Messages

Maybe you are looking for