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


Tags: html,css,positioning,alignment

Problem :

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.


    CSS Howto..

    How to layer elements with CSS position property?

    How to wrap text to fill a DIV (like in MS-Excel) [duplicate]

    How to change column display order mobile/tablet view CSS Wordpress?

    How to append() an element and set its style with css() at the same time with jQuery

    How to underline the hyper-link spreaded on two lines. CSS-HTML geeks?

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    how you can change the style of the page without changing CSS files?

    How to align multiple images in “li” on center

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    How can I remove a bootstrap buttons hover effect?

    How to set parent div height to self adapt to the inner div height?

    How to separate a table cell into two equal parts with different background via css?

    How should I modify this code so it works with severel id's?

    How to remove unwanted whitespace css/html

    How to change font color of select2 control using css

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to get crossing CSS borders

    How to hide :before in overflow:hidden element

    How to get MathJax's HTML output just like Stackedit.io?

    How to make a CSS shape with rounded and straight edges?

    How to refer to children elements in CSS

    How to set background color with opacity by css?

    How to get css hover values on click?

    How to change custom icon image on hover of the link next to it?

    How to use more times css transform property?

    How to import CSS from node_modules in webpack angular2 app

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to make text input in table cell grow beyond the limits of the table when selected?

    How to target CSS module classes after they are hashed?