Browser chopping off text

Hello. I have some strange behavior with the browser chopping off text above my top menu, and I’m not sure what is going on.

Specifically, the top of the company name is getting chopped off, and the menuLinks are acting strangely as well.

I have looked in Firefox’s Developer Tools, but I don’t see any styles that would be causing what appears to be a negative margin.

If I uncheck the following, then the company name scoots down, and the space between the bottom of the company name and the menu bar shrinks. (Also doing this causes the menuLinks to move upwards a bit.)

What is going on here?

Below is my code…

<!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></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.4em;
      font-size: 0.9em;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      min-width: 840px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #pageHeader{
      position: relative;
      top: 0;
      max-width: 100%;
    }
    
    #logo{
      position: relative;
      float: left;
      height: 1em;
      width: 5em;
    }

    #menuLinks{
      position: relative;
      float: left;
    }
    
    #topMenu{
      width: 1200px;
      clear: both;
      min-height: 0;
      list-style: none;
      background-color: #48D1CC;
    }
    
    #topMenu:after{
      content: "";
      clear: both;
      display: block;
      height: 0;
    }
/**/

    #topMenu li.menuCurrent{
      background-color: #008B8B;      /* Dark Cyan */
    }
    
    #topMenu li{
      position: relative;
      float: left;
      padding: 0.5em 1em;
      background-color: #48D1CC;      /* Medium Turquoise */
    }
    
    #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="pageHeader">
        <h1 id="logo">ACME</h1><div id="menuLinks">Some text here...</div>
        <ul id="topMenu">
          <li class="menuCurrent">Home</li>
          <li>News</li>
          <li>Articles</li>
          <li>How-To</li>
          <li>Gallery</li>
        </ul>        
      </div>
      
      <div id="pageBody">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

        <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

        <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

        <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

        <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

        <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

The problem is the line-height in em you have set on the body rules.

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      /*line-height: 1.4em;*/
      line-height: 1.4; /*unitless*/
      font-size: 0.9em;
    }

If you will set it as a unitless line height you won’t have these sort of conflicts.

Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value.

4 Likes

@Ray.H,

Thanks. I vaguely recall this concept from the past, but clearly forgot it!

Just so I am sure to understand this, why exactly was the company name getting chopped off?

Is it because there were hidden line-heights for my #pageWrapper, #pageInner and #pageHeader?

Also, while we are talking about this text above my top menu…

Why does it appear that the text is top aligned? (The top of the company name and the top of the menuLinks don’t exactly match up, but they basically appear to be top-aligned. )

The goal I am working towards is to have the company name, and my <div id="menuLinks"> be bottom-aligned and hug the top menu.

Also, I need to add one anchor that is styled like a button, so i want that to also be bottom-aligned so everything looks like it is sitting on top of my top menu, just with a small margin in between.

How can I accomplish that?

Hi UpstateLeafPeeper,

I saw your post, and I wanted to see what was going on, so I loaded this up in a web page. But, I don’t really see any text getting cut off. Can you explain or show a screenshot?
Here’s the web page that I created by copy-pasting your html code.

And here’s a screenshot of the result (Chrome, but FF looks similar):

Yes the text is literally right at the border of your the browser, but not truncated. I think?

@fullstackdev,

No, in FF it is definitely chopped off…

@Ray.H’s suggestion fixed that issue, but I was just hoping to better understand which element(s) were causing the issue.

Well but this is not the case for me. Here’s a screenshot of the page in Firefox. Looks fine to me:


You can view the page online using your Firefox browser - does it look the same for you, in your browser, as in my screeenshot, or different?

I just posted a screenshot of what I see in FF, so why are you asking again what I see?

Either way, moving forward, I just wanted to get a better understand of @Ray.H comments above about how having unites on the line-height can mess up things.

And asking yet again…

It wasn’t an element causing the issue - it was the line-height causing the issue. But it was noticeable on the h1 element.

