CODEWITHSUNDEEP
htmlcss
JackWM
JackWM

Reputation: 10535

How to align one line of text without adding extra space between lines?

For example, I want the following format

             Nov/1 2013
This is a sunny day

            Nov/12 2013
A friend visits my home

                    ...

The date line is right aligned, while the content line is left aligned.

I tried <div>, it added extra space between the two lines.

Upvotes: 0

Views: 2479

Answers (4)

Kilian Stinson
Kilian Stinson

Reputation: 2394

See this JSFIDDLE

Is that what you're looking for?

HTML

<p class="paragraph">
    <span class="right-aligned">Nov 13</span>
    This is a sunny day
</p>

CSS

.paragraph {
    display: inline-block;
}

.right-aligned {
    display: block;
    text-align: right;
    width: 100%;
}

It is optional to define a width for the paragraph in this solution.

Upvotes: 3

radha
radha

Reputation: 782

try this one,

jsfiddle:http://jsfiddle.net/RaLwc/1/

  <div class="cont">
<span class="right">Nov/1 2013</span>
<span class="left">This is a sunny day</span>
<span class="right">Nov/12 2013</span>
<span class="left">A friend visits my home</span>
</div>




.cont
{
width:145px;
height:auto;
float:left;
}
.cont span
{
width:100%;
height:auto;
float:left;
}
.right{
text-align:right;
}
.left{
text-align:left;
}

Upvotes: 0

daker
daker

Reputation: 3540

http://jsfiddle.net/3YyPa/

this

<div id="box">
    <p class="text-right">Nov/1 2013</p>
    <p class="text-left">This is a sunny day</p>
    <div style="clear: both"></div>
</div>

and

#box{
  width: 150px;
  border: 1px solid;
}
.text-left{
  float: left;
}
.text-right{
  float: right;
}
p{
  margin:0;
  padding:0;
}

should do the trick!

Upvotes: 2

usefulcat
usefulcat

Reputation: 339

<div align="right">Nov/1 2013<br/>
This is a sunny day
</div>

Produces:

Nov/1 2013
This is a sunny day

Upvotes: -1

Related Questions