21 {{ upvoteCount | shortNum }}
21 {{ upvoteCount | shortNum }}

How to move a text box with HTML only

by chase8705
13 replies
  • WEB DESIGN
    • |
Hello,

I have just created a text box using this code:

<div style="width:200px;height:100px;border:6px double orange;">
text input here</div>

Now I want to move it more to the center of my page because it is all the way to the left. What would I edit to make it move over to the right about a quarter of the page?

Thanks in advance.
#box #html #move #text
  • Profile picture of the author stephtwy
    You can try this adding this:

    <div style="margin-left: 25%">
    Text input here
    </div>
    Signature
    Stephanie Tan
    steph[at]stephcreativ.com
    http://stephcreativ.com
    {{ DiscussionBoard.errors[8164442].message }}
    • Profile picture of the author chase8705
      Originally Posted by stephtwy View Post

      You can try this adding this:

      <div style="margin-left: 25%">
      Text input here
      </div>

      Your awesome. That worked perfectly. Thank you so much!
      {{ DiscussionBoard.errors[8164458].message }}
  • Profile picture of the author chase8705
    I now have another question. I have moved my boxes over but now I am trying to get them to be on the same line. I want them to be side by side. One under the "Free Membership" title and the other under the "Premium Membership" title. Here is the picture.

    http://i42.tinypic.com/2zpkwfs.jpg

    Please help. Thank you.
    {{ DiscussionBoard.errors[8164512].message }}
  • Profile picture of the author stephtwy
    First of all, you need a big <div> to contain the two <div>(s) for "Free Membership" and "Premium Membership". The big <div> is the one that you add the margin-left to so that it is not sticking to the left of your browser. Then you can float the two <div>(s) inside.

    The code:

    <div style="margin-left: 25%">
    <div style="float: left;">Free Membership</div>
    <div style="float: left;">Premium Membership</div>
    </div>

    Please state the width and make sure the big <div> has enough width to contain both smaller <div> inside so that they will be side by side.
    Signature
    Stephanie Tan
    steph[at]stephcreativ.com
    http://stephcreativ.com
    {{ DiscussionBoard.errors[8164574].message }}
    • Profile picture of the author chase8705
      Originally Posted by stephtwy View Post

      First of all, you need a big <div> to contain the two <div>(s) for "Free Membership" and "Premium Membership". The big <div> is the one that you add the margin-left to so that it is not sticking to the left of your browser. Then you can float the two <div>(s) inside.

      The code:

      <div style="margin-left: 25%">
      <div style="float: left;">Free Membership</div>
      <div style="float: left;">Premium Membership</div>
      </div>

      Please state the width and make sure the big <div> has enough width to contain both smaller <div> inside so that they will be side by side.

      I'm kind of confused. I'm sorry. Still kinda new at this. Here is what I have:

      <p style="padding-left: 200px;"><span style="text-decoration: underline;">Free Membership</span> <span style="text-decoration: underline;">Premium Membership</span></p>

      <div style="margin-left: 14.5%"><div style="width:200px;height:280px;border:6px double black;">
      <center>Text will be inserted here.</center>

      <div style="margin-left: 75.5%"><div style="width:200px;height:280px;border:6px double black;">
      <center>Text will be inserted here.</center>

      So what would it look like after I want it the way I posted earlier? I really appreciate your help.
      {{ DiscussionBoard.errors[8164595].message }}
  • Profile picture of the author stephtwy
    This is what you can do:

    <div style="margin-left: 14.5%;>

    <div style="float:left;"><u>Free Membership</u>
    <div style="width:200px;height:280px;border:6px double black;">Text here</div>
    </div>

    <div style="float:left;"><u>Premium Membership</u>
    <div style="width:200px;height:280px;border:6px double black;">Text here</div>
    </div>

    </div>
    Signature
    Stephanie Tan
    steph[at]stephcreativ.com
    http://stephcreativ.com
    {{ DiscussionBoard.errors[8164610].message }}
    • Profile picture of the author chase8705
      Originally Posted by stephtwy View Post

      This is what you can do:

      <div style="margin-left: 14.5%;>

      <div style="float:left;"><u>Free Membership</u>
      <div style="width:200px;height:280px;border:6px double black;">Text here</div>
      </div>

      <div style="float:left;"><u>Premium Membership</u>
      <div style="width:200px;height:280px;border:6px double black;">Text here</div>
      </div>

      </div>

      Here is what that did.

      Image - TinyPic - Free Image Hosting, Photo Sharing & Video Hosting
      {{ DiscussionBoard.errors[8164619].message }}
      • Profile picture of the author stephtwy
        Originally Posted by chase8705 View Post

        Try adding width to the first <div>, something like this:

        <div style="margin-left: 14.5%; width: 600px;">

        <div style="float:left;"><u>Free Membership</u>
        <div style="width:200px;height:280px;border:6px double black;">Text here</div>
        </div>

        <div style="float:left;"><u>Premium Membership</u>
        <div style="width:200px;height:280px;border:6px double black;">Text here</div>
        </div>

        </div>
        Signature
        Stephanie Tan
        steph[at]stephcreativ.com
        http://stephcreativ.com
        {{ DiscussionBoard.errors[8164702].message }}
        • Profile picture of the author chase8705
          Originally Posted by stephtwy View Post

          Try adding width to the first <div>, something like this:

          <div style="margin-left: 14.5%; width: 600px;">

          <div style="float:left;"><u>Free Membership</u>
          <div style="width:200px;height:280px;border:6px double black;">Text here</div>
          </div>

          <div style="float:left;"><u>Premium Membership</u>
          <div style="width:200px;height:280px;border:6px double black;">Text here</div>
          </div>


          </div>

          Okay... Almost there. This is now what it looks like:

          http://tinypic.com/r/hu2kw1/5

          I just need to space them apart a bit. I don't want them exactly side by side. Maybe the first one where it's at and the second one a bit farther.

          Thanks again for your help so far.
          {{ DiscussionBoard.errors[8164720].message }}
          • Profile picture of the author stephtwy
            You need to add margin to the <div>. For example:

            <div style="float:left; margin-right: 20px;"><u>Free Membership</u>
            <div style="width:200px;height:280px;border:6px double black;">Text here</div>
            </div>
            Signature
            Stephanie Tan
            steph[at]stephcreativ.com
            http://stephcreativ.com
            {{ DiscussionBoard.errors[8164733].message }}
            • Profile picture of the author chase8705
              Originally Posted by stephtwy View Post

              You need to add margin to the <div>. For example:

              <div style="float:left; margin-right: 20px;"><u>Free Membership</u>
              <div style="width:200px;height:280px;border:6px double black;">Text here</div>
              </div>

              That did it.. Thank you so much for all your help. I appreciate it.
              {{ DiscussionBoard.errors[8164749].message }}
  • Profile picture of the author jedsonack2
    You can directly use <div style=""> tag for your issue.
    You can change the image as you wish with these tags.
    {{ DiscussionBoard.errors[8164635].message }}
    • Profile picture of the author chase8705
      Originally Posted by jedsonack2 View Post

      You can directly use <div style=""> tag for your issue.
      You can change the image as you wish with these tags.
      I'm not sure how to do that. I'm sorry.
      {{ DiscussionBoard.errors[8164638].message }}

Trending Topics