• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Problems With Footer

Explorer ,
May 05, 2022 May 05, 2022

Copy link to clipboard

Copied

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

@viewport {
  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

TOPICS
Code , Error

Views

461

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , May 06, 2022 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 a

...

Votes

Translate

Translate
LEGEND , May 07, 2022 May 07, 2022
quote

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 fle

...

Votes

Translate

Translate
Community Expert ,
May 05, 2022 May 05, 2022

Copy link to clipboard

Copied

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

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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;
}

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

quote

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 07, 2022 May 07, 2022

Copy link to clipboard

Copied

quote

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 07, 2022 May 07, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 07, 2022 May 07, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 07, 2022 May 07, 2022

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines