Problems With Footer

Report · May 05, 2022

Hi Guys,

I need some assastance. I'm trying to create a three way divided footer. It looks OK for the most part in the broweser but in the DW editor the right footer appears under the left footer. I'm not sure if this is an error in my code or a glitch in the editor. It usually means that something is "out of bounds" and the total space being used is larger than 100%, but I don't see my mistake. I would appreciate a second set of eyes.

Here's the HTML

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>Holy Grail</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div id="headernavigation">
      <div id="headerwrapper">
        <header id="header">Header</header>
      </div>
      <div id="navigationwrapper">
        <nav id="navigation">
          Navigation
        </nav>
      </div>
    </div>
    <div id="main">
      <aside id="leftcolumn">
        Left Aside
      </aside>
      <article id="content">
        Content
      </article>
      <aside id="rightcolumn">
        Right Aside
      </aside>
    </div>
    <div id="footerwrapper">
	  <div id="leftfooter">
		  Left Footer
	  </div>
	  <div id="centerfooter">
		  Center Footer
	  </div>
	  <div id="rightfooter">
		  Right Footer
	  </div>
    </div>
  </body>
</html>

Here's the styles

@Import url("reset.css");
@import url("colors.css");
@import url("fonts.css");
@import url("responsive.css");

* {
  box-sizing: border-box;
}

body {
  background: #ddd;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 20px;
}

#main {
  flex: 1;
  display: flex;
}

#headernavigation {
  margin: .1em;
  padding: .2em;
  border-radius: 5px;
  border: 1px solid #666;
  background: white;
}

#header {
  min-height: 100px;	
  background: white;
}

#navigation {
   background: white;
}

#content {
  flex: 60%;
  margin: .1em;
  padding: .2em;
  border-radius: 5px;
  border: 1px solid #666;
  background: white;
}

#rightcolumn {
  flex: 20%;
  margin: .1em;
  padding: .2em;
  border-radius: 5px;
  border: 1px solid #666;
  background: white;
}
#leftcolumn {
  flex: 20%;
  margin: .1em;
  padding: .2em;
  border-radius: 5px;
  border: 1px solid #666;
  background: white;
}

#footer {
  min-height: 100px;
  background: white;
}

#leftfooter {
  margin: .1em;	
  padding: .2em;
  display: inline-block;
  float: left;
  width: 33%;
  text-align: center;
  border-radius: 5px;	
  border: 1px solid #666;	
  background: white;	
}

#centerfooter {
  margin: .1em;	
  padding: .2em;
  display: inline-block;
  float: left;
  width: 33%;
  text-align: center;	
  border-radius: 5px;	
  border: 1px solid #666;	
  background: white;	
}

#rightfooter {
  margin: .1em;	
  padding: .2em;
  display: inline-block;
  float: left;
  width: 33%;
  text-align: center;
  border-radius: 5px;	
  border: 1px solid #666;	
  background: white;	
}

Here's the respomsive CSS

@Loveaalrm {
  width: device-width;
  height: device-height;
  zoom: 1.1;
  min-zoom: 0.4;
  max-zoom: 2;
  user-zoom: fixed;
}

@media screen and (max-width: 640px) {
  #main {
    flex-direction: column;
  }
  #header {
    min-height: 50px;
    max-height: 50px;
  }
  #navigation {
    min-height: 50px;
    max-height: 50px;
  }
  #rightcolumn {
    min-height: 50px;
    max-height: 50px;
  }
  #leftcolumn {
    min-height: 50px;
    max-height: 50px;
  }
  #footer {
    min-height: 50px;
    max-height: 50px;
  }
}

Thanks In Advance For Your Assistance

Report · May 05, 2022

Change <div id="footerwrapper"> to <div id="footer"> and add display flex to the footer.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 06, 2022

Just perusing your posts to the Dreamweaver forum. It is interesting that none of our answers have been marked `Correct`.

I get the feeling that you are milking us without any gratification for the time that we waste on you..

You have lost me. It goes you well.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 06, 2022

I'm sorry that you feel slighted. I meant no disrespect. I do appreciate the assistance I have received and have tried to make sure that I show it by my comments. As for the other comments about mixing flex with other styles that is do to my inexperience and trying different methods to solve different problems. I'm sorry if I've offended you.

Report · May 06, 2022

Let me explain why your last div drops to the next line.

Although you have used:

* {

box-sizing: border-box;

}

which takes into account the padding and the border applied to the 3 footer divs it does NOT take into account the margin, hence the total width of your 3 footer divs exceeds 100%.

If you remove the margin applied to the 3 footer divs they will remain next to one another.

Using floats was a PITA as you had to do the maths to make elements fit ie the correct set is as follows. No margin added to either leftfooter or rightfooter, whilst 0 1% margin is added to the centerfooter and all 3 a width of 32.66%, making a total of 100%

#leftfooter {

padding: .2em;
float: left;
width: 32.66%;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

#centerfooter {
margin: 0 1%;
padding: .2em;
float: left;
width: 32.66%;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

#rightfooter {

padding: .2em;
float: left;
width: 32.66%;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

IF you use flex it makes life simpler as ALL the maths are done by the browser:

* {
box-sizing: border-box;
}

#footerwrapper {
display: flex;
gap: .2em;
background: white;
}
@media screen and (max-width: 768px) {
#footerwrapper {
flex-direction: column;
}
}
#leftfooter {
flex: 33%;
padding: .2em;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

