How do I put a text element below a absolute div?

Question

(edited) My body's width is 1080px, but I'm trying to make a div that takes 100% width of the viewport which is larger than the body's width, for doing that I must use position: absolute; on it. But now I'm trying to put a line of text below that absolute div, but whatever I do it just will keep going above it, I've tried many ways but I couldn't fix it, please help. Here is my code:

body { width: 1080px; } .div { background: #f5f5f4; position: absolute; left: 0; right: 0; margin: 50px 0; height: 500px; } .text { display: block; margin: 20px; width: 100%; text-align: center; font-size: 0.8rem; color: #666; }

<div class="div"></div> <p>text</p>

Thanks in advance.

yes that will be at the top keep that in different div and make that to absolute and then keep one div inside where you will apply the same property and but not absolute and then keep paragraph there — Sourabh Somani
– Sourabh Somani, Commented Mar 13, 2020 at 7:20
Why would you need position: absolute; for making a div that is full width with another background color? By using this you are fixing the position of your div element. Remove that line and it will work correctly. — Anish Arya
– Anish Arya, Commented Mar 13, 2020 at 7:23

Toby56 · Accepted Answer · 2020-03-13 07:47:28Z

(EDITED) Actually I think I know what you mean now, do you want the width to be width: 100vw (100 of the viewports' width) and make the body overflow-x: visible if you want the div to be larger than the body width

body { width: 1080px; overflow-x: visible } .div { background: #f5f5f4; position: relative; margin: 50px 0; height: 500px; width: 100vw; } .text { display: block; margin: 20px; width: 100%; text-align: center; font-size: 0.8rem; color: #666; }

<div class="div"></div> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

Happy coding!

Thank you for answering but this will makes the div have a only 1080p width, I want the width of that div be full page from left to right. Maybe it's because I didn't described well so you've missunderstand, and if so I apologize for that.
Toby: Yes I have, but that wouldn't make the div's width go beyond body's width. Thanks for the comment!
Actually I think I know what you mean now, do you want the width to be width: 100vw (100 of the viewports' width) and make the body overflow-x: visible if you want the div to be larger than the body width.
I edited my answer with that solution! Click "full page" to see it work!
Yes that's exactly what I meant! Sorry for I couldn't describe it better because I'm new to coding. I added these two lines to my code, I saw there is still some white space in the left of the viewport, do I need to add any other codes to make them invisible? Thanks again!

GaganSailor · Accepted Answer · 2020-03-13 07:20:14Z

1

body { width: 1080px; } .div { background: #f5f5f4; position: relative; left: 0; right: 0; margin: 50px 0; height: 500px; } .text { display: block; margin: 20px; width: 100%; text-align: center; font-size: 0.8rem; color: #666; }

<div class="div"></div> <p>text</p>

answered Mar 13, 2020 at 7:20

GaganSailor

1,0733 gold badges11 silver badges20 bronze badges

2 Comments

LaurenceY Over a year ago

Thank you for answering but this will makes the div have a only 1080p width, I want the width of that div be full page from left to right. Maybe it's because I didn't described well so you've missunderstand, and if so I apologize for that.

GaganSailor Over a year ago

You can use width:100% for div.

kosta.dani · Accepted Answer · 2020-03-13 07:18:16Z

On the text class add the following css

 position: relative; top: 600px;

or you want something else?

Collectives™ on Stack Overflow

How do I put a text element below a absolute div?

3 Answers 3

8 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Related