Cannot get my div to move(position)

Question

I'm doing my first piece of HTML & CSS today, and I'm having trouble trying to move a div. I read some tutorials on CSS and tried to replicate what I've seen. But for some reason I cannot get the div to move.

Can anybody set me straight as to what I've done wrong please?

CSS

#seax {
  position:static;
  top:400;
  left:400;
}

HTML

<div id="seax">
  <form autocomplete="off" method="post" action="/search.html">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

Just quick advice - try from the start to code with `div`s and to avoid `table` for design. Use tables just to show some data. Good luck ;) — Miljan Puzović, Mar 30 '13 at 18:18

score 2 · Answer 1 · answered Mar 30 '13 at 18:10

2

Change position:static; to position:relative;. Static position displays the div in it's default position, which is as it'd appear in the document flow you see.

answered Mar 30 '13 at 18:10

Omega

2,998
2
16
19

I think the question is a little unclear as to whether the position should be relative or absolute, but the issue definitely is with position:static; – Joseph Szymborski Mar 30 '13 at 18:17
@JosephSzymborski yes I agree. With the html given though, either one will allow positioning accurately. – Omega Mar 30 '13 at 18:20

score 1 · Answer 2 · edited Mar 30 '13 at 18:53

1

Give the div a position of absolute

#seax {
  position: absolute;
  top:400;
  left:400;
}

edited Mar 30 '13 at 18:53

Cody Guldner

2,888
1
25
36

answered Mar 30 '13 at 18:17

pallav_rus

97
6

score 1 · Answer 3 · answered Mar 30 '13 at 18:21

1

Add "px" to your CSS, and use absolute

#seax {
position:absolute;
top:100px;
left:100px;
}

http://jsfiddle.net/djwave28/tnvQz/

answered Mar 30 '13 at 18:21

Daniel

4,816
3
27
31

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

It really depends on how you want to position the div.

position: static; is definitely your issue, as static position (as @Omega noted) displays the div in it's default position. You mean to write either position: absolute or position: relative. The difference between the two is best outlined here but I'll give you a tl;dr.

position: absolute positions the div relative to the whole page, whereas position: relative positions it relative to the parent.

Also, you are missing px at the end of your top and left property values (i.e top:10px; and left:10px;)

score 0 · Answer 5 · edited Apr 20 '17 at 02:55

Try changing

<div id="seax"></div>

to

<div class="seax"></div>

and

#seax {
position:static;
top:400;
left:400;
 }

to

.seax {
 position:absolute;
 top:400px;
 left:400px;
}

if you want to use seax for multiple elements.

You could even try:

<form autocomplete="off" method="post" action="/search.html">
  <div class="seax">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

That should fix it. Otherwise your HTML document should look something like this:

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  </head>
  <style>
   .seax {
    position:absolute;
    top:400px;
    left:400px;
    }
</style>
<body>

<div class="seax">
 <form autocomplete="off" method="post" action="/search.html">
  <table>
    <tbody>
     <tr>
      <td>Search:</td>
       <td>&nbsp;
        <input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
         &nbsp;&nbsp; 
        </td>
        <td>
        <input type="hidden" name="brand" value="0">
        <input type="image" src="/user/templates/custom/search.gif" 
   value="Go" alt="Go" style="padding: 0px">
         </td>
        </tr>
      </tbody>
     </table>
   </form>
 </div>

</body>
</html>

Cannot get my div to move(position)

5 Answers5