Skip to main content
G
gunzelguy
Inspiring
June 24, 2018
Answered

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

  • June 24, 2018
  • 1 reply
  • 3000 views

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)

<div id="arrivals">

<h3> New Arrivals</h3>

<p> <b>June 24 2018: blah blah blah </b>

</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;

}

    This topic has been closed for replies.
    Correct answer osgood_

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

    <!DOCTYPE>

    <html>

    <head>

    <meta charset="UTF-8" />

    <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>

    <div id="arrivals">

    <h3>Hello World</h3>

    </div>

    </body>

    </html>

    1 reply

    O
    osgood_
    Legend
    June 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.

    G
    gunzelguyAuthor
    Inspiring
    June 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!!!!!

    O
    osgood_Correct answer
    Legend
    June 24, 2018

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

    <!DOCTYPE>

    <html>

    <head>

    <meta charset="UTF-8" />

    <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>

    <div id="arrivals">

    <h3>Hello World</h3>

    </div>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices