CSS - Why can't I inline everything? - css

Question

Here is the jsfiddle link please do take a look
http://jsfiddle.net/o9rf3thy/
There seems to be a problem with the html.
CSS
.taro{
display: inline;
margin-left: 200px;
}
I am still learning CSS so please do be patient with me.
I am trying to obtain this result
https://www.dropbox.com/s/lq80rkc4w5fqpki/Screenshot%202014-11-21%2017.36.51.png?dl=0

Answer 1

Items that have display:inline either by default or by setting are not affected by margins.
What I think you require is display:inline-block
JSfiddle Demo
This might be useful LearnLayout.com

Answer 2

Hope this is what you want http://jsfiddle.net/89f5o3jL/2/
CSS
.list-group {
list-style-type: none;
margin: 0;
padding: 0;
}
.list-group-item {
overflow: auto;
padding-top: 15px;
}
.img-circle {
float: left;
margin-right: 20px;
border-radius: 30px;
}
.info {
float: left;
width: 500px;
border-bottom: #ccc 1px solid;
padding: 0 0 15px 0;
}
.label {
background: #5390fc;
color: #fff;
border-radius: 4px;
display: inline-block;
padding: 2px 7px;
margin: 10px 0;
}
HTML
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/60-60" width="60" height="60" class="img-circle">
<div class="info">
<strong>
Crondeau Viner, MD
<span>Nov 5th , 2014</span>
</strong>
<br />
<span class="label">Note</span>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p>
</div>
</li>
</ul>

Answer 3

Your html contains several invalid tags:
you should use a self closing tag for img i.e. end it with /> instead of >
you should use <br /> instead of <br>
I would also consider changing the nesting of your tags so the spans don't contain br tags as it makes it easier to follow and style correctly.
Finally, if you want to make all the text display to the right of the image change display: inline to display: inline-block (jsfiddle)
<ul class="list-group">
<li class="list-group-item">
<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle" />
<p class="taro">
<strong>
<b>Crondeau Viner, MD</b>
<label>
Nov 5th , 2014
</label>
</strong>
<br />Note
<br />
<span>hello Dr Jacqueline test - nov 5 </span>
<br />
</p>
</li>
</ul>
And your CSS would become
.taro{
display: inline-block;
margin-left: 200px;
}