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

Similar Messages

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

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">
>> 
>> </script>
>> <style type="text/css">
>> 
>> </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>
>>
>
>

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">
<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>
</a>
<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>

</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">
<ul>
<li><h1><b>PROCESS EQUIPMENT</b></h1></li>
<li><a class="ajxsub" href="#" title="Pumps"><b>Pumps</b>
</a>
<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>

</li>
<li><a class="ajxsub" href="#" title="Mixers"><b>Mixers</b>
</a>
<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>

</li>
<li><a class="ajxsub" href="#" title="Filters"><b>Filters</b>
</a>
<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>
    </a>
    <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>
    
   </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>

</li>
<li><a class="ajxsub" href="#" title="Tanks"><b>Tanks</b>
</a>
<ul>
   <li><a href="#" title="Carboys & Totes"><b>Carboys & 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>

</li>
<li><a class="ajxsub" href="#" title="Piping/Hose"><b>Piping / Hose</b>
</a>
<ul>
   <li><a href="#" title="PVC Pipe & Fittings"><b>PVC Pipe & Fittings</b></a></li>
   <li><a href="#" title="CPVC Pipe & Fittings"><b>CPVC Pipe & Fittings</b></a></li>
   <li><a href="#" title="Polypro Pipe & Fittings"><b>Polypro Pipe & Fittings</b></a></li>
   <li><a href="#" title="PE Pipe & Fittings"><b>PE Pipe & Fittings</b></a></li>
   <li><a href="#" title="Kynar Pipe & Fittings"><b>Kynar Pipe & Fittings</b></a></li>
   <li><a href="#" title="Sanitary Hose, Gaskets & Fittings"><b>Sanitary Hose, Gaskets & Fittings</b></a></li>
</ul>

</li>
<li><a class="ajxsub" href="#" title="Immersion Heaters"><b>Immersion Heaters</b>
</a>
<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>

</li>
<li><a class="ajxsub" href="#" title="Process Controls"><b>Process Controls</b>
</a>
<ul>
   <li><a href="#" title="pH & ORP Probes"><b>pH & 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>

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

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

</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” thru 3” 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   “Unstallable” unbalanced air valve design avoids stalling issues associated with   other pumps. The “Quick-Dump” 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.

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>
            
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</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" />
> 
> <title>Untitled Document</title>
> 
> 
> 
> <style type="text/css">
> 
> </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">Content for
> id
> "body" Goes Here</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>
>

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

How do I insert an image in a div box?

OK I've got a seemingly small issue I have to iron out to update our homepage after our graphics person decided to stop showing up to work. If you need to view the page source it is located here - http://www.rugged-cctv.com/indextestvideo2.shtml
1. In the image listed below on the red title of the youtube video I have inserted a Rugged Cams logo image that needs to appear like it does in the image. It also shows up correct in the live view of DW When uploaded the actual page just lists the alt text. I would also like to center the text in the middle of the image instead of at the bottom of it. How do I get the image to actually show up? and center the text vertically on the Rugged Cams logo?
Here is the code for the container it is in and that div.
<div id="youtubecontainer" style="overflow: hidden;">
<div id="youtube" style="float: left; color:red; width: 475px; padding-left: 0px; font-family:Britannic Bold; font-size: 22px; text-indent: 5px;"> Businesses & Dealers Love the <img src="images/ruggedcams.jpg" width="66" height="34" alt="RuggedCams" /> brand
<object height="370" width="460">
<param name="movie" value="http://www.youtube.com/v/3aysc6dGh3c?fs=1&hl=en_US"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/3aysc6dGh3c?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="370" width="460">
</object>
</div>

Nevermind figured it all out once I walked away!

Cannot insert fieldset inside Fluid Grid div (Was: Please help)

Please help..I couldnot insert fieldset inside FG div.(I couldnot find the fieldset while viewing in the browser also.)

