Member Avatar for nishanthaMe 
<html>
<head><title>mypage</title>
</head>
<body>
          <div id="first">
                             <div> first div</div>
                               <div> second div</div>
         </div>
</body>
</html>

Out put of this code appers as follows

first div
second div

But I want the out out as

second div frist div

and the above out put should be right hand side of the browser.

So I would be very thank full if anyone can give me an ide

cheers

Nishantha

  • 7 Contributors
  • 6 Replies
  • 110 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ardeezstyle

Dani AI

Generated

— easiest, most reliable fix is to use CSS rather than tables or deprecated attributes. Two practical options are shown below: a modern, CSS-only approach that reorders items visually without changing the HTML (Flexbox), and a simple HTML-first approach that just changes the source order and aligns the container to the right.

Example (Flexbox: reorder visually and push to the right)

<div id="first">
  <div class="item a">first div</div>
  <div class="item b">second div</div>
</div>

#first {
  display: flex;
  justify-content: flex-end; /* move the row to the right */
  gap: 10px;
}
#first .a { order: 2; }
#first .b { order: 1; }

Alternative (change HTML order and align right)

<div id="first" style="text-align:right;">
  <div style="display:inline-block;">second div</div>
  <div style="display:inline-block;">first div</div>
</div>

Notes on earlier replies: ’s table approach will work visually but is not semantic or responsive. @arde ezstyle’s absolute-position idea is fragile (and the syntax shown was incorrect); absolute removes elements from flow and can cause overlap. is right that source order matters — but CSS (Flexbox or the order property) lets you change visual order without editing markup.

For current guidance and browser support, see the MDN Flexbox guide and the order property documentation:

Troubleshooting tips: check for default margins on the child divs, verify box-sizing, and remove whitespace when using inline-blocks (or use gap/flexbox to avoid that issue).

Recommended Answers

All 6 Replies

Member Avatar for peter_budo

Have look on this tutorial it should help you

Member Avatar for ~s.o.s~

This thread has got nothing to do with Javascript; it would be more relevant in the CSS section. Moved.

Member Avatar for o0DarkEvil0o 
<html>
      <head><title>mypage</title>
      </head>
      <body>
      <div id="first" align="right">
      <table><tr>


      <td><div> first div</div></td>
      <td><div> second div</div></td>
     </tr></table>
      </div>
      </body>
      </html>
Member Avatar for jhaycutexp

took time to read your post and really i really can't understand what you mean... hehehe...

the link was good by peter.. should answer your questions..

heres some links..

this helped me a lot.. just take the time reading it.. this would probably help you too...

best regards

Member Avatar for MidiMagic

You must put things on the left before things on the right.

Member Avatar for ardeezstyle

Hi I've gone thro' ur problem and come out wid a solution if I do understand wat actually ur problem is.

Now wen u r using DIV tag u have to use the attribute style wher u will mention margin-left for both the DIVisions and POSITION attribute as absolute.

For instance,

<DIV style="margin-left: 0; border: 1px solid red; width: 400;" position=absolute></DIV>
   <DIV style="margin-left: 410; border: 1px solid red; width: 400;" position=absolute></DIV>

This may work.

With Regards
Rupam Datta

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.