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


Tags: html,css,alignment,line

Problem :

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.



Solution :

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

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

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


    CSS Howto..

    How can I pipe the output from gulp-w3c-css to the console

    How to styles labels only within fieldsets using CSS?

    Python: How to override text area in form using CSS

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    how to position heading in the center of the page

    div shown with jquery is cropped

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How to change color of element when hovering over another element?

    Maintain border-spacing when using show() on a display:table element hidden with display:none

    html, svg, css how to make mouse event not fire on transparent color

    How to match baseline in two floating divs

    How to make this layout in CSS?

    How can i make this border to the end?CSS

    How to put CSS content in select box and rotate it?

    How to target div within a modal box with CSS

    How to display random parts of a page on refresh?

    How to add a picture to the top of my webpage?

    how to prevent datepicker css from changing

    How to position text on image using position as absolute while container width being in percent

    Bootstrap: Only Show Fixed Footer In Larger Screens?

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How to not use absolute positioning CSS

    HTML/CSS buttons don't show in IE properly

    How to create tooltip with one element in CSS

    How to resize a canvas without anti-aliasing?

    How to ensure that the css border goes inside the image

    How to change CSS over selected element only using $(this)

    CSS InfoBox over all elements how to place? [closed]

    How do I optimize a very loooong page with TONS of images on it?

    How to add custom code to specific
  • s in wordpress while building navigation?