HTML:

<div> <form> <textarea name="message" cols="40" rows="5"></textarea> <input type="submit" value="submit"> </form> </div> Текст

CSS:

 div { width: 300px } textarea { display: block; } input { float:right; display: block; }

alt text

Why doesn't the submit button shift the text below? She's part of a div block.

    2 answers 2

    Because it has the property float: right;

    This means that the element is aligned on the right side and all the rest of the block at this level wraps around the element on the left.

    Added . If you want to make the button on the right and the text on the bottom, then you need to create a container for the button and apply the text-align CSS property to it. It determines on which side all the child elements of the container will be aligned.

      HTML:

       <div id="main"> <form> <textarea name="message" cols="40" rows="10"></textarea> <div id="other" align="right"><input type="submit" value="submit"></div> </form> </div> Текст

      CSS:

       div { width: 350px }

      alt text

      Here's a working version, float, apparently, does not work the way you want, here you can read how it works , but generally use align.

      • Oh, align is outdated, as are all the design options for tags. Then you need to use the CSS property text-align. - Alexey Sonkin