Moving Text Within a Div

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: auto;
            height: 500px;
            width: 500px;
            background-color: rgb(61, 127, 185);
            color: white
        }
    </style>
</head>
<body>
    <div>Eva got soaked today on her way to pre-school</div>
</body>
</html>
<!-- is there a way to move the existing text to the bottom of the div container such that the end of the sentence is up against the Right border of the div ? -->
2

I would suppose you need

text-align: right;
3

Excellent! Thank You - that helps but now how do I get the text to the bottom of the screen?

4

Maybe get rid of bottom margin or padding

5

You might want to try flexbox:

div {
    display:flex;
    justify-content:flex-end; // moves text over to the right
    align-items:flex-end; // moves text to the bottom
}

If you play around with those two properties justify-content and align-items, you can put your text in all four corners of the div. Or even center it horizontally or vertically.

6

OK - the Flexbox approach it is then. I have changed the code slightly by adding an h1 to my div to participate in the Flexbox (I am new to Flexbox so you’ll have to be patient with me) design and right off the bat, I have run into an issue. I can’t see my h1 - why not?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
    <style>
        div {
            margin-top: 80px;
            height: 500px;
            width: 500px;
            background-color: rgb(61, 127, 185);
            color: white;
            text-align: right;
            float:left;
            position: relative;
           
        }
        h1  {
            font-family: 'Redressed', cursive;
            color:rgb(14, 133, 212);
            position: absolute;
            margin-left: 0px;
            }
    </style>
</head>
<body>
    <div>
        <h1>Marin Horizons Pre-School</h1>
        Eva got soaked today on her way to pre-school
    </div>
    
</body>
</html>
<!-- font-family: 'Redressed', cursive;  -->
7

i checked your code, your h1 is there but its color has low contrast nearly invisible try to change it to white and check.

To move the text inside a div, try flexbox as @jsdisco mentioned on the parent element then play around with properties thus no need for float to avoid its headache

8

Thanks very much for your observation about the color of h1 being the problem. Yes, changing it to white was the answer - now I can see the h1 clearly. OK so now I will spend a couple of hours playing with flexbox.

9

glad to help anytime, good luck and happy coding journey :heart:

10

Getting your head around flexbox is really going to make your life easy, when it comes to positioning elements on a page. I always recommend this little game to practice: http://flexboxfroggy.com/

1 Like
11

Thanks so much for the link! That is one fabulous learning tool for Flexbox and I appreciate your pointing it out. I have been going through the levels of Flexbox Froggy and when I got to level 10 I think the program might be wrong. Here are my observations - tell me what you think -

level 10

first - reverse the frog order with flex-direction: row-reverse

now the color sequences of the lily pads and the frogs match so now we have to move the frogs to the L side of the container

we do this with justify-content: flex-start

which should work but doesn’t

to get the frogs over to the L side the program makes you use - justify-content: flex-end - I think that this is a mistake in the program - what do you think ?

12

It tells you on the page why it is flex-end and not flex-start.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

13

Aha! Yes - there it was telling me on the page all that time! OK - I got it now - nothing like this experience to really imprint it in your mind.

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.