Marium Masood Marium Masood - 18 days ago 6
CSS Question

Responsive Webpage with absolute/relative positioning



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

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