#centerfooter {
flex: 33%;
padding: .2em;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

#rightfooter {
flex: 33%;
padding: .2em;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

plus as all divs share the same attributes you can combine the selectors:

#leftfooter, #centerfooter, #rightfooter {
flex: 33%;
padding: .2em;
text-align: center;
border-radius: 5px;
border: 1px solid #666;
background: white;
}

Report · May 06, 2022

As for the other comments about mixing flex with other styles that is do to my inexperience and trying different methods to solve different problems. I'm sorry if I've offended you.

By @VShaneCurtis

I'm not offended at all. Obviously Ben can speak for himself. He has obviously seen something that has upset him. I dont care if posts gets marked correct or not, it's not obligatory. It's true a thanks here and there is 'motivational' but I think you already did that, at least in the post that I was involved in.

You wrote:

'Thanks for your assistance. Your suggested changes have been applied. Looks really nice and more polished. Thanks for the added embellishments'.

Can't ask for more than that.

Report · May 06, 2022

It is true that I don't come back and mark a post as correct most of the time. I do however try to be respectful and express my appreciation to those who have taken the time to assist me. I'm sorry if I've ever made any of you feel like you were being taken advantage of. I've adminted that HTML isn't my stong suit and I'm experimenting and trying to learn so that maybe I can make my own template. I've got some nice ideas but I still have some things to figure out. I will be making the suggested changes to my code and swithing everything over to use flex, I do understand that mixing apples and oranges isn't a good idea. Additionally I forgot to take the border into account which explains why the footer was wrapping to the next line in the editor. Thank you again for your assistance.

Report · May 06, 2022

It is true that I don't come back and mark a post as correct most of the time. I do however try to be respectful and express my appreciation to those who have taken the time to assist me. I'm sorry if I've ever made any of you feel like you were being taken advantage of. I've adminted that HTML isn't my stong suit and I'm experimenting and trying to learn so that maybe I can make my own template. I've got some nice ideas but I still have some things to figure out. I will be making the suggested changes to my code and swithing everything over to use flex, I do understand that mixing apples and oranges isn't a good idea. Additionally I forgot to take the border into account which explains why the footer was wrapping to the next line in the editor. Thank you again for your assistance.

By @VShaneCurtis

A lot of posters don't/forget/perhaps even don't know how to mark solutions as correct. Personally I dont find it an issue. Apparently it's meant to help others who may be experiencing the same problem find an answer quickly.

Also take into consideration that people who post here are most likely battling an issue so marking an answer as correct is probably not at the forefront of their mind.

Report · May 06, 2022

I have applied the changes that you suggested and it fits the bill quite nicely. Thank you for the assistance. I did notice one thing that I thought looked odd and I can't see a reason for it. The space between the sections of the footer is white. It looks like there should be a little bit of grey showing through from the background though. I played around a little bit trying to see if I could figure it out but no joy. Is this an issue with the page design or is this a result of using flex?

Report · May 07, 2022

I have applied the changes that you suggested and it fits the bill quite nicely. Thank you for the assistance. I did notice one thing that I thought looked odd and I can't see a reason for it. The space between the sections of the footer is white. It looks like there should be a little bit of grey showing through from the background though. I played around a little bit trying to see if I could figure it out but no joy. Is this an issue with the page design or is this a result of using flex?

By @VShaneCurtis

The white is most probably as a result of setting background: white; on the footerwrapper css:

#footerwrapper {
display: flex;
gap: .2em;
background: white;
}

Report · May 07, 2022

That did the trick. Thank you. I was messing with each of the footer sections and forgot to try the wrapper. Now I have a layout that I am happy with and can build on. I've already experimented with one of my ideas which is using variables to set colors and other things. It seems to work pretty well so I'm planning to try and implement this in my design and create a settings css file that handles this aspect. The idea being to change a color once using the setting in the file rather than 50 different places spread all over the place. I'm also thinking of color themed css files that do the same thing but the colors are all part of the same pallet. Thanks again for the help.

Report · May 07, 2022

I've already experimented with one of my ideas which is using variables to set colors and other things. It seems to work pretty well so I'm planning to try and implement this in my design and create a settings css file that handles this aspect. The idea being to change a color once using the setting in the file rather than 50 different places spread all over the place. I'm also thinking of color themed css files that do the same thing but the colors are all part of the same pallet. Thanks again for the help.

By @VShaneCurtis

Whatever works for you is the best way. I tend to think how useful is this going to be to me and my situation. If I get good vibes I'll spend time learning something, if I think its not going to bring much to the party I'll investigate it but may not give it my full attention.

Report · May 07, 2022

I made the mistake of buying a template that pretty much turned out to be crap. It uses java script that is WAY out of date, I did not check this out before making the purchase. I "assumed" that the person who created it would take pride in their product and keep it up to date. I was wrong. Some people choose to take advantage of the customer's lack of knowledge just to make a buck. I should have known better. I'm smarter than that and I'm ashamed that I didn't do my due diligence before making the purchase. That's what set me on this path. Sometimes I do things with a specific goal in mind. Other times it's just me wanting to play, experiment and try to learn something new in the process. This is a little of both. I appreciate all of your help, patience, and support.

Report · May 06, 2022

Not sure why you are using float to position the 3 divs in your footerwrapper div when you're using flex elsewhere to position elements in your layout. Once you progress to flex the only time you're likely to want to use float is for wrapping text around an another element, like an image.

Problems With Footer

2 Correct answers