Css align div one line [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I trying to align this code
to get something like
how to write right syntax, to do right peace of code showing in picture, align to look like in picture?

Answer 1

Here's an updated Fiddle that gets you a little closer to what you need. So what did I do?
First, your HTML needs a lot of cleaning up. I did a small amount, but I would suggest that you spend some time going through it, indenting things correctly, and breaking it into logical sections.
For the right hand side, I broke each row into its own div to logically separate them. This makes it easier to style consistently.
The controls in each row were given fixed pixel widths to help with alignment. A bit of a hack, but in this case it works.
#starikovs suggests using Flexbox, which is something you should research further. I would also suggest you spend some time learning about how to structure your HTML cleanly first. The fiddle I linked to here is only a quick cleanup!
Edit
In the interests of keeping everything in one place, I've copied the code here:
HTML
<form id=fbid26588961 name=fbid26588961>
<div class="full-info_auction-operations">
<div class="full-info_auction-buy">
<div class="auction-value">
BuyNow
<span>5394 €</span>
</div>
<input disabled id=buynow1 onclick="newcmd('cmd.asp?op=buynow&carid=26588961');" type=button value="BuyNow">
</div>
<div class="full-info_auction-raise">
<div class="auction-value">
Current Price
<span>900 €</span>
</div>
<input type=button style="font-size:10px;" value="+100" onclick="pliusZZ(100);">
<input type=button style="font-size:10px;" value="+200" onclick="pliusZZ(200);">
<input type=button style="font-size:10px;" value="+500" onclick="pliusZZ(500);">
</div>
<div class="full-info_auction-confirm">
<div class="auction-value">
Your Bid
<div class="ctrl_row">
<input placeholder="1000 €" class="robot i12" id=sumbid26588961>
<input type=checkbox onclick="fbid26588961.pbtn.disabled=!this.checked;" >
<input disabled name=pbtn onclick="placebid26588961();" type=button class="confirm-button" value="Confirm" />
</div>
<label class="confirm-raise">
<input placeholder="for bot" class="robot confirm-modify i12" />
<input class="checkbox-controller" type="checkbox" name="country" onclick="fbid26588961.rbtn.disabled=!this.checked;if(!this.checked){disablerobot26588961();}" />
<input onclick="enablerobot26588961();" name=rbtn type=button disabled value="Enable robot">
<div class="checkbox"></div><span><div style="color:red">Robot disabled</div></span>
</label>
</div>
</div>
</div>
<div class="clear"></div>
</form>
CSS
/* ORIGINAL CSS */
input[type="button"] {background: #5267ff; border-radius: 3px; border: none; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; padding: 10px 14px; text-transform: uppercase;color:inherit;}
input[type="button"]:hover {background: #4758d2;}
.full-info_auction-operations {margin: 0 40px 0 85px; padding-top: 17px;}
.full-info_auction-operations input[type="button"] {display: inline-block; /*vertical-align: bottom;*/}
.full-info_auction-buy {max-width: 235px; display: inline-block; margin-right: 5px; padding: 5px 0 10px;}
.full-info_auction-operations.auction-value {font-family: 'Open Sans', sans-serif; font-size: 12px; color: #b1b1b1; display: inline-block; vertical-align: middle; text-align: left; line-height: 20px;margin: 0px 7px 0 0;}
.full-info_auction-operations.auction-value span {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: #000; display: block;}
.full-info_auction-raise {max-width: 265px; display: inline-block; border-left: 1px solid #e7e7e8; border-right: 1px solid #e7e7e8; padding: 5px 10px 10px;}
//.full-info_auction-raise input[type="button"] {padding: 10px 11px 10px 10px; background: #000;}
.full-info_auction-confirm {max-width: 215px; display: inline-block; margin-left: 5px; padding: 5px 0 10px;}
.full-info_auction-confirm .auction-value {margin-right: 7px;}
.full-info_auction-operations > div {
vertical-align: top;
}
/* NEW CSS BELOW */
.auction-value { float: left; font-size: 80%; color: #888; margin-right: 5px; }
.auction-value span { display: block; color: #000; }
.full-info_auction-buy input[type='button'] { color: #fff; }
.full-info_auction-raise input[type='button'] { background: #000; color: #fff; }
.robot { width: 50px; }
.ctrl_row { margin-bottom: 5px; }
.ctrl_row input[type='button'],
.confirm-raise input[type='button'] { width: 120px; }
.confirm-modify { color: #fff; }

Answer 2

You only have to add vertical-align: top; than it should work.

Answer 3

There you go :
.full-info_auction-operations > div {
vertical-align: top;
}
This should do the job. #Mario Kurzweil answer was the good one, don't know why it's downvoted.

Answer 4

In my opinion this Fiddle comes to your desired layout very close. My added CSS is placed at the end (start is marked with a /* */ ).
CSS I've added
.auction-value {
display: inline-block;
vertical-align: top;
color: #CCC;
padding: 0 5px;
}
.auction-value > span {
display: block;
font-weight: bold;
color: #000;
}
.full-info_auction-confirm {
max-width: 420px;
}
.auction-value > input {
display: inline-block;
}
.bot-container {
margin-top: 5px;
}
.bot-container > label > * {
display: inline-block;
}
::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: black;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: black;
font-weight: bold;
}
:-ms-input-placeholder {
color: black;
font-weight: bold;
}

Answer 5

The new way of doing that is to use flexbox. Here's an example:
HTML:
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.wrapper {
display: flex;
}
That's all the styles you need.
BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox