Member Avatar for harsh93

Hi,,,

I want the help regarding my project.
I want to combine the multiple div tags in one main div tag so that if i will move that div tag then it will move div tags that it contain.

the tag is just like this:

#apDiv11 {
    position:absolute;
    left:410px;
    top:165px;
    width:287px;
    height:65px;
    z-index:11;
    background-color: #B5B6F0;
    border:1;
    border-style:solid;
    border-color:darkslateblue;
}
#apDiv12 {
    position:absolute;
    left:410px;
    top:230px;
    width:287px;
    height:30px;
    z-index:12;
    background-color: #CC99CC;
    border:1;
    border-style:solid;
    border-color:darkslateblue;
}
<div id="apDiv11">
  <div align="right"> .......thinks Doctor<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Adium&quot; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;software source open best the is</div>
</div>
<div id="apDiv12">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="submit" name="button2" id="button2" value="No" />
  <input type="submit" name="button" id="button" value="Yes" />

So is there any tag available.???

Please reply me fast.

Harsh Patel

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

You don’t need a special tag to “combine” them. Wrap the related boxes in a single container and move that container. is right that nesting makes the children follow the parent; the key detail is making the parent the positioning context so you can place or move everything as a unit without fighting page coordinates.

Example pattern you can drop in:

<div class="group">
  <div class="box box-a">...</div>
  <div class="box box-b">...</div>
</div>
/* Move the whole group by changing left/top (or with transform) */
.group {
  position: absolute;      /* this is what you drag around */
  left: 410px;
  top: 165px;
  width: 287px;
}

/* Common box styling */
.box { border: 1px solid darkslateblue; width: 100%; }

/* First box */
.box-a { height: 65px; background: #B5B6F0; text-align: right; }

/* Second box sits under the first without absolute coords */
.box-b { height: 30px; background: #CC99CC; margin-top: 5px; }

/* If you need pixel-perfect stacking inside the group instead,
   make the group relative and absolutely place the children:
   .group { position: relative; }
   .box-a { position: absolute; top: 0; left: 0; }
   .box-b { position: absolute; top: 65px; left: 0; }
*/

A few quick checks that often trip people up:

  • IDs must be unique. If you reuse styles, switch to classes for the child boxes.
  • border: 1; is invalid. Use border: 1px solid darkslateblue; or specify border-width, border-style, and border-color separately.
  • z-index only applies to positioned elements (anything with position not equal to static).
  • Replace align="right" with CSS (text-align: right;). That keeps markup clean and predictable.

This way, you move .group and both boxes follow together, which is what ’s block-level explanation leads into in practice.

Recommended Answers

All 2 Replies

Member Avatar for powersstuff

Not sure I fully understand what you want but if you put div12 inside of div11, then when you move div11, then div12 should move with it. I would remove the AP of div12 since you wouldn't need it. Also, be sure you always close your div.
<div11>
<div12> contentcontentcontent</div>
</div>

Member Avatar for ko ko

DIV is the block level element. Block level can include both block level (such as heading, paragraph, list, table) and inline level elements (such as span, anchor, image), but inline cannot include block element. Here is some example:

This is available.

<div>
    <div></div>
    <p></p>
</div>
This is unavailable.

<span>
      <div></div>
      <p></p>
</span>

Because the 'span' tag is inline element and it cannot include the block level element.

Hope that help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.