Stretching H1 in Flexbox?

Hello. Still trying to learn Flexbox.

In my original sample I had a mast consisting of a top row that was a Flex item and then a top menu below it that was also a Flex item. The menu stretched across the width of the viewport. (I’m not sure if I understand why.)

So now I need to create a new mast but that just has the top row with an H1, and I want to add a bottom border on it and make it also stretch across the viewport. (Think of it as a simplified mast.)

Well, I cannot figure out how to get my H1 to stretch across the viewport.

Below is some sample code, and I left in the top menu to show you what I did in the previous version, but in this version, that will go away.

I’m sure there is something dumb I’m missing! :wonky:

<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_stretch-h1.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      min-width: 840px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mast{
      padding: 5px 0 0 0;
    }
    
    #mastTopRow{
      display: flex;
      align-items: baseline;
      padding: 0 0 5px 0;
      line-height: 1.4;
    }
    
    #mastTopRow h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      border-bottom: 2px solid #000;            /* NEED TO STRETCH FULL-WIDTH */
    }

    .topMenu{
      width: auto;
      display: flex;
      list-style: none;
    }

    .topMenu li{
      padding: 0.5em 1em 0.4em 1em;
    }
    
    .menuAqua{
      background-color: #48D1CC;                /* Medium Turquoise */
    }

    .menuAqua_Current{
      background-color: #008B8B;                /* Dark Cyan */
    }
    
    .topMenu li.menuLast{
      margin-left: auto;
      padding: 0.5em 1.7em 0.4em 1.7em;
      background-color: #FFD700;                /* Gold */
    }
    
    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
      background-color: #EEE;
    }
    
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageInner">
      
      <div id="mast">
        <div id="mastTopRow">
          <h1>My Company</h1>
        </div>
        
        <ul class="topMenu menuAqua">
          <li class="menuAqua_Current">Home</li>
          <li>News</li>
          <li>Articles</li>
          <li>How-To</li>
          <li>Gallery</li>
          <li class="menuLast">Store</li>
        </ul>
      
      <div id="pageBody">
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

P.S. The wrapper and inner classes need to stay because that is how my website is set up - like it or not?!

Thanks.

Think of the h1 as a Russian doll inside a Russian doll inside a Russian doll inside a Russian doll which is why the h1 does not stretch across the viewport.

Try adding background colours or borders to the parent divs to get an idea of what is happening.

1 Like

Remove the display:flex from #mastTopRow as you only have one child item so there is no need for a flexbox.

#mastTopRow{
     /* display: flex;
      align-items: baseline;*/
      padding: 0 0 5px 0;
      line-height: 1.4;
    }

The mastTopRow div is superfluos anyway and you could just style the h1.

     #mast h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      border-bottom: 2px solid #000;
      margin:0 0 5px;
    }

HTML:

      <div id="mast">
        <h1>My Company</h1>
        <ul class="topMenu menuAqua">

Unfortunately I have no internet so can’t get drawn into any long discussions as it’s too hard to do this on a mobile. The above code should do what you want though.

2 Likes

Okay, I was just trying to follow the structure I have for ages with a menu.

Yeah, I had it to help me organize things on pages with a mast with a top row and top menu.

Did you forget to pay your Internet provider? :lol:

Thanks for the help! I knew it was something simple!

:+1:

1 Like

Yeah, @John_Betong, even with @PaulOB’s help, it took me quite sme time to get things sorted out.

My HTML/CSS are very legacy and a real mess to be honest. But I just have to struggle through things for now, and after I go live then I am going to re-write everything!

This is a typical developement page with TLA Debugging scripts which can be in a separate CSS style sheet and linked when required. The TLAs could be modified by prefixing with DG_TLA to make it easier to find and delete on the production page.

I have added:

  1. TLAs to the CSS
  2. TLAs to the DIV’s:
  3. fixed footer with following links
  4. HTML validation link
  5. CSS validation links
<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_stretch-h1.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      min-width: 840px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mast{
      padding: 5px 0 0 0;
    }
    
    #mastTopRow{
      display: flex;
      align-items: baseline;
      padding: 0 0 5px 0;
      line-height: 1.4;
    }
    
    #mastTopRow h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      border-bottom: 2px solid #000;            /* NEED TO STRETCH FULL-WIDTH */
    }

    .topMenu{
      width: auto;
      display: flex;
      list-style: none;
    }

    .topMenu li{
      padding: 0.5em 1em 0.4em 1em;
    }
    
    .menuAqua{
      background-color: #48D1CC;                /* Medium Turquoise */
    }

    .menuAqua_Current{
      background-color: #008B8B;                /* Dark Cyan */
    }
    
    .topMenu li.menuLast{
      margin-left: auto;
      padding: 0.5em 1.7em 0.4em 1.7em;
      background-color: #FFD700;                /* Gold */
    }
    
    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
      background-color: #EEE;
    }

    /* TLAs - REMOVE WHEN FINISHED */ 
    .BGA {background-color: aqua;}
    .BGL {background-color: lime;}
    .BGR {background-color: red;}
    .BGS {background-color: snow;}
    .BGY {background-color: #ff0;}

    /* FOOTER */
    .FLL {float: left;}
    .FLR {float: right;}
    .POF {position: fixed;}
    .BOB {bottom: 0; left: 0;}
    .W99 {width: 100%;}
    .Z02 {z-index: 2;}
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper" class="BGR">
    
    <div id="pageInner" class="BGA">
      
      <div id="mast" class="bgl">
        <div id="mastTopRow" class="BGY">
          <h1>My Company</h1>
        </div>
        
        <ul class="topMenu menuAqua BGR">
          <li class="menuAqua_Current">Home</li>
          <li>News</li>
          <li>Articles</li>
          <li>How-To</li>
          <li>Gallery</li>
          <li class="menuLast">Store</li>
        </ul>
      
        <div id="pageBody" class="BGS">
          Yes we have no pageBody

          <div class="POF BOB W99 BGY Z02">
            <a class="FLL" 
                href="https://validator.w3.org/">
                  HTML VALIDATE 
            </a> 
            <a  class="FLR" 
                href="https://jigsaw.w3.org/css-validator/">
                  CSS VALIDATE 
            </a> 
          </div>  
        </div>
      </div>
    </div>

  </div>

</body>
</html>

Screen dump:

@John_Betong,

Thanks for the reply. I was able to get things working with POB’s comments above.

Did you add something new? (It looks like the H1 has the same issue from my OP.)

I find it easier to use the debugging colours because they can be easily toggled to show how the layout is affected.

The idea was to highlight the sections in the page.

Once the script is working to your satisfaction then the debugging script can be removed.

Yes, very colorful example - just like you! :wink:

Sometimes I do that, although I usually rely on Firefox’s Dev Tools to do the same/similar thing.

Yeah, I got to working this morning after reading POB’s suggestion - guess I forgot to post that here.