none
Can't insert div RRS feed

  • Question

  • I'm trying to put a form with two fields, and a submit button. However I can't put a div on the right side when I try it goes to the left.  Please help ASAP.

     

                                                           Thanks,

                                                                           Ron

    Thursday, October 7, 2010 8:47 AM

All replies

  • Look up floats, clears and margins in the CSS tutorials at http://w3schools.com.

    Example:

    <div id="somecontainer">
    <div style="float:right;width:290px">This goes on the right</div>
    <div style="margin-right:300px;">This goes on the left</div>

    <div style="clear:right;line-height:0;font-size:0;">&nbsp;</div>
    </div>


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Thursday, October 7, 2010 9:10 AM
  • You really will want to learn something about HTML and CSS before you proceed. A div is a block element, and all block elements, by default (a) start on a new line, and (b) take up the entire width of their container.

    Besides Ron's excellent advice to study the material at w3schools, one thing that will help you to visualize what is going on in the page is, while working (they can always be removed later) add a background-color and/or a distinctive border to all elements. Something like

    div {
       border:1px dashed red;
    }

    and

    p {
       background-color:yellow;
    }

    and so forth.

    You will be able to see for yourself that that div stretches all the way across the container, and by default has a height only as great as its content, and will expand vertically to accommodate its content, or that the inline element only has a width the same as its content, regardless of what you assign it, and that margins and padding only work inline, not vertically. When you're finished with the layout, simply delete those selectors and the for-layout-only styling goes bye-bye.

    Being able to visualize the elements on the page as you create and move or modify them is a great aid to beginning developers just learning HTML and CSS. Give it a try and you'll see what I mean.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Thursday, October 7, 2010 4:22 PM