I need horizontal lines

  • 1
  • Question
  • Updated 8 years ago
  • Answered
How do I put in horizontal lines between text boxes/pictures etc?
Photo of Debra Bekker

Debra Bekker

  • 14 Posts
  • 0 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of Nazlie


  • 1721 Posts
  • 51 Reply Likes
Hi Debra

The best way to add horizontal lines between boxes is the use the <hr /> tag in HTML.

  1. Drag and drop a HTML Widget in the space between your Text or Picture Widgets where you would like the line to be. The HTML editor will open up on your screen.

  2. Type <hr /> into the HTML editor.

  3. Click OK. You will see the line on your page between the widgets.

You can style this line if you would like it to be a different height and color and so forth. Here is an example:

<hr style="height: 2px; width: 50%; background-color: blue;" />

In this example,
height = the height of the line - slightly thicker than the default line height.
width = how far the line extends across the page. You may decide that you do not want the line to take up the full width of the page, so you can change it using the width property. In the example, I have made it 50% wide (half the width of the page), but you can use any percentage.
background-color: blue = This adds a color to the line. You can use a color name as I have done in the example, or use hex values to define the color. Here is a hex value color chart - hex values look like this: #0000FF.

Hope this works for you. Let us know if you need help!

Thank you