When you provide a unit on the line height, then it limits the calculation scope to where it was defined. So in this case, it calculated out to 1.4 times the size of an m as defined at the body level. A h1 element by browser default, typically, is 2em and since 2em > 1.4em and fonts are displayed from the baseline, you get the chopped off effect at the top.

HOWEVER, when you remove the unit for the line-height, then the calculation becomes a cascading calculation based on the element itself.

So, let’s use easy math and say the body has a font-size of 10px. The h1 would then be 20px (2 times the base font size)

If you set the line height to 1.4em, then the line height is ALWAYS 14px. And since the h1 is 20px, there is not enough room to display the full text…

But if you set the line height to 1.4, then the line height on the body is 14px. But the line height is recalculated for the h1, making it 28px. Since 28px is larger than the 20px, you will see the full text without cropping.

6 Likes

Okay, so that si what I was asking.

The issue wasn’t with my contain classes, it was just that the BODY element got changed to 1.4em and you are saying that a default H1 is 2em, so the top of the H1 gets chopped off - which is what I was seeing. Correct?

Or to jump ahead with what you are saying…

When you have a line-height of 1.4em at the BODY level, then things become absolute - and thus create problems downstream - but when you have a “unitless” line-height of 1.4, then things are treated relatively and so there are nod ownstream issues, correct?

Right.

Okay, I think what you just said is what I was trying to summarize earlier, so I think I get it now.

1 Like

Hi Peeper,
I think I remember suggesting to you last year to start learning flexbox.
It has many built in alignment features that will help you. In this case you would use align-items:end; on the Logo and Link siblings. The rule would go on the parent, header.

I took the liberty to clean your template up a little bit. Some things to consider…

  • Start thinking mobile, responsive design. Git rid of min-width: 840px; on the wrapper
  • Don’t wipe out all your default margins and paddings with the universal reset.
    They are there to help your page be readable for the user. If you must remove margin/paddings completely do it on an element by element basis. You will find yourself needing to restate them anyway to make your page readable.
  • No need to set position:relative on every single div. Only use it when you NEED it. Divs are blocks by default, no need to tell the browser that.
  • Always allow space for text descenders in your headings and text. That is why the default line-heights are larger than the font size.
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
  <style media="screen">
    body{
      font-family: Helvetica, Arial, Sans-Serif;
    }
    #wrapper{
      max-width: 1200px;
      margin: 0 auto;
    }
    #header{
      display:flex;
      align-items:end;
      padding-top:10px;
      line-height:1.2;
    }
    #logo{
      margin:0;
    }
    #links{
      margin-left:50px;
    }
    #menu{
      display:flex;
      margin:0;
      padding:0;
      list-style: none;
      background-color: #48D1CC;
    }
    #menu li.menuCurrent{
      background-color: #008B8B;      /* Dark Cyan */
    }
    #menu li{
      padding: 0.5em 1em;
      background-color: #48D1CC;      /* Medium Turquoise */
    }
    #content{
      margin: 30px 0 0 0;
      background-color: #EEE;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1 id="logo">Text Descenders jejaguye</h1>
      <div id="links">Some text descenders here jejaguye...</div>
    </div>
    <ul id="menu">
      <li class="menuCurrent">Home</li>
      <li>News</li>
      <li>Articles</li>
      <li>How-To</li>
      <li>Gallery</li>
    </ul>
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

      <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

      <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

      <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

      <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

      <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>
    </div>
  </div>
</body>
</html>


4 Likes

Yes, I know. Unfortunately I had some family issues come up since back then, plus I am trying to finish my website as it is currently structured.

Implementing Flexbox right now would require me to re-code my entire website which wouldn’t make sense.

So like is often the case at work, I have to walk the fine line of “getting something out the door” and building a better system.

IF I can get this website done in the next month or two, THEN my top goal is to re-code everything with mobile in mind and using things like Flexbox.

Haven’t eaten all day and am ready to pass out, but will look at your code after I eat.

Am hoping that your suggestions won’t force me to redo everything.

