CODEWITHSUNDEEP
htmlcssalignmentline
abc123
abc123

Reputation: 8303

With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

I'd like the image on the left to be adjacent to the horizontal line on the right (bottoms lining up flush). It should be responsive so that the line can change widths as needed. Right now, the image is sitting on top of the line, not beside it.

Edit: This will give more clarification. The orange piece is an image. The thin grey line is the line. http://screencast.com/t/beMBRhpBpZ

Here is the HTML

<div>
    <img src="image.png">
    <hr>
</div>

Here is the CSS

img {
    float:left
}
hr {
    width:100%
}

How to make this happen? The HTML/CSS can be changed as required. But should be cross-browser compatible and responsive.

Upvotes: 1

Views: 151

Answers (1)

Shadow_boi
Shadow_boi

Reputation: 2198

div {
border-bottom: 3px solid #000;
}

img {
    position: relative;
    bottom: -3px;
}

you dont really need hr. border-bottom is what you needed.

Upvotes: 1

Related Questions