1

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/

Ilja
  • 44,142
  • 92
  • 275
  • 498

3 Answers3

1

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.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • I would really use div's or something different instead of tables. just for the sake of learning. I know how to use tables, but I'm challenging myself with small tasks to learn how to use css, therefore css with div's. – Ilja Nov 22 '11 at 18:02
  • 2
    It's not a set of data, it's precisely a list of definitions. There's nothing like tabular data, only a header and corresponding content. – MattiSG Nov 22 '11 at 18:16
  • @MattiSchneider-Ghibaudo: I think that still qualifies as a table. The simplest possible table, yes, and the content definitely doesn’t *require* a table, but I wouldn’t say it’s *nothing like* a table. – Paul D. Waite Nov 22 '11 at 18:18
  • 1
    @MattiSchneider-Ghibaudo, there are multiple ways of semantically marking up the same data. A `dl` is appropriate, so is a `table`, so is a `ul` so are some plain-old-`div`s. – zzzzBov Nov 22 '11 at 18:30
  • @PaulD.Waite: the same kind of reasoning might get you to say a `p`aragraph is the simplest possible `h`eading. Or that a `pre`formatted text with newlines is the simplest possible `li`st… zzzzBov: indeed, sometimes ambiguity can be encountered. I really don't think it's the case here. Just think about a screenreader reading such `table` vs how it would read a `dl`: "column 1 heading Name: Knaup; column 1 heading Country: Spain" / "Name: Knaup; Country: Spain"… There's no way you could extend the table with other columns. So it's not a table, it's a list of terms that assign a value to others. – MattiSG Nov 22 '11 at 23:44
  • @MattiSchneider-Ghibaudo, you're trying to use a slippery slope fallacy as an argument against having multiple ways of providing semantics. Which is another way of saying: your argument is fallacious because you're trying to invoke the idea of a slippery slope between multiple meanings and a blatant disregard of correct element usage. – zzzzBov Nov 23 '11 at 00:05
  • @MattiSchneider-Ghibaudo, see what I did there with that comment? see how it says the same thing in different ways? That's what I mean when I say there are multiple ways of semantically marking up data. The same general information can be transmitted in different, highly nuanced ways. A table is appropriate for this data because it fits in the template of having types of data (headings) and values of data (content). I never disagreed with the usage of a definition list, although a usage of `dl` would technically not be a list of definitions. – zzzzBov Nov 23 '11 at 00:08
  • 1
    @Matti: well, no. A paragraph isn’t a heading, because it doesn’t provide a title for a section of related content. A pre block with newlines isn’t a list, it’s just a pre block with newlines. The content that the OP has is a series of labels related to content. I think a table fits that (although it wouldn’t be my first choice). Would a screenreader not use the `scope="row"` attribute to read the table row-by-row instead of column-by-column? – Paul D. Waite Nov 23 '11 at 00:14
1

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.

brpyne
  • 996
  • 9
  • 14
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>

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

Community
  • 1
  • 1
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 1
    whats are 5em in px please ))) I never used ems before )) – Ilja Nov 22 '11 at 18:30
  • 1
    Ah yes: that’s actually `.5em` (notice the decimal point), and [its pixel size depends on the font size of the element it’s applied to](http://stackoverflow.com/questions/8211366/relative-padding-is-relative-to-what/8211457#8211457). You could use e.g. `5px` if you wanted to stick with pixels. – Paul D. Waite Nov 22 '11 at 18:44
  • In this case, i would suggest using a DIV, because you can insert more paragraphs inside of it later on. But yes, you need to add some html element and float it right. – Gui Premonsa Feb 01 '12 at 20:16
  • @GuilhermeSilva: sure, although [in HTML5 the block/inline nesting rules have sort of been relaxed](http://stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5). (Judging from that answer, it seems simpler just to stick to the old rules though.) There’s no need to float anything to the right to achieve the OP’s desired layout though. – Paul D. Waite Feb 01 '12 at 20:37