display: inline-block not working - css

Question

I made display: inline-block working here. As you can see, checkbox and text were aligned horizontally.
But it does not work on this fiddle:
Actually I have three problems to solve here:
Make the checkbox and text: Swing Equipment Also inline with the checkbox.
In the right content, I have a button Swing System and I want it to be right aligned.
As you can see, I have left and right contents. They are mostly 50% of the width, I want them to be centered. Currently it is not.
Code snippet:
HTML
<li>
<input type="checkbox" class="swing_checkbox" id="swing_equipment" /> <span id="swing_label_small">Swing Equipment Also</span>
</li>
CSS:
#swing_label_small, #swing_equipment {
display: inline-block;
font-size: 0.8em;
}

Answer 1

Make the checkbox and text: Swing Equipment Also inline with the checkbox.
The checkbox has a width set to 90% by this css declaration...
input {
position: relative;
width: 90%;
}
change that to...
input[type=text] {
position: relative;
width: 90%;
}
In the right content, I have a button Swing System and I want it to be right aligned.
First thing I noticed is you are placing a button inside a ul...that will not validate as proper html. I would suggest you to move it out of the ul because is not semantically correct. But working with what you have...adding text-align:right to the ul and then adding text-align:right to the child li should work...
#right_content{
text-align:right;
}
ul#right_content > li {
border: 0px solid green;
margin: 0;
width: 100%;
position: relative;
text-align:left;
}
As you can see, I have left and right contents. They are mostly 50% of the width, I want them to be centered. Currently it is not.
I'm not too sure what you mean...please clarify so I can modify my answer

Answer 2

Here's the changes I made.
For 1) added CSS to checkbox as you make all input widht:90%;
input[type="checkbox"]{
width:auto;
}
For 2) added a div field for clear both purpose. Then make the button float right.
HTML:
<button type="button" class="swing_btn">Swing System</button>
<div class="clear"></div>
CSS:
.clear{ clear:both;}
#right_content > button
{
float:right;
}
3)As your are using ul as structure. there are padding that been use for ul.
Removed the inner ul padding that ruined the structure.
ul li ul {
padding:0px;
}
Gave table a margin to make it center:
.swing_grid, tr, td {
border: 1px solid gray;
border-collapse: collapse;
margin: 0 auto;
}
And finally let the content align center:
ul.content {
border: 0px solid gray;
box-sizing: border-box;
width: 49%;
position: relative;
list-style-type: none;
display: inline-block;
vertical-align: top;
text-align: center;
}
Here's my FIDDLE work.

Answer 3

1) For the checkbox and text issue: apply width: auto; to the checkbox:
.swing_checkbox {
width:auto;
}
The following was giving the checkbox a width of 90%, which is why the text was pushed down to the next line.
input {
position: relative;
width: 90%;
}
2) Something like this will work, I'm using inline styles here because I am lazy. Feel free to tidy that up yourself.
<ul class="content" id="right_content">
<li style="text-align: right;"> <button type="button" class="swing_btn">Swing System</button></li>
...
...
...
3) Use text-align:center; on the container, and then apply text-align:left; to it's inner elements. This will center block level elements with a percentage defined width. There are other ways to do this, however, if you're interested in researching them.
.swing_wrapper {
text-align: center;
}
ul.content,.swing_title, {
text-align: left;
}
4) You should also take a look at some debug tools such as Firebug, it makes debugging issues like this a lot easier with it's Inspection tool.