CSS positioning of a text and underline

Question

I'm trying to achieve the following effect, but I have some trouble positioning the text and making the underline go to end of the screen.

 .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1.5px solid currentColor; line-height: 0.7; position: absolute; top: 210px; } .header p { margin-top: 40px; color: white; } 

 <div class="header"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> 

This is what I'm trying to achieve

Answer 1

Try something like this, using float and clear. Adjust the size of the 400px as you prefer. Perhaps this way (float) is not the best way and using solely margins may be preferred, but try to avoid using position: absolute or elements can overlap quickly.

 .header { height: 550px; width: 100%; background-color: #1F2041; text-align: right; } .header * { float: right; clear: right; width: 400px; text-align: left; color: white; margin: 0 0 20px; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; border-bottom: 1.5px solid currentColor; } 

 <div class="header"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> 

Answer 2

Maybe you need something like that? With an absolute div you can change his position inside the parent relative div.

You set a static height, so approximately with a 150px top and bottom as margin you got what you need

Remember that when use position:absolute; it is relative to the parent div with a position:relative

 .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } .content-div{ position:absolute; margin: 150px 0 150px auto; width: 250px; right: 0; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1.5px solid currentColor; line-height: 0.7; } .header p { margin-top: 40px; color: white; } 

 <div class="header"> <div class="content-div"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> </div>