Self-adjusted height in a navbar and wrap feature

[GPT]

Hi,

 

I have created (or better, my intention was to create) a simple navbar by using W3.CSS framework as follows (see photo and code):

 

1/12 2/12 2/12 2/12 2/12 1/12 1/12 1/12

| MENU | Message || Username | Password | reCAPTCHA | Login || Register | Language |

 

- I would like the height of the navbar to be self-adjusted; when I remove the "height: 55.5px" from, or set "height: inherit/auto" into, <div id="login"> the navbar's height takes the value of 2px and the buttons remain on the air!

* What am I doing wrong?

* How can I make the highest height of existing elements to inherit its value to the navbar's height?

* Does "g-recaptcha" element play any role?

 

I would like the navbar to behave responsively as follows:

 

2/12 2/12 4/12 4/12 or 3/12 3/12 3/12 3/12

| MENU | Message || Username | Password | | Username | Password | reCAPTCHA | Login |

| Register | Language || reCAPTCHA | Login | | Register | Language |

| MENU |

and finally:

 

6/12 6/12

| Login | Register |

| Menu | Language |

 

How can I make the navbar to get wrapped and elements appear in a second row, by using only existing W3.CSS elements?

 

Please, just give hints and advices.

 

Thanks in advance.

login_bar.html

[dsonesuk]

DON'T use position absolute, for layout purposes, elements that use this are taken out of the flow of other elements, other elements will move to occupy the space it leaves, and parent elements will collapse because it has no area to maintain its height. The main purpose you would use this is for overlapping purposes.

[GPT]

Ok. I have changed, through inline style, the w3-display-middle class "absolute" position (default) into "relative" position.

 

Setting height manually is not required any more. Thanks!

 

What about the "wrap" feature? When I use "flex-wrap: wrap;" the height is not adjusted again (Register and Language blocks overlap each other)? Any hint, suggestion?

 

Tia: T(hanks)i(n)a(advance)

[dsonesuk]

The only other property that would cause a similar issue as position: absolute; as regards to parent element collapsing, is the use of floated elements, the normal fix is to apply overflow: hidden; to parent, or create content:"", to place below all floated elements, and give it clear: both.

[GPT]

Ok. But which W3.CSS elements are floated i.e. which W3.CSS elements have inherited the "float" class/attribute, if they have it?

 

(This is the reason that I have asked (by separate post) if there is a hierarchy diagram. I suspect that the W3.CSS creator(s), b4 they start coding, he/she/they made a design plan of how this "construction" will "develop". Anyway, I am not a member of IT industry and surely I do not know how to "understand" IT folks.)

 

Tia.

Edited January 24, 2017 by GPT

[dsonesuk]

Every browser has web development option F12, look for inspect select elements in question, view css for that element. It should show all html in current document, you can then transverse down through these elements to identity what styles are applied to that element by the class or id.

 

One more thing, don't adjust the w3css styling directly, add you own class and use styling to override the w3css. What you adjust then does not affect the original w3css where you may find you require that original instead.

[Ingolme]

My guess is that, like bootstrap, the grid system is using floated elements. There should be a grid wrapper class of some sort to prevent this problem.