Put a line across a page in HTML


#1

Hi. I'm trying to create an advertisement inside a block of text (like you might see in a news feed on an App). It has to be in HTML. The result I'm looking for is a line across the page with the words 'Sponsored Content' in the middle of the line. Then I'll put my text, image and links - no issue doing that. Then underneath I want a line that goes right across the page hence creating a top and bottom line. Anyone know the HTML code for the lines?


#2

Hey Tonyoregan,

You can use the <hr> tag to get this:


...or you could apply border-top and border-bottom to the parent element of your ad stuff, like this:

<!-- html -->
<!-- other stuff -->
<div class="ad-container">
  <!-- advertisement image -->
  <!-- advertisement description text -->
</div>
<!-- other stuff -->

/* css */
.ad-container {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

#3

Sponsored Content


Content
goes
in
here


#4

If you're wondering how he did the "half line" thing up there, it's coded like so:

<hr width="50%">