Search code examples
htmlcssposition

How can I position two texts like in the image?


one h1 and one h2

I can't figure out a way to position this two elements.

Thank you in advance


Solution

  • How I would approach this is creating a div container to store the two pieces of text and setting the display of it to "inline-block". Assign a width to each of the h1 and h2 elements respectively to get the word wrapping you want and set the float value of h2 to "right". This should allow it to fit to the right of the bottom line of text in the h1 element. Here's some example code:

    <html>
        <head>
            <style>
                div{
                    display:inline-block;
                    width:280px;
                }
                #bigText{
                    font-size:64px;
                    width:250px;
                }
                #littleText{
                    font-size:24px;
                    width:120px;
                    float:right;
                }
            </style>
        </head>
        <body>
            <div>
                <span id='bigText'>
                    This is a very big text
                </span>
                <span id='littleText'>
                    and this is a smaller text
                </span>
            </div>
        </body>
    </html>