Have Geek Brain

Left and right indent text

I am using 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 be indented by 5 pixels, the right text will not. I tried -5px and only 5px, any ideas how I could do this?

thanks

+2


a source to share


3 answers


You can use margin-left

and instead margin-right

. Or padding-left

and padding-right

depending on the desired result / requirements.



+7


a source


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>
+5


a source


I'm not sure what text-indent

is what you are looking for. Just to clarify: the text-indent

first line of a paragraph will be indented. The padding is always on the left side as long as (text -) direction

is equal ltr

, otherwise, of course, on the right side. All following lines will start at the paragraph block boundaries.

If you want to "indent" from an entire block, you are looking for margin

either padding

.

Also, you are not giving the floating paragraphs a width, so they will adapt to their content, which could be the reason you don't see any padding.

Edit: example. Take a look at this in a browser. Then remove text-indent

to see what happens. As you will notice, it works the way it should, but not the way you expect it to. (Or, that is, if I figured out what you were going to do.)

<!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>
+2


a source






More articles:


All Articles