Add div container between text using CSS and HTML - html

Question

I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}

Answer 1

With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}

Answer 2

Style it with this: .inline {display: inline}

Answer 3

Use inline tag i.e.
inline { display : inline}

Answer 4

Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}