The container has a float property already, so there should be none on the link. <a></a> is an inline element that cannot be floated.
The border is on the link, not the container, and since inline elements do not have a width property, the padding fills out around it to give it the currrent shape. The DIV is taking its width from the padded out link.
"The container has a float property already, so there should be none on the link."
I was playing around with the code and had actually removed the float property from the container.
" is an inline element that cannot be floated."
By applying the float property to it did float to the right, however it looks different
than if i had applied it to the container only
Additional Question 3: Why doesn’t it work the same if i had applied top:50px to . It only works if i had applied it to
I really don’t see the point in having top: 50px. The nav bar looks fine without it. DIV has a position property, A does not.
What I recommend is start an HTML page on your own machine and only give it the one container, that navbar with the same components. Do as much as you can with just the HTML before starting to style. Experiment and keep notes of what happens.
Practice lots with things like position, float, etc. and apply margins, pads, top/bottom/left/right, and see what works, and when. You’ll get more from that than from asking me to explain.
According to Exercise 14 of Learn CSS: The Box Model , it states that
Has it got anything to do with this? If so i would understand that there were probably default CSS rules that had set up the default values for the padding and margin.
You are right in reality top:50px is unnecessary and yes the nav bar looks absolutely fine without it…
However, i’m very much intrigued with regards to the fundamentals behind “why” it works rather than “how” it works
If DIV has a position property and A does not, i’m confused because the instructions were to have the position property in Exercise 10 of Make a Website (Boundaries and Space) applied to .contact-btn a? What i understand is that position property only works for blocked elements, is .contact-btn a considered a blocked element?
P.S Am trying to see if i can get a moderator in on this. Once again much appreciation for your help
In this example, the is block-level element. Within it is , which is an inline element.
CSS
Question: In this case with the .contact-btn a CSS selector, it consists of a combination of block-level and inline element as well. So if the position property only works for blocked elements, shouldn’t it not work?
Interesting discussion, most users aren’t too fussed with these little nuances, so it’s nice to see someone interested!
To begin with I’d like to point out that I’m quite rusty on HTML & CSS, so everything I say might not be 100% accurate, and I agree with the points @mtf has made so far.
Dealing with Question 2 first: As far as I’m aware an element such as a has a width implicitly set by the text in it, i.e. “auto”. Think about the simple underline property, if a link was to be underlined, it must have a defined width in order to know how much to underline.
Question 1 in is a little trickier: floating the <a> to the right pushes it’s “box” as far right as possible, this takes the containing div with it, as a result of this it’s height fills up (almost as if it has been squashed) to the max allowed by the box hierarchy. Whereas floating the div moves the container and the inside follows, no squashing needed.
Question 3: This is linked, to question 1. As far as I can figure out floating the <a> fills it up to the max of it’s container. By changing a property of the nav this max property is also changed. For example if you replaced the nav tag with a div tag it doesn’t make any difference if you float the a or float the div.
In short: it’s a quirk of the box model caused by bootstrap and the nav tag.
Yep @mtf I find the happens a lot, its easy to be so focused in the immediate css and not think about the fact that something 5+ layers up might be influencing it.