Clever Geek Handbook

How do I align the text correctly, but still leave it indented to the left?

I am running a small CSS issue. I want the double-aligned text to be right-aligned, but they must be designed on the same line. No matter how long the text on the first line grows, the "Small" text must follow and insert itself to the left with the long text. Both should be right-aligned though.

ACTUAL

enter image description here

EXPECTED

enter image description here

My js fiddle is here

<div>
    <div id="blocker">
        ABCD
    </div>
    <div id="wrapper">
        <p id="inner">
          <h3>A very very long text</h3>
          <h3>Small</h3>
        </p>
    </div>
</div>

#blocker{
    background-color: green;
    float: left;
    width: 30%;
    height: 100px;
}
#wrapper{
    text-align: right;
    background: grey;
    height: 100px;
}
#inner{
    text-align: left;
}
+3


source to share


4 answers


just make these changes to your css and html:

CSS

#inner{
    display: inline-block;
    float: right;
    text-align: left;
}


HTML:

<div id="inner">
      <h3>A very very long text</h3>
      <h3>Small</h3>
    </div>

Demo: http://jsfiddle.net/ykmupf1r/6/

+3


source


You need to put the containing div div in the text in the right section like below:

<div class="txt">
  <p id="inner"> </p>
  <h3>A very very long text</h3>
  <h3>Small</h3>
  <p></p>
</div>



And add styles like below;

.txt {
    float: right;
    text-align: left;
    width: auto;
}
0


source


There is no logical reason to put <h3>

inside a <p>

. It's as non-semantic as you can get. You should use tags to best match your content. If you don't have headings, don't use heading tags. Just never put a heading inside a paragraph.

Demo

CSS

#blocker{
    background-color: green;
    float: left;
    width: 30%;
    height: 100px;
}
#wrapper{
    background: grey;
    height: 100px;
}
#inner{
    float: right;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
}

Html

<div>
    <div id="blocker">
        ABCD
    </div>
    <div id="wrapper">
        <p id="inner">
          A very very long text
            <br/>
          Small
        </p>
    </div>
</div>
0


source


try this:

Html

<div>
    <div id="blocker">
        ABCD
    </div>
    <div id="wrapper">
        <p id="inner">
          <h3>A very very long text</h3>
          <h3>Small</h3>
        </p>
    </div>
</div>

CSS

#blocker{
    background-color: green;
    float: left;
    width: 30%;
    height: 100px;
}
#wrapper{
    text-align: right;
    background: grey;
    height: 100px;
}

#wrapper > h3{ text-align:left}

Also you can add a new div, say left edge

-1


source






More articles:


All Articles