How to Display Boxes Side by Side in HTML

Save

When inserting text boxes into your HTML page, you may find that it makes more sense to place text boxes on the page side by side rather than one on top and one on the bottom. When you display text boxes side by side, you are able to allow a user to read content on the page without needing to scroll lower on the page to view it.

  • Log in to your Web server and locate the HTML page on which you want to display boxes side by side.

  • Click on the location of the HTML page where you want to display the boxes. The location where you display the boxes must be somewhere in between the <body> and the </body> tags.

  • Insert the following HTML code:

    <table><tr><td valign="top"><div style="border: 1px solid; overflow: auto; width: 200; height:100;">Text goes here</div></td><td valign="top"><div style="border: 1px solid; overflow: auto; width: 200; height:100;">Text goes here</div></td></tr></table>

  • Replace both instances of "Text goes here" with the actual content you want displayed in the boxes. Change the height and width numbers to increase or decrease the size of the boxes.

  • Publish the page.

References

Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!