ansaurus

Question

How to hold three different text alignments in one CSS Box ?

Answer 1

+3 A:

You need to combine float:left and float:right elements and text-align css property

Full code at : http://jsbin.com/ilano3/3/edit

Gaby 2010-05-26 15:45:06

Nice one, tried it as well, but failed because I forgot to move the "center" element to *after* the "right" element. D'oh. The `text-align` on the floated elements is by the way unnecessary.

BalusC 2010-05-26 15:48:51

@BalusC, not if you put a `<br />` in the text in a column.. they would all get centered as inherited by the wrapping table..

Gaby 2010-05-26 15:54:17

Answer 2

+1 A:

<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>

Eric Mickelsen 2010-05-26 15:49:27

Answer 3

A:

Try something like this:

<style type="text/css" media="all">
    .row { border: 1px solid black; text-align: center; }
    .row > .left { float: left; }
    .row > .center { display: inline-block; }
    .row > .right { float: right; }

    /* after/inline-block (FF, IE5.5-7, S2, O9) */
    .row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
    .row { display: inline-block; }
    .row { display: block; }
</style>

<div class="row">
    <div class="left">Calendar (icon)</div>
    <div class="center">Link</div>
    <div class="right">Date</div>
</div>

The left and right divs are simply positioned with float and are contained within the float by the .row:after… CSS at the end. The center div will accept the row's text-align: center, since it's inline-block.

Note that the center piece is aligned based on the available space between the floats; multiple rows have have mis-aligned centers. Also, as it stands, too narrow of a width will cause the last piece (of left/center/right) to go to a new line; there may be a way to truncate it with overflow, but that depends on what you're going for.

Hope this helps!

Slippy Douglas 2010-05-26 15:54:40

with all humility, i do think this solution tends to make your markup look like a table, so why just not use a table?

corroded 2010-05-26 16:15:44

Good point; if one is using tabular data, it's logical to use a table.However, a similar div-based solution is useful for situations where a table would be wasteful (e.g. only one “row” needed) or if one is trying to adhere to the “tables are not for layout” philosophy (i.e. to retain the ability to re-layout based on stylesheet used).Regardless of where you stand on the tables vs. CSS debate, more options are never a bad thing, right? Plus, the question did say they're attempting to convert tables to CSS.

Slippy Douglas 2010-05-26 17:20:38

I just needeed to display the result of some .NET controls.Three visible things, but one of the controls is a 'loading.gif' image that appears when the link is used (the one in the middle of the box). And it moves my design for a bit. And I ve noticed how horrible is to design on visual studio .net , when I do code in php everything works as I want. But the VS has its own values and im overriding the hole thing. Not cool. But, yes, making this clear ..It is JUST ONE LINE ...not tabular data. It looks good on most browsers if I use tables. But I dont want to.

UXdesigner 2010-05-27 15:39:13

Take a look at the update #1 up there in the question.

UXdesigner 2010-05-27 15:43:29

Answer 4

+1 A:

You can use something like this, I think that it's the simplest approach:

<style>
    .wrapper {
        width: 600px;
    }

    .column {
        float: left;
        width: 200px;
    }

    .first {
        text-align: left;
    }

    .second{
        text-align: center;
    }

    .third{
        text-align: right;
    }
</style>

<div class="wrapper">
    <div class="column first">
        icon
    </div>

    <div class="column second">
        link
    </div>

    <div class="column third">
        date
    </div>
</div>

You can add CSS for .first, .second and .third to change their width, text alignment, color...

http://jsfiddle.net/T8JMM/2/

Adirael 2010-05-26 15:55:17

Answer 5

A:

If you really need your data/text in columns, you shouldn't shun tables. Tables are used for tabular data and if that's what your data is then just keep using them. The only bad thing about tables is when you use it for design. It looks to me that what you are trying to display is tabular data so just use 'em :)

To check if your data is bound to be shown in tables, answer the following questions:

Should the icon, link and date be on the same row ALWAYS?
Is the date on the right side bound to the link on the left side?

If your answer is yes to both questions, just use a table.

Otherwise, use lists. Separate the icon, link and date data into lists like this:

<ul class="icon-list column">
  <li>Calendar (icon)</li>
  <li>Calendar (icon)</li>
  <li>Calendar (icon)</li>
</ul>

<ul class="link-list column">
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

<ul class="date-list column">
  <li>Date</li>
  <li>Date</li>
  <li>Date</li>
</ul>

Then using css, just float them and add some width:

.column {
  float: left;
  width: 33%;
}

Don't forget to clear the floats! :)

corroded 2010-05-26 16:07:19

This is a very intelligent response, thanks.

UXdesigner 2010-05-27 15:36:22

ansaurus

tags:

views:

answers:

How to hold three different text alignments in one CSS Box ?

related questions