Floating problem in 'How To Make a Website' beginner project

Thank you for the quick answers!!

I've cleared the footer, thanks!

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #CCC;
    clear: both;
}

Is it enough to put the "clearfix" code to the css, or I need an id or something in the html as well?

However, the problem remains :D I try to include a print screen:

I've changed the gallery a bit, so that the problem is more visible

#gallery li {
    float: left;
    width: 20%;
    margin: 2.5%;
    background-color: #F5F5F5;
    color: #BDC3C7;
    }

It renders fine on my screen after fixing your footer. Try to decrease the size of pictures to 10% or something and then see if it resolves your issue.

as well do F12 and then try to work out what it could be. Its very handy dev tool depending which browser you are using

I agree with what Robert Stewart said, that this can be an issue.

I would suggest adding the following to your existing classes as, in my opinion, setting both width and height when possible is a good standard to follow.

/* like the width, have img height be 100% of container */
img {
    height: 100%;
}

/* set li height to something static similar to how you set the width */
#gallery li {
    height: 140px; /* 140 is an example - use what you need. */
}

Why is this a good standard to follow? I will use aspects of your use-case, a gallery, to explain. At some point you decided to set the width of the two above classes. At that point (when thinking about if dimensions need be set) it would not be unreasonable to ask ourselves, "If we are setting one, then why not the other? Do we need to set the perimeter or is one or both aspects flexible?".

In the case of a gallery, particularly if all images are the same size or, more importantly, each to be displayed as the same size then setting a width and height makes sense.

Furthermore, if we are not setting the width and height explicitly in an <image> tag within our HTML markup and we are not defining those properties in CSS we could end up with some unusual or unexpected display issues depending upon our structure.

While we are thinking about flexibility it would be logical to think about if the element(s) can be flexible within their container. i.e. using percentages instead of a defined unit like em or px. This can sometimes be a bigger question and may require some investigation or experimenting with... depending upon needs of course. For example, using our gallery, do we need/ want 2 columns or doesn't it matter. This can lead to all sorts of similar questions, heheh.

So to sum up:

• When thinking about height or width then think of the other at the same time - do they have a fixed dimension or are they (together or individually) able to be flexible to content and, possibly, layout changes.
• If a height or width or both needs to be set, is it going to need a defined unit of length or is it reasonable to be a percentage of the parent or containing element.

If I have even number of items in the unordered list, then everything is ok, they are in two columns and every row has two pictures in it. If I have an uneven number of list items, then in one row one picture appears alone on the right... I'm now totally confused!

Hi,

First of all your footer div is appearing within wrapper. you need to close your wrapper div before footer div starts and not after footer div. as well you need to add in styling of footer clear:both; . This will keep you footer appears on its own.

in regards to float, I am not sure what the issue you are referring to. I have checked the style and it seems alrite all the images are appearing as they should be.

thanks

Without changing your markup I added the following to your CSS to fix your issue, as I understand it:

section:after {
  content: "";
  display: table;
  clear: both;
}

This is called a "clearfix" and there are many articles regarding this term. I put it on the section container so that everything within it will still be columned whereas anything directly after will flow normally. In other words the float(s) are contained to where they should be.

I hope this helps.

Did you get this resolved?

It appears there is something else going on, either in your HTML markup or in the stylesheet, than the code you are showing us. It's like there is a float: right on Bruce Lee.

Wow, big thank you for all of these explanations! Tonight or tomorrow the latest I will have time to dig into my codes, will get back here to tell you how it goes! Tiil then have a nice Sunday!

Hello again,

So I've tried all the suggestions, and the one that worked was to resize my images so that they are exactly the same height and width. (Before the width was the same but the height was varying.)

Because I would like to have a page which works both on desktop and mobile, setting the sizes to px or em didn't really work well - if it looked ok on desktop, it was weird on mobile size etc. So then I tried to use % with the original images (which weren't the same size) but the problem remained. (Maybe I missed something here because I don't have enough knowledge yet and there is a solution for this.)

But with images the same height and width all looks fine now!

By the way, I've cleared up the footer, the "clearfix" thing I don't totally understand yet, but I'll go and read about it.

Thank you so much for the help, everyone wrote something very useful which I've copied and pasted into my css knowledge library! :)