Could someone please explain to me why the nav tag actually changes the size when its position is set to fixed?
It is a block element so it should take the maximum width of the viewport. I don’t understand the login behind it.
Thank you!
Ive had this same issue happen to me before, all I had to do to fix it was use a size tag in the parameters.
Like this:
<h1 font "blank" size = "40px"></h1>
1 Like
Usually, you will just add width: 100% to the element.
Explaining how the box is sized might get very spec-heavy, and the information on the “why” is likely not that readily available. Basically, it is related to how elements using position: absolute is size as well. The fixed element is also taken out of normal document flow and follows some of the same sizing rules.
1 Like
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
I would not suggest using HTML attributes to size elements, use CSS when possible (images are one exception). Also, your HTML is not valid. Run it through a validator.
Thank you! I added width: 100% so I knew that this would work but I was just trying to understand the behaviour. Seems that this is not so straightforward especially when I am new to css.
CSS is deceptively simple…until you start reading the specs. Then it looks like blueprints for building space crafts.
I’m honestly not sure I can give a good simple answer for why elements with position absolute/fixed are sized the way they are. But you are right that if the element just sized itself according to its display type it would remain full width.
I guess from the point of view that the element is taken out of normal document flow and does not interact with other elements on the page having its size dependent on its content makes some sense. From a layout perspective, it doesn’t matter if its box is full width or not, as it will not actually be taking up space. Other normally positioned elements will just overlay its position no matter what width it has.
Yes, makes more sense now. Thank you very much!
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.