Placing "some" objects to the right [CSS]

If you look at this prototype: http://www.noteme.com/ in the top right corner where there is a search box, I am having some problems trying to do that in CSS. My CSS version can be found at http://www.noteme.com/css.

The problem is that there is many objects there. And they have to be placed right. No matter what I do, I can't get it right.

• There is first one image on the top (says: ::search::)
• There is one image on the left side of the text box (the one that is 45deg right)
• Then there is the textbox.
• Then there is just some color there
• Then there is an other image (the red one that says go)
• Then some more color
• Then a thin image to the right
• Rounded off with a picture under it (that says Advanced Search)

The original code (if it helps is):

Code:

---

<td align="right" class="header"><table width="193" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td colspan="3"><img src="pics/search_top.gif" alt="" width="193" height="13" /></td>
              </tr>
              <tr>
                <td width="49"><img src="pics/search_left.gif" alt="" width="49" height="27" /></td>
                <td width="140" align="center" valign="middle" class="searchcell"><div>
                    <form name="form1" id="form1" method="post" action="">
                      <input name="textfield" type="text" class="searchbox" size="10" />
                      <input name="imageField" type="image" src="pics/search_go.gif" />
                    </form>
                  </div></td>
                <td width="4"><img src="pics/search_right.gif" alt="" width="4" height="27" /></td>
              </tr>
              <tr>
                <td colspan="3" align="right"><a href="#"><img src="pics/search_bottom.gif" alt="Advanced Search - Link me to an Advanced Search!" width="193" height="15" border="0" /></a></td>
              </tr>
            </table></td>

---

ØØ

I don't even see the search box on the second one. :confused:

You could try margin-right: 0px although I'm not sure this will work in IE or you could take te box and use float: right.

Quote:

---

Originally Posted by visualAd

I don't even see the search box on the second one. :confused:

You could try margin-right: 0px although I'm not sure this will work in IE or you could take te box and use float: right.

---

Sorry, I don't have that search box up now. Got too complicated to have them all there at the same time trying to align them right. I just have 2 of the pictures up there now. And it worked with margin-right: 0px; but it is still on the top though...trying to push it under the other image now...:(

Give the image a higher z-index than the search box.

http://www.w3.org/TR/CSS21/visuren.html#z-index

Hmmm....how will that solve my problem, I don't want them on top of each other. I want them side by side, and over and under, not on top of each other.


Now how to I place a picture in the right bottom coner of a div...:)

I didn't say anything about them bein on top of each other. If you wan one overlapping the other, even if it is just partial then you need to set the z-index.

To put a div in the botom right try: bottom: 0px and right: 0px.

Side by side...
Side by side...
Side by side...
Side by side...
Side by side...
Side by side...
Side by side...


No overlapping at all...:)...they are cut out of a photoshop file, and they fit perfectly.So NO overlapping nesseary.


And now it even renders perfectly in FF, but IE still have some margins for some reason...:(


ØØ

I ended up using a div to place them inside, then sat the divs postition to relative. Then I postitioned all the images inside with "abolute", and had to set margins and paddings to 0, and display:block overflow:hidden; so IE won't make a mess of my site.


The finished result is the search box in the upper right corner.

Thanks VisualAd for all your MSN help.


ØØ