Responsive Webpage with absolute/relative positioning - html

Question

* {
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
div {
width: 100%;
}
p {
width: 90%;
height: 200%;
margin: 20px;
color: black;
padding: 10px;
}
#media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
position: relative;
border: 1px solid black;
margin: auto;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#heading {
position: absolute;
left: 358px;
top: 0;
background-color: #A52A2A;
width: 20.2%;
height: 12.2%;
text-align: center;
border: 1px solid black;
}
</style>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4">
<section id="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
</div>
I am trying to create a responsive webpapge:
I have 3 divs , I need each of them to have a heading at the top right corner. What I want to do is when I increase the width of the browser from 992px to full screen, the div size and position should change accordingly along with its headings.
I also need gaps between the divs, I have used relative and absolute positioning but that doesn't seem to work.
With my code, the heading doesnt resize when I change the browser width plus it also gets out of the div (see picture).
Please help!
P.s I have added heading on only the first div for checking purposes.

Answer 1

you have to set the parent div position to relative position:relative because the element with the absolute position always fallows the first parent that has the relative position
see your example here

Answer 2

You don't need to use position for the heading. You can use float. And one more thing you make the ID heading to class. Coz ID use for only unique identifier. SO make a class. Check your css section on media query I use for the gap .col-lg-4 { width: 32.33%; margin:5px; }
Just an instant answer for your question. Thanks, Any Question ask me in comment.
* {
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
p {
width: 90%;
margin: 20px;
color: black;
padding: 10px;
}
#media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
border: 1px solid black;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 32.33%;
margin:5px;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
.heading {
float:right;
background-color: #A52A2A;
width: 20.2%;
height: 12.2%;
text-align: center;
border: 1px solid black;
}
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
</div>

Answer 3

Ok, some points here about your header:
It's a header, so use <h1, h2, h3...> tags.
If it has absolute position, and you said to it to be 358px from left, it will be positioned exactly 358px from the left, so that is why is get out of the div.
To put the header on the right, I would use float: right instead.
Of course, adding floating to the header, you have to add floating to the text below.
If you use a width of 20%, it will not occupe the total (if you want the header to fit the entire parent's width, you have to use 100%.
Use media queries with #media (min-width: 992px) to make those changes you said to bigger resolutions.
Proposed solution
Inside media query, you only have to override those elements that you want to change (in your case, just the width).
The change we want is that when screen is bigger than 992px, the header's width be 100% so:
Here is the general CSS rule:
#heading {
background-color: #A52A2A;
border: 1px solid black;
float: right;
height: 12.2%;
position: relative;
text-align: center;
width: 20%;
}
And here we have an especific rule...
#media (min-width: 992px) {
#heading {
width: 100%;
}
}
Imagine you want to change also the background-color, all you have to do is to add the property inside the rule in the media query....