Question 171905 in Html Question posted in
Some basic documentation can be found here.

Is my empty elements overflowing in HTML and CSS grid?

I have a few elements in my page mostly empty but when i wrote a few lines of css i got some elements showing they are causing other elements to overflow. i used grid display on my wrapper, then position: fixed on my banner text liner. the others are just normal css codes i do.

i have disabled and done few re-wrtings but still can’t get it right.
read a few suggestions but seem not to be helpful to my specific issue. below is the html code and css.

html

    <div id="wrapper">
        <!-- Hold only four elements banner, header, article, footer -->
        <div class="banner-text">Welcome text</div>
        <header class="main-header">
            <h1>Header group</h1>
        <nav class="navigation">
            <ul class="navBar">
                <li class="list"><a href="#">Home</a></li>
                <li class="list">About Us</li>
                <li class="list">Know MP</li>
                <li class="list">Wa-East</li>
                <li class="list">Our Party</li>
                <li class="list">Activities</li>
                <li class="list">Contact Us</li>
            </ul>
        </nav>
        </header>
        <section class="mp"> <h1>MP Column</h1></section>
        <section class="jm"> <h1>JM Colum</h1></section>
        <section class="parliament"> <h1>Parliament</h1></section>
         <article class="main-article"> <h1>Header group</h1></article>
        <main> <h1>Header group</h1></main>
        <aside>Aside  <h1>Header group</h1></aside>
        <footer class="main-footer"> <h1>footer group</h1></footer>

    </div>

CSS

*{
    padding: 0;
    margin: 0;
}
body
{
    background: #fff;
    font-family: 'Poppins', sans-serif;
}
#wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, minmax(100px, auto));
}
.banner-text {
    grid-row: 1 / 2;
    grid-column: span 12;
    background: #262626;
    color: #ffffff;
    position: fixed;
    width: 100%;
    min-height: 100px;
    z-index: 999;
}
.main-header {
    grid-row: 2 / 3;
    grid-column: 1 / 13;
    background: #abb8c3;
}
section.mp {
    grid-row: 3;
    grid-column: span 4;
    background: #c0a16b;
}
section.jm {
    grid-row: 3;
    grid-column: span 4;
    background: #ff00cc;
}
section.parliament {
    grid-row: 3;
    grid-column: span 4;
    background: #aaa093;
}
.main-article {
    grid-row: span 2;
    grid-column: span 8;
    background: #cc6426;
}
main {
    grid-row: span 3;
    grid-column: span 8;
    background: #08b280;
}
aside {
    grid-row: 4 / 9;
    grid-column: 9 / 13;
    background: #eedd75;
}
.main-footer {
    grid-row: 9;
    grid-column: span 12;
    background: #000;
}
Tags:

2

Answers


  1. 0

    I believe the issue you are encountering is related to the position: fixed property that you have set for the .banner-text element. This causes the element to be removed from the normal document flow and it may lead to overlap or overflow issues.

    One possible fix is to remove the position: fixed from .banner-text and use other properties to achieve the desired effect. Alternatively, you can adjust other elements to avoid overlapping or overflowing issues.

    To help you fix the issue, try making the following changes in your CSS:

    1. Remove position: fixed from .banner-text.
    2. Adjust the grid-row values of the other elements to account for the .banner-text element.

    Here’s the modified version of your CSS:

    * {
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, minmax(100px, auto));
}

.banner-text {
  grid-row: 1 / 2;
  grid-column: span 12;
  background: #262626;
  color: #ffffff;
  width: 100%;
  min-height: 100px;
  z-index: 999;
}

.main-header {
  grid-row: 2 / 3;
  grid-column: 1 / 13;
  background: #abb8c3;
}

section.mp {
  grid-row: 3;
  grid-column: span 4;
  background: #c0a16b;
}

section.jm {
  grid-row: 3;
  grid-column: span 4;
  background: #ff00cc;
}

section.parliament {
  grid-row: 3;
  grid-column: span 4;
  background: #aaa093;
}

.main-article {
  grid-row: 4 / 6;
  grid-column: span 8;
  background: #cc6426;
}

main {
  grid-row: 6 / 9;
  grid-column: span 8;
  background: #08b280;
}

aside {
  grid-row: 4 / 9;
  grid-column: 9 / 13;
  background: #eedd75;
}

.main-footer {
  grid-row: 9;
  grid-column: span 12;
  background: #000;
}

    In this version, I removed position: fixed from .banner-text and updated grid-row values for .main-article and main. This should prevent overlap or overflow issues while maintaining your desired layout.

    Login or Signup to reply.
  2. 0

    It’s common to run into overflow issues when using CSS grid and/or position: fixed. You can try adding overflow: hidden; to the wrapper element to prevent any content from overflowing and causing layout issues. Another solution is to adjust the height of the elements that are causing overflow or their parent containers to ensure that they fit within the designated grid cells. You can also try adjusting the grid-template-rows property to allocate more space for the overflowing elements. Additionally, you can use the CSS property box-sizing: border-box; to make sure padding and borders are included in the specified width and height of each element.

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

#wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, minmax(100px, auto));
    overflow: hidden; /* Add overflow property to prevent content from overflowing */
}

.banner-text {
    grid-row: 1 / 2;
    grid-column: span 12;
    background: #262626;
    color: #ffffff;
    position: fixed;
    width: 100%;
    min-height: 100px;
    z-index: 999;
}

.main-header {
    grid-row: 2 / 3;
    grid-column: 1 / 13;
    background: #abb8c3;
}

section.mp {
    grid-row: 3;
    grid-column: span 4;
    background: #c0a16b;
}

section.jm {
    grid-row: 3;
    grid-column: span 4;
    background: #ff00cc;
}

section.parliament {
    grid-row: 3;
    grid-column: span 4;
    background: #aaa093;
}

.main-article {
    grid-row: span 2;
    grid-column: span 8;
    background: #cc6426;
}

main {
    grid-row: span 3;
    grid-column: span 8;
    background: #08b280;
}

aside {
    grid-row: 4 / 9;
    grid-column: 9 / 13;
    background: #eedd75;
}

.main-footer {
    grid-row: 9;
    grid-column: span 12;
    background: #000;
}
Here's an updated version of your CSS with the changes I suggested:
      <div id="wrapper">
        <!-- Hold only four elements banner, header, article, footer -->
        <div class="banner-text">Welcome text</div>
        <header class="main-header">
            <h1>Header group</h1>
        <nav class="navigation">
            <ul class="navBar">
                <li class="list"><a href="#">Home</a></li>
                <li class="list">About Us</li>
                <li class="list">Know MP</li>
                <li class="list">Wa-East</li>
                <li class="list">Our Party</li>
                <li class="list">Activities</li>
                <li class="list">Contact Us</li>
            </ul>
        </nav>
        </header>
        <section class="mp"> <h1>MP Column</h1></section>
        <section class="jm"> <h1>JM Colum</h1></section>
        <section class="parliament"> <h1>Parliament</h1></section>
         <article class="main-article"> <h1>Header group</h1></article>
        <main> <h1>Header group</h1></main>
        <aside>Aside  <h1>Header group</h1></aside>
        <footer class="main-footer"> <h1>footer group</h1></footer>

    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search