I am using the p tag to align text left and right on the same line using:
.left
{
float: left;
text-indent: 5px;
margin-top: 0px;
}
.right
{
float: right;
text-indent: 5px;
margin-top: 0px;
}
<div id="content">
<p class="left">Left Text </p>
<p class="right">Right Text </p>
</div>
The left text will indent by 5 pixels, the right text will not. I have tried -5px and just 5px, any ideas how I could do this?
Thanks
You can use margin-left and margin-right instead. Or padding-left and padding-right depending on your desired output/requirement.
I'm not sure text-indent is what your're looking for. Just to clarify: text-indent will indent the first row of the paragraph. Indentation is always on the left side, as long as (text-)direction is ltr, otherwise of course on the right side. All following rows will start at the boundaries of the paragraph block.
If you want to "indent" the whole block, you're looking for either margin or padding.
Also, you're not giving the floated paragraphs a width, so they will adapt to their contents, which might be the cause of you not seeing any indentation happening.
Edit: An example. Take a look at this in a browser. Then remove the text-indent to see what happens. As you will notice, it does work as it should, but not as you expect it to. (Or, that is, if I have understood what you're going after.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
.col {
border: 1px solid red;
display: inline;
float: left;
text-indent: 5px;
}
.col-left {
}
.col-right {
float: right;
}
</style>
</head>
<body>
<p class="col col-left">Lorem ipsum dolor sit amet</p>
<p class="col col-right">Lorem ipsum dolor sit amet</p>
</body>
</html>
This should work
<html>
<head>
<style type="text/css">
.left
{
float: left;
margin-left: 50px;
}
.right
{
float: right;
margin-right: 50px;
}
#content
{
}
</style>
</head>
<body>
<div id="content">
<div class="left">Left Text </div>
<div class="right">Right Text </div>
</div>
</body>
</html>