Why is footer in <article> element?

[Adziky]

Hey guys !

Now I doing my Homework from teacher, … html&Css + Javascript, and i Have small unussual problem with my footer… Why is stuck in article element ? Footer is not in this element so Why ?

Thankss guys and have a nice day:)

code : https://codepen.io/Adzikk/pen/PoWvXQY?editors=1100

[ladans37]

That is unusual indeed . No idea, maybe you have a tag or two mixed up? Or forgot one?

[tracknut]

Given your indentation jumps back two tabs between and , I suspect ladans37 is right, you’ve forgot a closing tag somewhere above.

Unrelated, but since we’re looking at the code, your div “container_footer” is extraneous. Put the class directly on the <footer> if you need it, or apply the css directly to the footer tag, if you just have the one.

[ladans37]

Just a suggestion, but if you but a spacing in between your HTML code(s), you will be able to distinguish which tag groups belong together. Like this :

<div id="barwrapper">
            <div class="rainbow"></div>
            <div class="rainbowreflection"></div>
        </div>
       
        <div id="playhouse">
            <div class="blackcat"></div>
            <div class="blackcat2"></div>
        </div>

It will be much more readable and organized this way.

[Adziky]

Yes, I noticed the class and put it directly in the footer, and I looking for this forgotten closing tag but idk if Iam blind man, Its night and know but i think I have everywhere closing tag

Here is my code : https://codepen.io/Adzikk/pen/PoWvXQY?editors=1100

I add border in Footer for better “view”
But thanks for your help:) i go again look at the code

[Adziky]

So thats is ± code structure how should it look like right?

[ladans37]

Looking at it in CodePen helps a lot. It will underline the tags so you know which tag is where.

[ladans37]

Yeah looks good to me

[Adziky]

Yopp, but there just write The value of attribute [ content ] must be in double quotes. and thats all i change this mistake and They couldnt find any errors so yea,

[wake689]

Did you find the solution? I have been puzzling over this today.

I’m sure there are folk on here who know the answer. But I can’t figure it out. For some reason the content in the
<section></section>
blocks containing “Mexico”, “Brazil” and “US” overflows the containing section and runs over the footer and I can’t work out how to stop this.
I would love to know the answer.

[SamA74]

@tracknut

Given your indentation jumps back two tabs between and , I suspect ladans37 is right, you’ve forgot a closing tag somewhere above.

Generally browsers are quite good at reinterpreting invalid code. Overlapping HTML elements or missing tags don’t usually result in an overlap in display.
I think it is more likely a CSS problem, as it indicates something that breaks the natural document flow. Perhaps inappropriate use of relative or absolute positioning, or some magic numbering with negative margins, that kind of thing.

[wake689]

If you remove
max-height
and
float; left;
from
section article{}
the footer behaves properly but the three sections then display one above the other. You may be able to sort that out using flexbox or grid.

[ladans37]

@wake689 flex-direction: maybe more appropriate

[PaulOB]

The main problem is the floats have not been contained and the group class needs to be added in two places. as shown below.

Here:
<div class="container aside group">

and here:

<article class="container article group">

Then the max-height from the floated section elements need to be removed and also the fixed height from aside and header.

header{
    padding: 25px 10px 0 10px;
   /* height:105px;*/
    /* background-color: antiquewhite; */
}

aside{
    border-top: 1px solid #c2bec4;
    border-bottom: 1px solid #c2bec4;
    background:#e4e5e5;
    padding:20px 0px;
    /*height: 350px;*/
}
article section{
    padding:0;
    width: 32.33333333333333%;      /* 100% rodič : 3 elementy */
    /*max-height: 370px;*/
    float: left;
    margin-right: 1.5%;
}

Also get rid of the prefixes for border-radius as they haven’t been needed for about 15 years.

Once you do that then it will look like this at full screen.

There is still some work to do on small screen though as it doesn’t scale well.

However I would suggest finding a modern template that doesn’t use floats these days but uses flexbox or css grid instead. Or indeed write your own

[WebSteve]

Copy/paste your code into here and report back on the errors: https://validator.w3.org/

[wake689]

Thank you Paul. I had been trying but couldn’t figure it out. I was hoping you would step in.