image and hr side-by-side

Question

image and hr side-by-side

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (2 votes)

1

I want an image (the yellow curve below) and an hr like this:

AndIhavethecodelikethis:

<div>
<img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
<hr style="height: 3px; width: 250px; border-width: 0; color: #d29e1d; position:absolute; background-color: #d29e1d; margin-bottom:10px;"/>
</div>

And I do not understand why this happens. Does anyone know why?

html

asked by anonymous 18.06.2015 / 00:33

3 answers

3

To stay side by side you can use display:inline and adjust height with margin:

margin:29px 0 0;
display:inline;

Example:

.linha{
height: 3px; width: 250px; border-width: 0; color: #d29e1d; position:absolute; background-color: #d29e1d; margin:29px 0 0;
  display:inline;
}

<div >
<img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
<hr class="linha"/>
</div>

18.06.2015 / 00:41

2

An edit of the @GuilhermeNascimento answer would do the following if you can not put a display:block

.container img {
  float:left;
  padding: 0;
  margin: 0;
}

.container hr {
    position:relative;
    top:31px;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 1px;
    border-width: 0;
    color: #d29e1d;
    background-color: #d29e1d;
    margin: 0 0 10px 0;
}

<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
   <hr/>
</div>

This solution is less elegant and more cast (because you have to know height of the image) but it has the same result.

jsfiddle

18.06.2015 / 00:47

How do I get the files to be pulled from the root of the site? Macro, Capture MOUSE and KEYBOARD

score 5 · Accepted Answer

You can add display: block to the image (since soon after <hr> comes) and also I do not see the need for position: absolute , something like:

.container img {
   display: block;
}

.container hr {
    width: 250px;
    height: 3px;
    border-width: 0;
    background-color: #d29e1d;
    margin: 0 0 10px 0;
}

<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
   <hr/>
</div>

Or with border (without <hr> ):

.container img {
  display: block;
}

.container {
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
}

<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
</div>

If you want to add content to the right side of the image you can use background: ...; combined with margin or padding :

.container h1 {
   margin: 0 0 0 30px;
}
.container {
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
    background: url(
http://culturalis.pt/wp-content/uploads/2015/06/curva.png) bottom left no-repeat;
}

<div class="container">
    <h1>Test</h1>
</div>

Example text to the right:

.container h1 {
  width: 100px;
  margin: 0;
  float: left;
}

.sub-container {
   float: left;
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
    display: inline-block;
}
.sub-container img {
  display: block;
}

<div class="container">
    <h1>Texto</h1>
    <div class="sub-container">
        <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png"alt="curva"/>
    </div>
</div>

I recommend studying the basics of CSS (like float and display ) recommend the following links:

link

link (Maujor from CSS in Portuguese :))