Thanks in advance!!

@Ray.H,

I’m trying to look at your code while I cook supper.

One thing that jumps out is you removed #pageInner, which may be outdated, but my entire website uses that, so removing it breaks everything.

How can I keep the containers that I have in place, but maybe just tweak things?

I know it isn’t ideal, but it is what it is.

You can leave it in there. I removed it on that example because the page worked without it.

Well it sounds like you just want the Logo and links to be bottom aligned.
You can do that old school way by making them both inline-blocks instead of the floats your using now. Then you would be able to use vertical-align:bottom for alignment.

If I can leave that extra container in there, then I think things will be okay.

Bottom aligned, with the logo left aligned and the menuItems right aligned - which is why I used floats. (Float left/right)

And I would have to add a Height to the menuItems so it matched the height of my larger logo?

If I went that way, how would I align the company name/logo all the way to the left and the menuItems all the way to the right?

Will do a deeper dive on your code after I eat, but just trying to catch you while you’re still online.

Well if you could change the html and set your name/logo and menuitems in their own div then you could use display:table on the new parent div and display:table-cell on the child divs.

That way your topmenu would not become a table-cell too. See, all three elements are children of pageHeader currently.

So if you don’t change the html and leave all three elements as siblings you can make it work with inline-block.

It’s going to be kinda hacky because I’m going to chain the tags together so I can set widths without a whitespace node interfering with it.

vertical-align:baseline; is the default so I didn’t bother setting it in the rules.

Like so…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
    #pageHeader{
      max-width: 100%;
    }

    #logo{
      display:inline-block;
      width:30%;
      text-align:left;
      margin:0;
    }

    #menuLinks{
      display:inline-block;
      width:70%;
      text-align:right;
      background:#eee
    }

    #topMenu{
      width: 100%;
      display:table; /*for float containment*/
      margin:0;
      padding:0;
      list-style: none;
      background-color: #48D1CC;
    }
    #topMenu li{
      float: left;
      padding: 0.5em 1em;
      background-color: #48D1CC;
    }

</style>

</head>
<body>

<div id="pageHeader">
  <h1 id="logo">ACME</h1><!--chained tags--><div id="menuLinks">Some text here...</div>
  <ul id="topMenu">
    <li class="menuCurrent">Home</li>
    <li>News</li>
    <li>Articles</li>
    <li>How-To</li>
    <li>Gallery</li>
  </ul>
</div>

</body>
</html>

inline-blocks

@Ray.H,

Hey there. Okay, I spent the evening playing around with the two samples above, and merged your Flexbox addition into my current structure.

It made a slight improvement, but there are two things that I’m not sure how to do using Flexbox, if it can even be done.

First, I really need the #menuLinks to “float” to the right. (Either using Float: right or something like it.)

This just makes sense, because the company name/logo start from the left and these menu links should start from the right and they work towards the center.

So I’m not sure if that ruins your Flexbox suggestion.

Second, similar to #1, for my #topMenu, all of the menu items should start from the left, but the very last menu item (i.e. “Store”) needs to be located to the far right, because I want it to stand out!

So conceptually, this is a classic “float right” situation - reardless of how it is accomplished.

Again, not sure how this plays into your recommendation to use Flexbox.

Below is my updated code.

In it, you will find…
1.) Commented out sections of how I originally did the containers - things seems to work okay with things commented out, but who knows how this integrates with Flexbox.

2.) Sections that MUST stay are noted as such.

3.) Places where I need to “float” things are notated as well.

<!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_chopped-off-text2.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;
      /* PREVIOUS /*
      /*
      position: relative;
      top: 0;
      max-width: 100%;
      /**/
    }
    
    #pageHeader{
      /* FROM RAY... */
      display: flex;
      align-items: baseline;