A <fieldset> is a <form> element.    Copy and paste this form code into a new, blank document. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form with jQuery Validation</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">
</script>
<style>
/**BEGIN FORM STYLES**/
#contact {
font-size: 14px;
width:95%;
margin: 0 auto; /**adjust margins as needed**/
background: #FFF;
border: 2px groove #999;
padding: 2%;
#contact fieldset {
margin-bottom:5px;
background:#CCC;
#contact legend {
padding: 8px;
background: #000;
font-weight: bold;
color: #FFF;
line-height: 1.5;
/**wrap form lables and fields inside ordered lists for better web accessibility**/
#contact ol {
list-style:none;
margin:0;
padding:0}
#contact li {
padding:5px;
margin: 0;
clear: left;
#contact label{
display:inline-block;
float:left;
line-height: 23px; /**lines up labels with fields**/
width:15%;
font-size: 12px;
text-align:right;
margin-right: 10px; /*space between labels, fields*/
#contact textarea,
#contact input[type=text],
#contact input[type=email],
#contact input[type=number] {
width: 45%; /**same width on fields**/
padding: 5px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
#contact select {width:47%}
/**field background on focus**/
#contact input:focus,
#contact input:active,
#contact textarea:focus,
#contact textarea:active,
#contact select:focus,
#contact select:active
{background-color: #FFC;}
#contact label.error {
    line-height:1.5;
    color:#F00;
    background:#FFC;
    padding:3px;
    box-shadow:1px 2px 3px #333
</style>
</head>
<body>
<p>Basic Contact Form</p>

<form id="contact" action="form-processing-script.php" method="post">
<fieldset>
<legend>Required Fields:</legend>
<ol>
<li><label for="first_name">Name:</label>
<input name="first_name" id="first_name" type="text" required placeholder="First"></li>
<li><label for="last_name">Last:</label>
<input name="last_name" id="last_name" type="text" required placeholder="Last"></li>
<li><label for="e_mail">E-mail:</label>
<input name="e_mail" id="e_mail" type="email" required placeholder="[email protected]"></li>
<li><label for="selectTest">Select One:</label>
<select name="selectTest" id="selectTest" size="4" required title="Please select something!">
<option value="1">Saab</option>
<option value="2">Audi</option>
<option value="3">Fiat</option>
<option value="4">BMW</option>
</select></li>
</ol>
</fieldset>
<fieldset>
<legend>Optional Fields:</legend>
<ol>
<li>
<label for="phone">Phone:</label>
<input name="phone" id="phone" type="number" placeholder="(area code) 123-4567" />
</li>
<li><label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" />
</li>
<li><label for="message">Message:</label>
<textarea id="message" name="message" placeholder="remarks"></textarea>
</li>
<li><input name="submit" type="submit" value="Submit">
</li>
</ol>
</fieldset>
</form>


<script>
$(document).ready(function() {
    $("#contact").validate();
    $("#selectTest").validate();
</script>
</body>
</html>
Nancy O.

Inserting a table in a div in FF blows my design

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

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

Inserting Images into Dreamweaver through Div Tag

Hi im quite new to Dreamweaver and i've got CS3...I've just
designed and sliced up a website in Photoshop and have started to
compile it together in Dreamweaver using HTML and CSS. I've just
added a Div tag and added images into the page and i've got stuck,
i cant seem to put another image next to one iv already placed
their.
I need help on how to work with Div Tags and applying images
so that i can fix my website like a Jigsaw.
I have provided the code i hav in my HTML so far...

Maybe this will help you -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.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
==================
"DThandi" <[email protected]> wrote in
message
news:gk8anj$4qc$[email protected]..
> Let me show you the before and after images of the site
im working on,
> then
> maybe what im trying to describe can become more
clearer...Your right that
> i do
> need some basic understanding, I actually used to know
the answer to my
> own
> question but since i havn't played around with
Dreamweaver for a while i
> seem
> to have forgotten.
>
> This was the image on Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg
>
> This is where I am stuck now:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg
>
> These are all the small images i have sliced up from
Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg
>
> As you can see i have trouble coding in HTML. So far i
have been
> following a
> tutorial video showing me how to had images and align
them through Div
> Tag...But now i am trying to put images side by side in
the Navigation
> area and
> on top of and underneath each other. As you can see i
have Home.jpg and
> Home-Scrap.jpg. Home Scrap needs to go under Home and
both of them images
> need
> to go next to image Left-Short.jpg.
>
> Thank You
>

Insert PHP-form into XHTML-div

Maybe a noobish question but i cannot find the solution on the web...
I have a XHTML based index.html.
I use Spry tabbed panels.
In 1 Panel (Contact Panel) i like to have a email form displayed.
How do i show my Form.php inside this div?
I want the Content div to display the php form without putting the php code in the div.
Header
Menu
Content [here do i want to display the form]
Footer

Best to use an external PHP page and link the form to it. Something like:
<form action="php/sendform.php" method="post" name="contactForm" id="contactForm">
Then lay the form out the way you want in the DIV.

Insert Flash SWF into a DIV?

Hi,
Is it recommended to keep SWF files within its own DIV?
I have the DIV identified as 'Flash' (div id="flash")...is this a good idea to keep things in place as intended?
Thanks!

That's right, it makes no difference what you name the <div>, but if you use id="flash", keep in mind that you cannot reuse that id to display a second .swf on the same page, while using a class would allow you to reuse that class name as often as needed on a page with multiple .swfs.
So depending on your particular page, you may find using one or the other method, or a combination of the two.... (id vs class) will work better for you.
Best wishes,
Adninjastrator

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

</div>
Insert images and text into the content region.
<div class="content">

</div>
Nancy O.

Inserting a Div in a Div

Similar Messages

Maybe you are looking for