Using flex, my main container flows beyond the footer

I have not been able to find the post that would answer my question. My main container sits under the nav and above the footer. It has three different wraps, followed by the footer. The nav and footer looks great, but the container continues.

overflow: hidden does not help, and I have removed my height, as suggested by a different posting.

Please help.
Thank you

Surely you realize that without HTML/CSS to replicate the problem (i.e. a website, jsfiddle, or codepen) we have absolutely no way of helping you.

Yes, of course. I’m sorry.
index.html (8.7 KB) hmcstyle.css (7.8 KB)

I’ve attached the html and css files.

Your main issue right now is you aren’t properly doing HTML comments.

Please take time to validate your page and then come back to us.

jigsaw.w3.org/css-validator

A lot of your HTML comments are incorrect and screw up the page.

Thank you,
I will validate.

I have validated. Some issues with -webkit and flex codes. But I’ve taken care of what I do know how to fix.

It looks fine in IE10. However Chrome is not happy, and only shows the background and header.

Can you check me please? index.htmlstylesheet

Thank you in advance.

It’s so rare to see a flexbox question, I’m ashamed at how long this took me to figure out.

On #nav, change your flex-flow to “wrap” instead of “nowrap”. Nowrap there is setting up the children to not wrap.

You should note that on the inner child .hwrap table, you can’t set the flow/flex-direction on that since those can only be set on the parent element that has display:flex.

I only just began to study flex two weeks ago, so I’m feeling a little behind on my learning curve.

Thank you, Google Chrome now sees the whole page.

However it’s squishing my containers, wrapping my text and repositioning my information. Is there a special Google code that I should be aware of?

EVERY other instance of display:flex on that page - remove it.

Why are you using center tags and tables for layout?

You seem to be using both extremes of CSS and making it very hard for yourself.:slight_smile:

I don’t see anything that really needs flexbox in your layout but you certainly would not combine it with center tags or html table tags (unless the data was tabular).

Thank you!

It now works in all browsers.

Now for the media queries…

You are so right. No wonder I was confusing myself.

I went back and cleaned it up.

Thank you.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.