How to display elements inside a section in html within the section in the webpage?

Question

I have some elements within a section in a webpage. Here's my code. You just need to look at the section with id="recent-blog-article". I am including more code because it might help people understand. In the CSS, the relevant portion is below the /* Relevant Section */ comment.

#welcome-heading {
    position: absolute;
    top: 158px;
    width: 100%;
    padding-bottom: 10px;
}

#introduction-heading {
    position: absolute;
    top: 198px;
    width: 100%;
    padding-bottom: 10px;
}

#wondering-heading {
    position: absolute;
    top: 230px;
    width: 100%;
}

#headings-section a {
    color: #FF0000;
    text-decoration: none;
}


/* Next Area */
#content {
    position: absolute;
    left: 135px;
    top: 317px;
    width: 1080px;
    height: 876px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 60px;
    grid-column-gap: 60px;
    grid-template-areas: "content-a content-b content-c"
                         "content-d content-e content-f";
    margin-bottom: 74px;
}

#content-a {
    grid-area: content-a;
}

#content-b {
    grid-area: content-b;
}

#content-c {
    grid-area: content-c;
}

#content-d {
    grid-area: content-d;
}

#content-e {
    grid-area: content-e;
}

#content-f {
    grid-area: content-f;
}

#content {
    text-align: center;
}

#content img {
    margin-bottom: 33px;
    width: 320px;
    height: 240px;
}

#content h4 {
    margin-bottom: 20px;
}

.content-title-anchor {
    font-size: 18px;
    line-height: 18px;
    color: #333333;
}

.button-anchor {
    font-size: 16px;
    line-height: 27px;
    color: #FFFFFF;
    background-color: #FF5A43;
    padding: 10px 25px;
    border-radius: 4px;
}

/* Next Area */
/* Relevant Section */
#recent-blog-article {
    position: absolute;
    top: 1273px;
    width: 100%;
    height: 836px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #F4F8FA;
}

#recent-blog-article h1 {
    position: absolute;
    left: 135px;
    top: 1353px;
    font-size: 30px;
    line-height: 30px;
    text-align: left;
    color: #333333;
}

#view-blog-anchor {
    position: absolute;
    left: 135px;
    top: 1395px;
    font-size: 16px;
    line-height: 27px;
    text-align: left;
    color: #E74225;
}

#recent-blog-article img {
    position: absolute;
    display: block;
    margin: 0 calc((100% - 1048px) / 2);
    top: 1480px;
    width: 1048px;
    height: 405px;
}

#blog-article-link-anchor {
    position: absolute;
    left: 135px;
    top: 1910px;
    font-size: 26px;
    line-height: 26px;
    text-align: left;
    color: #333333;
}

#article-metadata, #article-metadata a {
    font-size: 14px;
    line-height: 24px;
    color: #666666;
}

#article-metadata {
    position: absolute;
    left: 135px;
    top: 1951px;
    text-align: left;
}

#blog-article-introduction {
    position: absolute;
    left: 135px;
    top: 1994px;
    font-size: 16px;
    line-height: 27px;
    text-align: left;
    color: #666666;
}


    
        Welcome to Icon Utopia!
        Everything about iconography and building your career as a designer.
        👇Wondering where to start?👇
    
    
        
            
            Build Your Dribbble Audience
            A Comprehensive Guide to Building your Dribbble following.
            Get a FREE Chapter!
        
        
            
            Free Icon Design Guide
            Everything you need to know about icon design to get started.
            Learn Icon Design
        
        
            
            Pixel Perfect Course
            Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!
            Check out the Course
        
        
            
            Space Noise Brushes
            Procreate brushes that give your drawings fantastic textures
            Get Noise Brushes
        
        
            
            Free Icons
            Best FREE vector icons and icon sets for personal and commercial use
            Get Free Icons
        
        
            
            Icon Utopia Blog
            Blog about making a steady income and building a career as an icon designer.
            Check out the Blog
        
    
    
        Recent Blog Article:
        View Blog >
        
        Best Icons of the Month! (April 2020)
        by Justas | May 2, 2020 | Inspirations
        As I do every month, I collected the best icons to give you this essential pinch of inspiration and keep the fire inside of you burning. Take a peak into these different styles and unique approaches towards icon design! It’s always a great pleasure to discover them. I’m pretty sure that you will find some fantastic icon designers and icon sets amongst the ones I selected for you this time.

Here's the output. I've zoomed out.

As you can see, the section itself is completely empty, while the content I want to go inside of it is below it. I've checked the positions of the elements (using a chrome extension) that should be inside the section, and their top is larger than what I have specified in the CSS. I have tried different variations of position and other properties, but nothing seems to work.

michaelT · Accepted Answer

The most elements inside your

have position: absolute; in combination with top and left properties which is deadly for your style. For instance the css for your

.

position: absolute;
left: 135px;
top: 1353px;

This means that the headline is positioned absolute inside its parent and it has a gap of 1353px to the top of its parent. So top: 0 would mean that the headline begins just inside its parent section (I guess that is what you want). So because of the things mentioned above, the section's children have all a big gap to its parent, that's because they aren't displayed inside.

I would recommend to remove your position: absolute properties for allmost all elements inside your section, replace them by relative (it depends, where a child exactly should be positioned). Also I recommend to use a flexbox (display: flex;) which makes the positioning easier. For spacing you can use margin and padding properties.

.section-2{
    position: absolute;
    top: 200px;
    width: 100%;
    min-height: 64px;
    background: red;
    color: #000;
}
.section-2 h1{
    position: absolute;
    top: 100px;
    left: 50px;
}

.section-2 span{
    position: absolute;
    top: 50px;
    left: 50px;
}

.section-1{
    position: absolute;
    width: 100%;
    min-height: 64px;
    background: green;
    color: #fff;
}
.section-1 h1{
    position: relative;
    display: block;
    padding: 16px;
}

.section-1 span{
    position: relative;;
    margin-top: 60px;
}


   RELATIVE POSITIONED 
   RELATIVE POSITIONED TEXT



   ABSOLUTE POSITIONED
   ABSOLUTE POSITIONED TEXT

How to display elements inside a section in html within the section in the webpage?

Answers (2)

Related Questions