/*      padding: 0 0 5px 0;     /**/
      line-height: 1.4;
    }
    
    #logo{
      /* THIS NEEDS TO "FLOAT" LEFT */
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      /*  PREVIOUS
      position: relative;
      float: left;
      height: 1em;
      width: 5em;
      /**/
    }

    #menuLinks{
      /* THIS NEEDS TO "FLOAT" TO RIGHT */
      margin: 0 0 0 50px;
      /*  PREVIOUS
      position: relative;
      float: right;
      /**/
    }
    
    #topMenu{
      width: 1200px;
      clear: both;
      min-height: 0;
      list-style: none;
      background-color: #48D1CC;
    }
    
    #topMenu:after{
      content: "";
      clear: both;
      display: block;
      height: 0;
    }
    
    #topMenu li{
      position: relative;
      float: left;
      padding: 0.5em 1em;
      background-color: #48D1CC;      /* Medium Turquoise */
    }
    
    #topMenu li.menuCurrent{
      background-color: #008B8B;      /* Dark Cyan */
    }
    
    #topMenu li.menuLast{
      /* THIS NEEDS TO "FLOAT" TO RIGHT */
      float: right;
      padding: 0.5em 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"><!-- KEEP -->
    
    <div id="pageInner"><!-- KEEP -->
      
      <div id="mast"><!-- KEEP -->
        <div id="pageHeader">
          <h1 id="logo">Cherry Tart</h1>
          <div id="menuLinks">Some text here...</div>          
        </div>
        
        <ul id="topMenu">
          <li class="menuCurrent">Home</li>
          <li>News</li>
          <li>Articles</li>
          <li>How-To</li>
          <li>Gallery</li>
          <li class="menuLast">Store</li>
        </ul>        
      </div>
      
      <div id="pageBody"><!-- KEEP -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

        <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

        <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

        <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

        <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

Thanks for the help! :+1:

To simulate float:right using flex that would be margin-left:auto;
See the specs for box alignment and auto margins at MDN

    #menuLinks{
      /* THIS NEEDS TO "FLOAT" TO RIGHT */
      margin-left:auto;
      /*  PREVIOUS
      position: relative;
      float: right;
      /**/
    }

And here are the changes for your #topMenu

    #topMenu{
      width: 100%; /*was 1200px*/
      display:flex;
      list-style: none;
      background-color: #48D1CC;
    }

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

    #topMenu li.menuCurrent{
      background-color: #008B8B;      /* Dark Cyan */
    }

    #topMenu li.menuLast{
      /* THIS NEEDS TO "FLOAT" TO RIGHT */
      margin-left:auto;
      padding: 0.5em 1.7em;
      background-color: #FFD700;      /* Gold */
    }
1 Like

@Ray.H,

Just made the suggestions above, hit refresh, and everything looks the same as with my old code - which is exactly what I wanted.

Better code, same look.

You rock!! :+1:

I assume that adding links and links styled as buttons to the #menuILinks should cause any issues to your code, right?

P.S. I am being good and reading some of the Flexbox guides on MDN… :wink:

1 Like

Be sure to see my edits above to your #topMenu width

    #topMenu{
      width: 100%; /*was 1200px*/
      display:flex;
      list-style: none;
      background-color: #48D1CC;
    }

overflow:hidden on #pageInner was hiding the store link when the page gets below 1200px

1 Like

Ah, good catch!

Now this is where things get tricky, and is the reason I was originally leery of using Flexbox…

While my web design is dated, and certainly not very responsive, at least it works for non-mobile. And after asking people on here, it is better to have a non-responsive live website than no website at all.

So I made that change and it sorta seems to fix things, but now i see when my browser window is maybe 3/4 width that still the “Store” link and my #menuLink disappear if you keep shrinking the window.

To be honest, I’m not sure it is worth fixing, because by the time you get to like 800px, I know my site doesn’t scale down.

(In v2.0, I will try to be 100% mobile compliant, but it’s not preactical for me to reach perfection the first go around.)

And I do need the #pageInner container for a lot of other things on my site.

So, I made the last change and it worked somewhat, but I’m thinking that’s the best I can do for now.

Thoughts?