Make a Website (Boundaries and Space)

[amandaloh]

Good day guys , i have an enquiry regarding Exercise 10 of Make a Website (Boundaries and Space).
I would appreciate your help alot.

Here is the link : https://www.codecademy.com/courses/make-a-website/lessons/boundaries-space/exercises/position?action=resume_content_item

HTML

CSS

Result in Browser

CSS(Revised)

Result in Browser(Revised)

Question 1
Why does it look so different if i had applied
to instead?

Question 2
According to Exercise 10 of Display and Positioning
https://www.codecademy.com/courses/learn-css-display-positioning/lessons/css-display-positioning/exercises/css-float?action=resume_content_item&course_redirect=learn-css ,
it states that :
,
so how did the above work if there had not been any width specified yet?

[mtf]

Why does it look so different if i had applied

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.

how did the above work if there had not been any width specified yet?

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.

[amandaloh]

"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

[mtf]

Inline elements do not have a position property.

[amandaloh]

then shouldn’t it have worked for instead of since is an inline element and is not?

[mtf]

It could be that a float element’s position attribute is ignored, and all it has are margins…

[amandaloh]

Understood from your explanation on .

How about ? Where is the DIV taking its width from?

[mtf]

Where is the DIV taking its width from?

Its width is auto and fills out to accommodate the text and padding.

[amandaloh]

I had just made some changes for a clearer perspective, top:50px would show a more obvious difference in the results.

Assuming i had applied float:right to .contact-btn a as shown below

Results 1: If I had applied top: 50px to .contact-btn a , we would notice that the element would shift downwards.

Results2: If I had applied top:50px to .contact-btn, there wouldn’t be any changes at all

Perhaps i wasn’t being too clear in my previous questions and hence i got you confused, could you kindly assist to elaborate again?

[mtf]

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.

[amandaloh]

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.

[amandaloh]

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?

[mtf]

I cannot explain what the author’s reasoning was. If you remove that rule it makes no difference. Where it should be is on the nav element.

nav {
  background-color: #FFF;
  position: relative;
}

That is the parent container of the whole bottom nav bar. The float is relative to its position.

[amandaloh]

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?

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_Example

[alexc]

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.

Recommed reading this article on floats: https://designshack.net/articles/css/everything-you-never-knew-about-css-floats/

[mtf]

it’s a quirk of the box model caused by bootstrap and the nav tag.

Good point. I was focused only on the main css and not Bootstrap.

[alexc]

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.