Div vs. ap div

Is there a way to put a div on top of another div.

Look - if the div has a fixed width, then the table will only
center within
that fixed width, no matter how wide the browser viewport is.
You can fix
that by removing the fixed width from the div, as I suggested
earlier. Of
course, that may trash your layout, too....
This answer was given to you in an earlier thread.
In general, your posts are very vague, and you start
multiple, semi-related
threads. That makes it very confusing to track your answers.
http://www.catb.org/esr/faqs/smart-questions.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
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:gkb4ev$lds$[email protected]..
> I've already shown you how to do that.
>
> --
> 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
> ==================
>
>
> "suzy~wow" <[email protected]> wrote in
message
> news:gkb47q$l31$[email protected]..
>> What if I had a table inside a div is there a way to
center it? I would
>> like it to center according to the browser window of
the viewer.
>> Thank you
>

Similar Messages

  • Inserting a Div in a Div

    Is it possible to insert a div tag (or two) inside another
    div tag. I have
    a background image I want to be in the background of a
    section that will
    have 2 or 3 div tags in it. I know I can go with a table, but
    I am trying
    to get away from them.
    Thanks
    Gary

    You're welcome.
    Walt
    "GPaul" <[email protected]> wrote in message
    news:g8vck1$dqi$[email protected]..
    > Walt
    >
    > Thanks for your answer, I thought a I had done it before
    but it was not
    > working for me.
    >
    > Gary
    > "Walt F. Schaefer" <[email protected]> wrote
    in message
    > news:g8v1s1$sv1$[email protected]..
    >> In its simplest form a div looks like this (in code
    view):
    >> <div></div>
    >>
    >> To insert a div inside that div make it look like
    this:
    >>
    >> <div><div></div></div>
    >>
    >> See?
    >> --
    >>
    >> Walt
    >>
    >>
    >> "GPaul" <[email protected]> wrote in message
    >> news:g8v0qn$rhk$[email protected]..
    >>> Is it possible to insert a div tag (or two)
    inside another div tag. I
    >>> have a background image I want to be in the
    background of a section that
    >>> will have 2 or 3 div tags in it. I know I can go
    with a table, but I am
    >>> trying to get away from them.
    >>>
    >>> Thanks
    >>>
    >>> Gary
    >>>
    >>
    >>
    >
    >

  • Placing text in div causes the div to expand

    I have a floating div called itemboxfloat. It is a left floating div. I have placed a background image in the div which has the same dimension as the div but I had to specify no-repeat because if I used padding it would expand the space given for the background and it would tile. I can't really discribe whats happening but I am trying to place text in the div box and I am using the padding functions to located the top line of the text within the div. But as I add more padding to force the first line of text lower in the div. it seems to be expanding some boundry out the bottom of the div. My CSS if itemboxfloat and the div is also called itemboxfloat. I have included the code for your review.
    Thanks for your help
    Dan
    <!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>aro</title>
    <style type="text/css">strong {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    </style>
    <link href="CSS/Chemtech.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="CSS/verticalmenu.css" type="text/css" />
    <link rel="stylesheet" href="CSS/horizontalmenu.css" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="headernarrow"><img src="Images/header-narrow.jpg" alt="header" width="960" height="150" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="3,5,265,123" href="index.html" alt="Chemtech Process Equipment" />
        </map>
      </div>
      <div id="navigation_bar"><div class="AJXMenuULDYZCC"><!-- AJXFILE:CSS/horizontalmenu.css -->
    <div class="ajxmw1">
      <div class="ajxmw2">
    <ul>
    <li><a href="index.html" title="Home"><b>    HOME    </b></a></li>
    <li><a class="ajxsub" href="productsbytype.html" title="Products"><b> PRODUCTS </b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="productsbytype.html" title="Indexed by Type"><b>Indexed by Type</b></a></li>
       <li><a href="productsbymfgr.html" title="Indexed by Manufacturer"><b>Indexed by Manufacturer</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#" title="Request Quote"><b>REQUEST QUOTE</b></a></li>
    <li><a href="#"><b>DOWNLOADS</b></a></li>
    <li><a href="contact%20us.html" title="Contact Us"><b> CONTACT US </b></a></li>
    </ul>
      </div>
    </div>
    <br />
    </div></div>
      <div id="sidebar"><div class="AJXMenuEHWBGHC"><!-- AJXFILE:CSS/verticalmenu.css -->
    <ul>
    <li><h1><b>PROCESS EQUIPMENT</b></h1></li>
    <li><a class="ajxsub" href="#" title="Pumps"><b>Pumps</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Air Diaphragm"><b>Air Diaphragm</b></a></li>
       <li><a href="#" title="Centrifugal"><b>Centrifugal</b></a></li>
       <li><a href="#" title="Drum"><b>Drum</b></a></li>
       <li><a href="#" title="Gear"><b>Gear</b></a></li>
       <li><a href="#" title="Hose"><b>Hose</b></a></li>
       <li><a href="#" title="Magnetic Drive"><b>Magnetic Drive</b></a></li>
       <li><a href="#" title="Metering"><b>Metering</b></a></li>
       <li><a href="#" title="Peristaltic"><b>Peristaltic</b></a></li>
       <li><a href="#" title="Piston"><b>Piston</b></a></li>
       <li><a href="#" title="Vertical"><b>Vertical</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Mixers"><b>Mixers</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Direct Drive"><b>Direct Drive</b></a></li>
       <li><a href="#" title="Gear Drive"><b>Gear Drive</b></a></li>
       <li><a href="#" title="C-Clamp Mount"><b>C-Clamp Mount</b></a></li>
       <li><a href="#" title="Drum Mount"><b>Drum Mount</b></a></li>
       <li><a href="#" title="Fixed Top Mount"><b>Fixed Top Mount</b></a></li>
       <li><a href="#" title="Side Mount"><b>Side Mount</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Filters"><b>Filters</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Bag"><b>Bag</b></a></li>
       <li><a href="#" title="Cartridge"><b>Cartridge</b></a></li>
       <li><a href="#" title="Centrifuge"><b>Centrifuge</b></a></li>
       <li><a class="ajxsub" href="#" title="Indexing Media"><b>Indexing Media</b>
        <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
         <li><a href="#" title="Gravity FIlter"><b>Gravity Filter</b></a></li>
         <li><a href="#" title="Vacuum FIlter"><b>Vacuum FIlter</b></a></li>
         <li><a href="#" title="Sludge Filter"><b>Sludge FIlter</b></a></li>
         <li><a href="#" title="Pressure Filter"><b>Pressure Filter</b></a></li>
         <li><a href="#" title="Sludge Filter"><b>Sludge Filter</b></a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#" title="Oil Skimmers"><b>Oil Skimmers</b></a></li>
       <li><a href="#" title="Oil-Water Separators"><b>Oil-Water Separators</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Tanks"><b>Tanks</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Carboys &amp; Totes"><b>Carboys &amp; Totes</b></a></li>
       <li><a href="#" title="Rectangular"><b>Rectangular </b></a></li>
       <li><a href="#" title="Cylindrical Cone Bottom"><b>Cylindrical Cone Bottom</b></a></li>
       <li><a href="#" title="Cylindrical Flat Bottom"><b>Cylindrical Flat Bottom</b></a></li>
       <li><a href="#" title="Vertical Bulk Storage"><b>Vertical Bulk Storage</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Piping/Hose"><b>Piping / Hose</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="PVC Pipe &amp; Fittings"><b>PVC Pipe &amp; Fittings</b></a></li>
       <li><a href="#" title="CPVC Pipe &amp; Fittings"><b>CPVC Pipe &amp; Fittings</b></a></li>
       <li><a href="#" title="Polypro Pipe &amp; Fittings"><b>Polypro Pipe &amp; Fittings</b></a></li>
       <li><a href="#" title="PE Pipe &amp; Fittings"><b>PE Pipe &amp; Fittings</b></a></li>
       <li><a href="#" title="Kynar Pipe &amp; Fittings"><b>Kynar Pipe &amp; Fittings</b></a></li>
       <li><a href="#" title="Sanitary Hose, Gaskets &amp; Fittings"><b>Sanitary Hose, Gaskets &amp; Fittings</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Immersion Heaters"><b>Immersion Heaters</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Electric Immersion"><b>Electric Immersion</b></a></li>
       <li><a href="#" title="Steam Coil"><b>Steam Coil</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="ajxsub" href="#" title="Process Controls"><b>Process Controls</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="pH &amp; ORP Probes"><b>pH &amp; ORP Probes</b></a></li>
       <li><a href="#" title="Conductivity Probes"><b>Conductivity Probes</b></a></li>
       <li><a href="#" title="Flowmeters"><b>Flowmeters</b></a></li>
       <li><a href="#" title="Level Sensors"><b>Level Sensors</b></a></li>
       <li><a href="#" title="Pressure Transducers"><b>Pressure Transducers</b></a></li>
       <li><a href="#" title="Process Controllers"><b>Process Controllers</b></a></li>
       <li><a href="#" title="VFD's"><b>VFD's</b></a></li>
       <li><a href="#" title="Power Monitors"><b>Power Monitors</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><h1><b>ENGINEERED SYSTEMS</b></h1></li>
    <li><a href="#" title="Chemical Feed Skids"><b>Chemical Feed Skids</b></a></li>
    <li><a class="ajxsub" href="#" title="Evaporators"><b>Evaporators</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Burt Process Equipment"><b>Burt Process Equipment</b></a></li>
       <li><a href="#" title="Filtertech"><b>Filtertech</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#" title="Filtration Systems"><b>Filtration Systems</b></a></li>
    <li><a href="#" title="Fume Scrubbers"><b>Fume Scrubbers</b></a></li>
    <li><a href="#" title="pH Neutralization"><b>pH Neutralization</b></a></li>
    <li><a href="#" title="RODI Water Systems"><b>RODI Water Systerms</b></a></li>
    <li><a href="#" title="Transfer Sumps"><b>Transfer Sumps</b></a></li>
    <li><a href="#" title="UL Control Panels"><b>UL Control Panels</b></a></li>
    <li><a href="#" title="Vacuum Distillation"><b>Vacuum Distillation</b></a></li>
    <li><a class="ajxsub" href="#" title="Wastewater Treatment"><b>Wastewater Treatment</b>
      <!--[if gt IE 6]><![endif] --></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="#" title="Burt Process Equipment"><b>Burt Process Equipment</b></a></li>
       <li><a href="#" title="Filtertech"><b>Filtertech</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#" title="Water Reclaim (LEEDS)"><b>Water Reclaim (LEEDS)</b></a></li>
    </ul>
    <br />
    </div>
      </div>
      <div class="floatimageleft"><img src="Images/aro-sanitary-pumps.jpg" width="250" height="243" alt="aro sanitary pump" /></div>
      <h2><span class="largeheading">ARO</span>  Air Operated Diaphragm Pumps</h2>
      <p>Air Diaphragm Pumps are an excellent choice for self-priming applications and situations where the pump my be deadheaded such as feeding a filter press. A favorite of process professionals everywhere- Ingersoll Rand / ARO Diaphragm   Pumps provide stall-free, ice-free operation in 3/8&rdquo; thru 3&rdquo; fluid ports. Backed   by a five-year warranty, they are the most reliable pump line on the market   today.</p>
      <div id="cat_long_description"><span id="ctl00_Content_description">Their patented   &ldquo;Unstallable&rdquo; unbalanced air valve design avoids stalling issues associated with   other pumps. The &ldquo;Quick-Dump&rdquo; exhaust valves divert cold exhaust air from   ice-prone components, preventing freezing. Backed by a five-year warranty, we   have the most reliable pump line on the market today.</span></div>
      <div class="itemboxfloat">
        <p><br />
          Metallic<br />
        Non-Metallic<br />
        Classic
        </p>
      </div>
      <p> </p>
      <div id="footer">
        <p><a href="index.html">HOME</a> | <a href="products.html">PRODUCTS</a> | REQUEST QUOTE | DOWNLOADS | <a href="contact us.html">CONTACT US</a><br />
        </p>
        <hr align="left" width="740" id="footer rule2" />
        <h4>© 2011 Chemtech Process Equipment, All Rights Reserved, Designed and Developed By Graphics Advantage. <img src="Images/GA-logo.jpg" width="46" height="40" align="top" /><br />
          <br />
        </h4>
      </div>
    </div>
    </body>
    </html>
    ul {
    list-style-type: none;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 1em;
    display: block;
    a:link {
    text-decoration: none;
    color: #666;
    a:hover {
    font-weight: bold;
    color: #F00;
    text-decoration: underline;
    .largeheading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    color: #F00;
    .floatimageleft {
    float: left;
    width: 250px;
    margin-right: 20px;
    height: auto;
    margin-top: 10px;
    background-image: url(../Images/aro-compact-series-float.jpg);
    background-repeat: no-repeat;
    margin-bottom: 20px;
    .itemboxfloat {
    height: 110px;
    width: 740px;
    float: left;
    padding-left: 10px;
    background-repeat: no-repeat;
    border: thin solid #000;
    background-image: url(../Images/aro-compact-series-float.jpg);
    background-position: 0px 0px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;

    Thats because you have height 110px set on the 'itemboxfloat' <div>. When you add padding to it, say padding-top: 20px; the divs height becomes 130px. Never set height on a <div> which contains text.

  • Why is image over flowing content div into footer div?

    My content div is set at 975px wide padding 20px.  I insert a image that is 700x525.  Content div expands to fit image.  As soon as I set the alignment on the image to left Content div shrinks, image overflowing into footer and text in footer is wrapped around image.  If I set a height for the Content div larger than height of image all is well.  My problem is images on different pages will all be different sizes.
    Code:
    <div id="content">
        <h1><img src="Oral/OralCavity_Labeled.jpg" alt="Oral Cavity" width="700" height="525" align="left" />Content for  id "content" Goes Here</h1>
      </div>
      <div id="footer">
        <h5>Property of College of the Canyons Biology Department. All rights reserved. <a href="mailto:[email protected]">Contact Us</a>.</h5>
      </div>
      <h5> </h5>
    </div>
    </body>
    Please help, can't proceed with website until this problem is solved.

    Try this:
    #content {
    width: 975px;
    background: #FFF;
    padding: 20px;
    overflow:hidden;
    The magic of overflow hidden:
    http://colinaarts.com/articles/the-magic-of-overflow-hidden/
    PS.  I'm glad I'm not squeamish.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Positioning of child div within parent div

    Hello Everyone,
    I have several divs sat within divs that contain information that can only be viewed entirely when clicked on. (please see 'why choose us' section on site below) As you can see when the "read more" link is selected on this category, the rest of the information appears across the page, which is great BUT each sub category is nested within rows so that, for example when the 'funeral services' category is selected, currently the information is forced to sit to the right of the screen as the rows dictate. So what i would like to know, is there a way of getting each of these category divs to sit central across the page regardless of position within the parent div?
    CSS used for child div
    #funeralServ{
        width:1200px;
        background-color:#ccccff;
        padding-left: 4px;
        padding-right: 4px;
        position:absolute;
        z-index:1000;
    http://www.clockdoctors.co.uk/test/#funeralServices

    Actually, osgood_'s idea is the better one, i.e. using Bootstrap.
    Copy and paste the following into a new document and view in your favourite browser.
    <!doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <!-- Trigger the modal with a button -->
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>
    </html>

  • Div inside another div

    Ok..is it just me, or does auto height really do squat when
    it comes to expanding and contracting of content in other divs that
    it surrounds? I have a div surrounding 2 divs, one that floats to
    the left, and one that floats to the right. If the div that
    surrounds them both has a height that is bigger than they are, it
    wraps just fine, however, if I set it to auto and add content to
    the inside divs, it doesnt grow and expand accordingly, screwing up
    the footer div I have below the div surrounding the 2 divs.
    Reason I wanted a div surrounding the two divs is cuz if one
    was longer than the other, due to there being more content in one
    than the other, then the footer div would, despite it being the
    full length of the page, shrink and fit itself below the shorter
    div tag with less content. Why doesnt the div just stay below the
    longest div since thats where it fits due to it being the full
    length of the page!?
    I attached my code. No, I cannot link the site. I do not have
    the site. Its under construction with no host. Y'all have
    dreamweaver, paste it in a new file and add your own random images.
    the "filler text" is just there so I can show you that if I stick
    that there it wraps around fine, but if you get rid of it, the div
    thats supposed to be wrapping around two divs sticks itself above
    the two divs..even though it doesnt close till have the two divs!!
    WHY!?

    If I understand you, you want two (or more) columns to be the
    same height
    without setting a height, or for them to grow according to
    the largest ones
    size.
    If that is the case, google Faux Columns.
    Basically, you wrap your divs (columns) in a container (the
    one you have
    sourounding) then you create a background image that is the
    same size as
    your columns, set the overflow in the container to hidden,
    and you now have
    the appearance of two even sized columns.
    To be more clear, if you have two divs that total 800px, the
    left being
    200px that you want the bg color of black, and the right
    being 600px with
    the bg color you want green, you create an image that is
    800px wide, 200 px
    black on the left, 600px of green set on the right.
    If you want a border to separate the two, put it on the
    longer of the divs.
    I am not sure how your float of left and right will affect it
    though, I
    usually float both left.
    "DreamChristine" <[email protected]> wrote
    in message
    news:[email protected]...
    > Ok..is it just me, or does auto height really do squat
    when it comes to
    > expanding and contracting of content in other divs that
    it surrounds? I
    > have a
    > div surrounding 2 divs, one that floats to the left, and
    one that floats
    > to the
    > right. If the div that surrounds them both has a height
    that is bigger
    > than
    > they are, it wraps just fine, however, if I set it to
    auto and add content
    > to
    > the inside divs, it doesnt grow and expand accordingly,
    screwing up the
    > footer
    > div I have below the div surrounding the 2 divs.
    >
    > Reason I wanted a div surrounding the two divs is cuz if
    one was longer
    > than
    > the other, due to there being more content in one than
    the other, then the
    > footer div would, despite it being the full length of
    the page, shrink and
    > fit
    > itself below the shorter div tag with less content. Why
    doesnt the div
    > just
    > stay below the longest div since thats where it fits due
    to it being the
    > full
    > length of the page!?
    >
    > I attached my code. No, I cannot link the site. I do not
    have the site.
    > Its
    > under construction with no host. Y'all have dreamweaver,
    paste it in a new
    > file
    > and add your own random images. the "filler text" is
    just there so I can
    > show
    > you that if I stick that there it wraps around fine, but
    if you get rid of
    > it,
    > the div thats supposed to be wrapping around two divs
    sticks itself above
    > the
    > two divs..even though it doesnt close till have the two
    divs!! WHY!?
    >
    >
    >
    > <!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" />
    > <!-- TemplateBeginEditable name="doctitle" -->
    > <title>Untitled Document</title>
    > <!-- TemplateEndEditable -->
    > <!-- TemplateBeginEditable name="head" -->
    > <!-- TemplateEndEditable -->
    > <style type="text/css">
    > <!--
    > #whole {
    > height: auto;
    > width: 900px;
    > margin-right: auto;
    > margin-left: auto;
    > border: thick groove #0F0;
    > }
    > #header {
    > height: 251px;
    > width: 900px;
    > margin-right: auto;
    > margin-left: auto;
    > }
    > #navigation {
    > height: 100px;
    > width: 900px;
    > margin-right: auto;
    > margin-left: auto;
    > }
    > #body_wrap {
    > height: auto;
    > width: 900px;
    > margin-right: auto;
    > margin-left: auto;
    > border: thick groove #C0F;
    > }
    > #body {
    > float: left;
    > height: auto;
    > width: 450px;
    > }
    > #side_bar {
    > float: right;
    > width: 450px;
    > }
    > #footer {
    > height: 300px;
    > width: 900px;
    > margin-right: auto;
    > margin-left: auto;
    > }
    > -->
    > </style>
    > </head>
    >
    > <body>
    > <div id="whole">
    > <div id="header"><img
    src="../images/dawn_header2.jpg" width="900"
    > height="251" alt="Dawn Dause Header" /></div>
    > <div id="navigation">Content for id "navigation"
    Goes Here</div>
    > <div id="body_wrap">
    > <div id="body"><!-- TemplateBeginEditable
    name="body" -->Content for
    > id
    > "body" Goes Here<!-- TemplateEndEditable
    --></div>
    > <div id="side_bar"><span
    > title="blocked::
    http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"><a
    > title="blocked::
    http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"
    > style="color: blue; text-decoration: underline"
    > href="
    http://www.dawndause.com/greenhaven.htm"><a
    > title="blocked::
    http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"
    > style="color: blue; text-decoration: underline"
    > href="
    http://www.dawndause.com/greenhaven.htm"></a></span><br>
    > <font size="4"><b>
    > <font
    > color="#ffffff" size="+1"><marquee
    bgcolor="#000080" scrollamount="4"
    > direction="left" loop="true"
    width="179"></marquee>
    > </font></b></font>
    > fdfsfsdfsdf
    > </div>
    > <br />
    > fffff
    > </div>
    > <div id="footer"><img
    src="../images/activerain_adnew.jpg"
    > alt="Activerain"
    > width="350" height="60" /></div>
    > fff
    > </div>
    > </body>
    > </html>
    >

  • Is it possible to keep centered an AP div into another div?

    I have a division block with sizes set in ems containing some
    text at the top and another div at the bottom with a picture in it.
    I want the div with the picture to stay at a certain percentage
    distance from bottom of the containing div block and be centered
    into it when the user increases the text.
    I manage to position the image at the bottom by styling its
    div as AP and the containing div as relatively positioned but I
    can't figure out how to keep the positioning at the center when the
    user increases the text.
    Is this possible?

    Personally, I think the whole approach is big trouble.
    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
    ==================
    "TC2112" <[email protected]> wrote in message
    news:[email protected]...
    > Hello,
    >
    > How about using the AP div to just control the distance
    from the bottom?
    > Set the left position to 0 and make the width of the AP
    div the same as
    > the blocks div.
    > Remove the red background color so it is transparent.
    >
    > Then, in that AP div insert a div with the width of
    339px and the same
    > height as the AP div, 245px.
    > Give this div the red background color and a left and
    right margin of
    > auto.
    > Put the image in this div.
    >
    > Now this div will center in the AP div, so it's centered
    in the blocks
    > div, and the AP div will keep it 5% from the bottom.
    >
    > Murray may offer a better solution, but it was fun to
    think about this
    > one.
    >
    > Here's the code:
    >
    http://tnsgraphics.com/ctrimg.htm
    >
    > By the way, if the red background isn't part of your
    design and was to
    > just help show the issue, then you actually don't even
    need the inner div.
    > Just give the image a left and right margin of auto:
    >
    >
    http://tnsgraphics.com/ctrimgnoRED.htm
    >
    > Take care,
    > Tim
    >
    >
    >
    >
    > "emil emil" <[email protected]> wrote
    in message
    > news:[email protected]...
    >> Thank you Murray, the content is fed from an XML
    file but I'm not
    >> including it
    >> since the problem can be seen without it. With the
    XML content it just
    >> becomes
    >> 4 blocks like the one currently in 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"
    >> xmlns:spry="
    http://ns.adobe.com/spry">
    >> <head>
    >> <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    >> <title>Untitled Document</title>
    >> <script src="SpryAssets/xpath.js"
    type="text/javascript"></script>
    >> <script src="SpryAssets/SpryData.js"
    type="text/javascript"></script>
    >> <script type="text/javascript">
    >> <!--
    >> var QqQqQq = new
    Spry.Data.XMLDataSet("plants_data.xml", "plants/plant");
    >> //-->
    >> </script>
    >> <style type="text/css">
    >> <!--
    >> .blocks {
    >> float: left;
    >> width: 22em;
    >> margin-bottom: 2em;
    >> background-color: #CCCCCC;
    >> padding-left: 0.5em;
    >> margin-top: 1em;
    >> text-align: left;
    >> margin-right: 2em;
    >> height: 25em;
    >> padding-right: 0.5em;
    >> position: relative;
    >> }
    >> #wrapper .blocks #pictures {
    >> text-align: center;
    >> bottom: 5%;
    >> position: absolute;
    >> width: 339px;
    >> left: 4%;
    >> background-color: #FF0000;
    >> height: 245px;
    >> }
    >> body {
    >> margin-top: 0px;
    >> }
    >> #wrapper {
    >> width: 54em;
    >> margin-right: auto;
    >> margin-left: auto;
    >> }
    >> -->
    >> </style>
    >> </head>
    >>
    >> <body>
    >> <div id="wrapper" spry:region="QqQqQq">
    >> <div spry:repeat="QqQqQq">
    >> <div class="blocks">
    >> <div>{name}</div>
    >> <div>{description}</div>
    >> <div>{size}</div>
    >> <div id="pictures"><img
    src="images/large/{image}" /></div>
    >> </div>
    >> </div>
    >> </div>
    >>
    >> </body>
    >> </html>
    >>
    >
    >

  • Draggable div inside "parent" div

    Hi,
    Newbie in Edge Animate and needing some help with draggable items..
    So here's the problem:
    I'm doing some kind of "map-application" and I want to do draggable "map"-div into div (the map-div is larger than the "upper" div - so this "upper" div should identify this lower's "map"-div edges).
    This map-div contain map-image including some text elements and some actions.
    I have tried to do this with jQuery draggable-function and added that containment-definition, but it won't work properly ( I think that syntax was incorrect also.. )
    I found awesome jQuery-function draggable_background.  That works perfectly, BUT I need same function for div-element not background-image..
    I hope you get the point.
    Have anyone ideas or maybe even complete solution for my problem?
    PS. This map should also work with touchable devices.
    -Mariian-

    Hi,
    here is some screenshots of my work. Are these big enough?
    And that warning-sign is telling that my picture is larger than 1024 px and so on..I will reduce that image..
    -Mariian-

  • What is the difference between div class and div id

    I have managed to achieve a two colum css within my content.  I normally use "div id" but when I did my two colums it only worked (for me anyway) if the content was a "class" and the right content a "div".  Why is this? Is this incorrect?
    This is my code
    .content {
              height: 400px;
              width: 300px;
              background-color: #FF0;
              float: left;
    #rightcontent {
              width: 694px;
              background-color: #0FF;
              float: right;
              height: 400px;
    If I try to have content as "id" it disapears.
    Thank you in anticipation.  Karen

    If I change the div class to id, then my box on the left hand side disappears.  This is the code below.  I set the page up like that as it's more of a banner so I can have my promotions at the top of my page, so no I guess I should not have used "content"..  Then I was going to have a content area and then a footer for my links to pages.
    <div class ="content">
    <p>Our Fantastic New Design</p>
    </div>
    <div id="rightcontent"></div>
    </div>
    </body>
    </html>
    New question - I want to copy my header and dropdown menu on all of my other pages, I was practicing last night but it did not work.
    I linked the dropdown menu css to a new page, but I did not link the css styles as I dont want all of my pages being the same.  Originally I just copied one page to another, that's when I found out that if I changed one page then it changed the other, does that mean I need to set up all new css styles for each page?
    below is what I copied to create the header and dropdown menu on each page.
    <div class="container">
      <div class="header"></div>
    <div id="wrapper">
    <div id="navMenu">
    <ul>
    <li><a href="#">Home</a>
    <ul>
    <li><a href="#">link item</a></li>
    <li><a href="#">link item</a></li>
    <li><a href="#">link item</a></li>
    <li><a href="#">link item</a></li>
    <li><a href="#">link item</a></li>
        </ul> <!end inner ul-->
    </li> <!end li-->
    </ul> <!end main ul-->
    <br class="clearFloat" />
    </div> <!end navMenu->
    </div> <!end wrapper->
    I obviously copied all of my links! 
    www.bristolequestrianservices.co.uk

  • Need help-confused on top margin space with div in sidebar div

    Hello,
    I have tried for hours to figure out what is affecting the margin of the top right div #first_ad which is contained in #sidebar2. Right now I have that div first nav with 10px top that looks like 30 in IE7 and 40px in iIE8 (chrome, firefox are fine). I have tried 0 margin on p and h tags and other things to lord only knows what else. I just cannot see what is affecting this.
    If I could understand this it would be of great help as I seem to run into this alot with placing a div in a sidebar. I start out by using the dreamweaver templates in cs4 as my base.
    Here is the link to the page.
    http://www.hanovertypocraft.ca/test2/index3.html
    Thank you for any assistance you may give me!!
    below is the css
    @charset "UTF-8";
    body  {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #FFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #000;
    background-image: url(../images/hantypbg2.jpg);
    background-repeat: no-repeat;
    .thrColFixHdr #container {
    width: 900px;
    text-align: left; /* this overrides the text-align: center on the body element. */
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-image: url(../images/container_bkgd.png);
    background-repeat: no-repeat;
    .thrColFixHdr #header {
    padding: 0;
    height: 110px;
    margin: 0px;
    clear: none;
    float: left;
    width: 740px;
    .thrColFixHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .thrColFixHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 165px; /* padding keeps the content of the div away from the edges */
    display: inline;
    .thrColFixHdr #container #sidebar1 p {
    margin: 0px;
    padding: 0px;
    #header #head_logo_text {
    height: 110px;
    width: 355px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 225px;
    color: #FFF;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    clear: none;
    float: left;
    margin-right: 0px;
    padding: 0px;
    #header #head_logo_text a {
    color: #FFF;
    #header #head_logo_text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 21px;
    margin: 0px;
    padding: 0px;
    .thrColFixHdr #container #header img {
    margin: 0px;
    padding: 0px;
    #nav_home {
    width: 135px;
    padding: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
    height: 320px;
    margin-top: 10px;
    .thrColFixHdr #sidebar2 {
    float: right; /* since this element is floated, a width must be given */
    width: 140px; /* padding keeps the content of the div away from the edges */
    margin-right: 10px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #00F;
    .thrColFixHdr #container #sidebar2 h1 {
    margin: 0px;
    padding: 0px;
    .thrColFixHdr #container #sidebar2 p img {
    margin: 0px;
    padding: 0px;
    .thrColFixHdr #container #sidebar2 p {
    margin: 0px;
    padding: 0px;
    #mainContent {
    margin-top: 10px;
    margin-right: 160px;
    margin-bottom: 0;
    margin-left: 175px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    #mainContent p {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    margin: 0px;
    padding: 0px;
    #mainContent #flash_div {
    width: 353px;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid #000;
    height: 265px;
    overflow: hidden;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    #sidebar2 #first_ad {
    height: 140px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;
    #sidebar2 #second_ad {
    height: 140px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;
    #sidebar2 #third_ad {
    height: 140px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;
    #sidebar2 #fourth_ad {
    height: 140px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;

    Thank you.
    I am relatively new at this and you guided me to google the patch and how to overrice it using - padding 10px !important; on my css which let me override the  fixes padding.
    I was under the misconception that the IE fix being in grey was only for information not actually pertinent.
    Again thanks and I will try to research more regarding the implimentation of these patches

  • Center div 1 place div 2 to the right of div 1

    I'm in the middle of putting together a template, basically I want my content centered on the page, but I want to create a div in the right area for ads.
    See link http://www.kiddoclicks.com/
    I want the white area to say in line with my main image which is centered.
    When I get my white div to center the right div is messed up
    any help appreciataed.
    Jacey

    *Press the F10 key or tap the Alt key to bring up the "Menu Bar" temporarily if the menu bar is hidden.
    *Use "Firefox > Options" instead of "Tools > Options" if the menu bar is hidden.
    Firefox 4+ versions have two bookmark buttons with a star in the Customize window.<br />
    One star button has a drop marker that open a Bookmark menu.<br />
    The other star button without the drop marker opens the bookmarks in the sidebar.<br />
    You can drag the Bookmarks menu button with the drop marker in the Customize window from the toolbar palette on a toolbar (e.g. Navigation Toolbar or Tab Bar or to the left side of the Bookmarks Menu Items).
    You only see the Bookmarks Menu button if the Menu bar with the Bookmarks menu is hidden (View > Toolbars or Firefox > Options).<br />
    If the Bookmarks Toolbar is visible then the Bookmarks Menu button is displayed on the Bookmarks Toolbar as part of the Bookmarks Toolbar Items (bookmarks), but you can move it from the right side to the left side of the Bookmarks toolbar if the Customize window is open.<br />
    Otherwise the Bookmarks Menu button will appear on the right side of the Navigation Toolbar.

  • Having problems when aligning footer div and content div close together, in the browsers they are wi

    My problem is when I paste text or paste anything in div tag. I have a container that contains everything. I have a content div that contains content. I also have a footer. When I align the footer at the end to content div which is in the container, it looks good until I look at it in a the different browsers, the content and footer are so wide apart. I've tried everything I could to make the browsers look as close as what I do in dreamweaver cs4. Is there a solution to this problem?
    This is the link to page working on.
    http://www.nlclv.org/truenewwebsite/html/doctrine.htm
    The footer and content div are align very close in dreamweaver but very far apart in the browsers.
    Also if you click on this link and click on calendar of events page you will see the samething.
    Thanks for your help.

    Absolutely positioned divisions are NOT a good primary layout method. Here's why:
    http://www.apptools.com/examples/pagelayout101.php
    You should use a CSS with default CSS positioning (which is no positioning at all).  And then use margins, padding and floats to align elements on the page.  Also, if you want the page height to flex to content (as it should), remove the height property from divisions containing text.
    Something like this:
    http://alt-web.com/TEMPLATES/2-col-fixed-flash-holder.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Centering One DIV in Another DIV

    Hi --
    On this page:
    http://www.mort.thelegatogroup.com/
    the DIV #navigation is
    set to extend left to right across the viewport. Within
    #navigation is
    another DIV -- #navbuttons -- that I want centered on the
    screen.
    While it's centered in IE6 I cannot get it centered in FF.
    Can someone give
    me a hand?
    Thanks,
    John

    Give the inner div a CSS width, and left/right margins of
    "auto".
    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
    ==================
    "Tarvardian" <[email protected]> wrote in
    message
    news:epqoa1$l1h$[email protected]..
    > Hi --
    >
    > On this page:
    http://www.mort.thelegatogroup.com/
    the DIV #navigation is
    > set to extend left to right across the viewport. Within
    #navigation is
    > another DIV -- #navbuttons -- that I want centered on
    the screen.
    >
    > While it's centered in IE6 I cannot get it centered in
    FF. Can someone
    > give me a hand?
    >
    > Thanks,
    > John
    >

  • Positioning off after put div inside a div

    Hi,
    Hope you're well.
    As you'll see in the first
    screenshot, I created a
    spry menu bar that was
    positioned 120 px from
    the left and 250 px from
    the top. It's position was
    perfect.
    I ultimately want to center
    the website I am building on
    the browser page so I am
    putting all the elements inside
    an outer div named "container"
    which I have centered on the page.
    However, as you'll see in the
    2nd screenshot, when I made
    that change, the spry menu bar
    got larger, was moved to the
    upper left of the container, and
    the items are no longer
    properly positioned within the
    menu bar (they should be in
    the upper left)
    How can I fix this?
    Thanks!

    Don't use position:absolute.  You don't need it and it will cause you more pain than gain in primary layouts.
    To jump start your projects, use the pre-built CSS layouts that come with DW.
         File > New > blank >  HTML > Layout > 2-col, fixed, left sidebar, header, footer.
    Insert your SpryMenu into the left sidebar. 
    <div class="sidebar1">
    <!--your spry menu HTML here...-->
    </div>
    Insert images and text into the content region.
    <div class="content">
    <!--your content goes here... -->
    </div>
    Nancy O.

  • I am trying to upload dives from my dive computer onto my macbook pro but program says serial port not found - dive computer is listed on macdive

    I have a dive program called Macdive and am trying to upload my dives from my Sherwood Wisdom dive computer via usb lead. The dives will not upload and program says that serial port not found.  does anyone know how I can activate?

    Try a new post in the appropriate iPhoto forum.
    DALE

Maybe you are looking for

  • My webcam is no longer recognized by my PC

    Last night I attempted to use my webcam on my HP Pavillion dv7 Notebook PC as usual and it did not turn on. I've looked through all of the forums and I attempted to find it in the device manager as well as scan for hardware changes but nothing turned

  • Start up problem with macbook pro

    i have a problem with my macbook. when i start up the macbook after pressing power button it turns on with apple logo and then convert into a stop sign (like a circle with slash ).it does not proceed further .what should i do ??

  • IOS8 and Smart Playlist Handling

    Smart Playlist syncing with iPhone IOS8 hasn't solved the problem. The trick I have used on the previous IOS versions was to uncheck the "live update" on the ITunes on my Mac.  Doing that all my playlists showed up on the iPhone regardless the rating

  • Materialized view and  subqueries

    Hi everyone, I have a big SQL which has a lot of (select (select ...) as) statements (subqueries inside the relational projection statement). In Oracle 8i, as in 9i, I can4t create a materialized view with this kind on query. It gives me the error 's

  • Sort contacts by name

    Hi how can I sort my contacts by name?