<h3> inside a <div> is aligning to page, not to the <div>

Report · Jun 24, 2018

Hello everyone, quite a while since I was here. Hope everyone has been well.

I hope I can explain this properly. I want a div element in the middle of a page that has overflow:scroll; It all works fine but I also want a <h3> positioned: absolute at the top of the box. How do I align the <h3> with this box? At the moment it goes to the top of the page even though the <h3> in inside the <div>

Basically I want the position to relate to the div element, NOT to the page. (I'm a html/css learner)

<h3> New Arrivals</h3>

</p>

</div>

#arrivals {

position: absolute; left: 412px; top: 200px;

height: 400px;

width: 300px;

background-color: #ff9933;

border: solid-black;

overflow: scroll;

padding: 10px;

box-shadow:5px 5px 5px #777777;

}

Report · Jun 24, 2018

Do you have any css positioning on the h3?

Theres nothing in the code you posted to suggest the h3 will jump out of the div

Your choice of wording suggests you may have postioned your h3 absolutely which will have the result of it jumping out of the box. Give your div a position of relative if that is the case.

Report · Jun 24, 2018

After reading your reply I realised that the code I posted was AFTER I'd put back "new arrivals to where it is supposed to be. The code that I should have posted is:

#arrivals {

position: fixed; left: 412px; top: 200px;

height: 400px;

width: 300px;

background-color: #ff9933;

border: solid-black;

overflow: scroll;

padding: 10px;

box-shadow:5px 5px 5px #777777;

}

h3 {

position: fixed;

top: 0px;

left: 500px;

width: 100%;

background-color: #efefef;

}

So I want the <h3> css to apply to the #arrivals Div id (if that makes sense) With the code I just posted the h3 jumps to the top of the page, far away from where it is supposed to be.

I gave the <h3> a "relative but it disappeared into the box where it is supposed to be but now I have to scroll right to see it..... HELP!!!!!

Report · Jun 24, 2018

Why doesnt the below work for you? Is there something else you require the code to do?

<!DOCTYPE>

<html>

<head>

<title>Document</title>

<style>

#arrivals {

position: relative;

left: 412px;

top: 200px;

height: 400px;

width: 300px;

background-color: #ff9933;

border: 1px solid #000;

overflow-y: scroll;

padding: 10px;

box-shadow: 5px 5px 5px #777777;

}

h3 {

position: absolute;

top: 0;

left: 0;

margin: 0;

padding: 0;

width: 100%;

background-color: #efefef;

}

</style>

</head>

<body>

<h3>Hello World</h3>

</div>

</body>

</html>

Report · Jun 25, 2018

Thanks so much osgood, that works perfectly! Last question, can I get that <h3> to stay visible while the text is scrolled? (which is why I thought i needed a {position: fixed;}

Report · Jun 25, 2018

gunzelguy wrote
Last question, can I get that <h3> to stay visible while the text is scrolled? (which is why I thought i needed a {position: fixed;}

Sure, you just have to re-adjust the code a bit:, see example below:

<!DOCTYPE>

<html>

<head>

<title>Test Document</title>

<style>

#arrivals {

position: relative;

left: 412px;

top: 200px;

height: 400px;

width: 300px;

background-color: #ff9933;

border: 1px solid #000;

box-shadow: 5px 5px 5px #777777;

}

.content {

overflow-y: scroll;

height: 380px;

padding: 10px;

}

h3 {

position: absolute;

top: 0;

left: 0;

margin: 0;

padding: 0;

width: 100%;

background-color: #efefef;

}

</style>

</head>

<body>

<h3>Hello World</h3>

<p>Lorem</p>

</div>

</div>

</body>

</html>

Report · Jul 02, 2018

Thank you so much osgood, that works EXACTLY how I want it. I couldn't get it to work until I noticed that you defined content and now its perfect, thanks again!

<h3> inside a <div> is aligning to page, not to the <div>

1 Correct answer