Make a Website (Boundaries and Space)

#1

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
image
CSS
image

Result in Browser
image

CSS(Revised)
image

Result in Browser(Revised)
image

Question 1
Why does it look so different if i had applied
image to image 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 :
image ,
so how did the above work if there had not been any width specified yet?

#2

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.

#3

"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.

"image is an inline element that cannot be floated."
By applying the float property to image it did float to the right, however it looks different
image
than if i had applied it to the container image only
image

Additional Question 3: Why doesn’t it work the same if i had applied top:50px to image. It only works if i had applied it to image

#4

Inline elements do not have a position property.

#5

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

#6

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

#7

image
image.png793x195 13.8 KB

Understood from your explanation on image.

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

#8

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

#9

image
image.png772x264 23.3 KB

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
image

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

image
image.png842x173 16.1 KB

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

#10

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.

#11

image
image.png841x210 18 KB

According to Exercise 14 of Learn CSS: The Box Model , it states that

image

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.

#12

image
image.png888x304 41.2 KB

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?

image

#13

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.

#14

P.S Am trying to see if i can get a moderator in on this. Once again much appreciation for your help

image

In this example, the image is block-level element. Within it is image, which is an inline element.

CSS
image

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?


#15

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/

#16

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

#17

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.