Displaying three elements inside a <div> in a same line - html

Question

This is the html code:
<div class="produto_title">
<h2 th:text="${produto.name}"></h2>
Baixar
Comprar <span th:text="${produto.preco}"></span>
</div>
Could anyone give me a hint how to place the three items inside .produto_title in a same line (h2 floating at left and the two a floating at right).
Also, h2 has a border around item and the a is displayed like a button; I want add a line behind crossing all the "line" formed by this three elements, like this:
jsfiddle: https://jsfiddle.net/klebermo/sf7a6fnj/5/
ps.: also, how let the content of tag <span> inside the button, like the text?

Answer 1

An hr is a block element that's essentially just a line with a border.
I'd recommend sticking one of those at the top of the container and giving it a negative margin that vertically centers it in the parent. position: absolute is more trouble than it's worth.
https://jsfiddle.net/JackHasaKeyboard/0juqg4j7/
As for aligning the elements to the left and the right, I'll let you figure that out. There's many ways to accomplish it, the simplest way being with float.

Answer 2

I would look at twitter's bootstrap, specifically the row and col components.
You could do
<div class="row">
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
</div>
This will all be displayed on the same line, splitting the row into equal thirds

Answer 3

btns{
height: auto; //Fix the span not being in the element
margin-top: 20px; //line everything up with the top of the heading element.
}
As for the line you can make a div and give it a absolute position (remember to give parent a relative position) and then position it accordingly.
.parent{
position: relative;
width: 100%;
}
.line{
height: 4px;
background-color: #000;
position: absolute;
z-index: -1;
top: 50%;
width: 100%;
}
This is a very bare-bones answer but it will be a start for you to go off.

Answer 4

For the first question, you can do that easily by manipulating margin or vertical-align properties. For example, if you put margin: 30px 5px; on your btn elements, it would be on the same line-ish.
Secondly, the <span> problem: if you set fixed width: 60px; of element (in your case .btn_comprar), text would either overflow from button to the right or bottom. Try setting width: 90px; or more on button elements, or height: auto; if you need it to be fixed.
Updated fiddle

Answer 5

First of all, you can't set a fixed width on a button if you want the text to not wrap. I recommend leaving the buttons at a width: auto and using padding to control the spacing around the text. I'd also bundle the styles for both button selectors, as they're exactly the same
Secondly, the only way (I know of) to get items to vertically align while they're float: right is by manually pushing them down, so I recommend making your buttons position: relative and setting a top: 25px;
/* Bundled both buttons together as they share the same styles */
.btn_free,
.btn_comprar {
float: right;
/* width: 60px; Removing this to allow the text to set the button width */
/* height: 20px; Removing this to let the line-height set the button height */
background: silver;
border-radius: 5px;
padding: 1px 15px;
box-shadow: 1px 1px 1px #000;
/* display: block; Removing this as floats are automatically display: block; */
/* text-align: center; Removing this since the text is already setting width */
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
position: relative; /* Pushing buttons down a bit */
top: 25px;
margin: 0 10px; /* Spacing buttons out */
}
.btn_free:hover,
.btn_comprar:hover{
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
Thirdly, remember to use a clearfix so the .produto_title container maintains height!
.produto_title:after {
content: "";
display: table;
clear: both;
}
Lastly, rather than using another div to make the line, I'd use the :before psuedo-element on .produto-title (can't use :after if you're also doing a clearfix).
.produto_title:before {
content: '';
height: 1px;
background: #000;
width: 100%;
position: absolute;
left: 0;
top: 50%;
display: block;
}
Here's a working demo:
https://jsfiddle.net/zcqLbg4h/1/