How to align text in the following way using css / html? - html

Question

I've just added one small area on my website which looks like this:
The problem is in the "About me:" section. I need to move text there to look like this:
Can anyone suggest css / html align solution that would position text like in the second example?
Current HTML
<div id="profInfo">
<div id="profImage">
<img src="..." alt="user: ..."/>
</div>
<div id="profDetails">
<ul>
<li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
<li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
<li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
<li><b class="underb" style="color: #af1e83;">About me</b><b style="color: #af1e83;">:</b> Lorem ipsum dummy textum ...</li>
</ul>
</div>
</div>
Current CSS
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#profInfo {
width: 512px;
margin: 10px 4px 0 3px;
}
#profImage {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: 100px;
width: 100px;
padding: 1px;
float: left;
background: #535353;
border: 1px solid #272727;
-khtml--webkit-box-shadow: 0 1px 2px #d6d6d6;
-moz-box-shadow: 0 1px 2px #d6d6d6;
box-shadow: 0 1px 2px #d6d6d6;
}
#profDetails {
float: right;
width: 395px;
line-height: 22px;
}
#profDetails ul {
list-style: none;
font-size: 13px;
}
.underb {
text-decoration: underline;
}
#profImage img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Here is all code together http://jsfiddle.net/8ERvz/7/

Answer 1

You can use float:left (on the “About Me”) and overflow:hidden (on the rest of the text) to achieve the layout you want.
Here’s an implementation with <span> tags and style attributes, just to illustrate what’s going on:
<li>
<span style="float: left;">
<b class="underb" style="color: #af1e83;">About me</b>
<b style="color: #af1e83;">:</b>
</span>
<span style="display:block; overflow:hidden; padding-left:.5em;">
Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textumLorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum
</span>
</li>
http://jsfiddle.net/fpzkx/
My answer to this question used the same technique; reading that might make it a bit clearer.

Answer 2

As crazy as it sounds, you can use a table.
You've got a set of headers with a set of data. Sounds like a table to me.

Answer 3

Update HTML
<div id="profInfo">
<div id="profImage">
<img src="..." alt="user: ..."/>
</div>
<div id="profDetails">
<ul>
<li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
<li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
<li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
<li><div style="float:left; display:block;width:60px;"><b class="underb" style="color: #af1e83;">About me</b>: </div> <p style="display:block;width:300px;padding-left:60px;">Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ...<p></li>
</ul>
</div>
</div>
Of course it would be better to store these updates in your stylesheet as opposed to inline styles but this will show you what needs to be done.