Search code examples
htmlcsspositioningalignment

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

I've just added one small area on my website which looks like this:

img1

The problem is in the "About me:" section. I need to move text there to look like this:

img2

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/

Solution

  • 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>

    My answer to this question used the same technique; reading that might make it a bit clearer.