Highlighted

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

Explorer ,
Jun 24, 2018

Copy link to clipboard

Copied

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;

}

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>

Views

635

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Jun 24, 2018

Copy link to clipboard

Copied

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;

}

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>

Views

636

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 24, 2018 0
LEGEND ,
Jun 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2018 0
Explorer ,
Jun 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2018 0
LEGEND ,
Jun 24, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2018 0
Explorer ,
Jun 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2018 0
LEGEND ,
Jun 25, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8" />

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

<div id="arrivals">

<h3>Hello World</h3>

<div class="content">

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

<p>Lorem</p>

</div>

<!-- end content -->

</div>

<!-- end arrivals-->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2018 2
Explorer ,
Jul 02, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2018 0