Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Hayden LaBrie
Hayden LaBrie
2,913 Points
Posted by Hayden LaBrie
Hayden LaBrie
2,913 Points

How to draw a line completely down the page that separates a floated image and text?

Ive been having trouble figuring out how to seperate text thats on the left side of the page and a picture that represents the text on the right. I want to draw a line vertically all the way down the page to show the separation of the 2. I will be putting more paragraphs and images next to each of them. Thank you for your help.

  <p><img src="graphic1.jpg" alt="graphic1">Twitter is a social networking website/application that allows users to interact with others.</p>
      <p><img src="graphic2.jpg" alt="graphic2">The forum section is a great way to discuss topics and questions.

<style> 
p img{
  float: right;
}
</style>

1 Answer

Thomas Brun
seal-mask
.a{fill-rule:evenodd;}techdegree
Thomas Brun
Front End Web Development Techdegree Student 5,896 Points
Thomas Brun
.a{fill-rule:evenodd;}techdegree
Thomas Brun
Front End Web Development Techdegree Student 5,896 Points

Hi,

I think the easiest way would probably be to enclose your left content in a <div> and apply a right border to it, as seen below. You'll need to specify a height, or fill it with content, for it to go all the way down though.

.vertical {
    border-right: 1px solid black;
}

Hope it helps!