CODEWITHSUNDEEP
htmlcss
aaragon
aaragon

Reputation: 2400

mixing CSS formatting in a single line

How's the standard way to mix two different text formats using CSS style sheets? I am trying the following

<span 
class="cv-first">University of Illinois at Urbana-Champaign </span> <span 
class="cv-first-right">Aug. 26<sup>th</sup> 2010</span>

where in the style sheet I put:

.cv-first
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
}
.cv-first-right
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
    text-align:right;
    font-style: italic;
}

But this doesn't work.

UPDATE

So I found that if I replace

text-align:right;

by

float: right;

I get exactly what I was looking for. So now the second part is on the right of the page.

Upvotes: 0

Views: 260

Answers (2)

Jan Turoň
Jan Turoň

Reputation: 32912

SPAN is inline element : it is treated as part of the text aligned in block container

DIV is block element: it can be floated left or right, whereas its text contents is aligned

Inline elements have no width, therefore text-align has no sense. You may override this behavior by declaring it as block element and setting the width:

.cv-first-right {
  display: block; /* necesarry for applying width */
  width: 150px; /* default width is 100% */
  float: right; /* move the 150px to the right side */
  text-align: right; /* align text in those 150px right */
}

Upvotes: 1

Sarcadass
Sarcadass

Reputation: 364

Try this :

.cv-first, .cv-first-right
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
}
.cv-first-right
{
    text-align:right;
    font-style: italic;
}

Upvotes: 1

Related Questions