Css styling on header tag: Underline running into photos

Hello.

Please see the link below. Notice how the line under my headers is running behind the photos? How can I cut them off where the text starts to wrap?

http://steelcitycreative.com/aufman/about-us/

Thanks!

You can’t really stop those lines going full width. You could fake it, though, by putting a border around the image that’s the same color as the body background. E.g.

.alignright {
  border-width: 15px 0 15px 15px;
  border-color: #DFDCC4;
  border-style: solid;
  padding: 0;
  margin: 15px 0 10px 10px;
}

I’d just apply the body background color to your image’s background so that the lines don’t show through. And if you’d like even more distance, then you can add some padding to the image which will further separate the lines from the image.


.alignright {
/* add the below to your existing declarations */
 background: #dfdcc4;
 padding: 10px;
}

Yes, padding and background color is a nice alternative to border. :slight_smile: