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

Problems changing footer section widths

Explorer ,
Jun 24, 2022 Jun 24, 2022

Copy link to clipboard

Copied

Hi Guys,

 

I'm having trouble adjusting the the widths of my footer sections.  Currently the footer is divided into three equal sections.  What I would like to do is have the footer sections sizes match the sidebar and main content area.  Left and right sidebars are 20%.  Leaving 60% for the main content area.  So I would like for the left and right footers to be 20% and the center footer to be 60%.  I've tried several different things and no joy,  Any help you can provide is appreciated.

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/full.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">
</head>
<body>
<header id="header" class="headerStyle"> logo
  <nav id="navigation" role="full-horizontal">
    <ul id="mainMenu">
      <li class="menuItem"><a href="#">Products</a></li>
      <li class="menuItem"><a href="#">Services</a></li>
      <li class="menuItem"><a href="#">Projects</a></li>
      <li class="menuItem"><a href="#">About</a></li>
      <li class="menuItem"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main id="pageBody">
  <div id="content" class="bodyStyle"> </div>
  <div id="leftSidebar" class="bodyStyle">
    <article class="topArticlestyle">
      <h3>First Left Article</h3>
    </article>
    <article class="middleArticlestyle">
      <h3>Second Left Article</h3>
    </article>
    <article class="bottomArticlestyle" >
      <h3>Third Left Article</h3>
    </article>
  </div>
  <div id="rightSidebar" class="bodyStyle">
    <article class="topArticlestyle">
      <h3>First Right Article</h3>
    </article>
    <article class="middleArticlestyle">
      <h3>Second Right Article</h3>
    </article>
    <article class="bottomArticlestyle">
      <h3>Third Right Article</h3>
    </article>
  </div>
</main>
<footer id="footer">
  <div id="leftFooter" class="footerStyle">
	  
  </div>
  <div id="centerFooter" class="footerStyle"> 
	  
  </div>
  <div id="rightFooter" class="footerStyle">
	  
  </div>
</footer>
</body>
</html>

 

    body {
      font-family: "Open Sans", "Arial";
      color: #FCF9F4;
      font-size: 1em;
      background-color: #3F3F3D;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    a {
      text-decoration: none;
      color: #FCF9F4;
    }
    #navigation[role="full-horizontal"] {
      width: 100%;
    }
    #navigation[role="full-horizontal"] #mainMenu {
      width: 100%;
      list-style: none;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem {
      position: relative;
      float: left;
      padding: .25em 1em;
      margin: 1.25em 1em;
      cursor: pointer;
      background: #3E6EB6;
      text-align: center;
      border-radius: .75em;
      transition-duration: .3s;
      transition-timing-function: ease-in-out;
      transition-property: background, color, padding, border-radius;
      box-shadow: 0.1em -0.1em 0 0.1em #FCF9F4, inset 0 0 0 0.15em #FCF9F4, -0.1em 0.1em 0 0.1em #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:after {
      position: absolute;
      z-index: -1;
      content: "";
      right: 0;
      border-radius: 50%;
      box-shadow: 1em 1em 0 2em #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:last-child:after {
      box-shadow: none;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:hover {
      background-color: #3E6EB6;
      padding-left: 3em;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:hover > a {
      color: #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem > a {
      color: #FCF9F4;
      text-decoration: none;
      font-size: 1.3em;
      transition: color .3s ease-in-out;
    }
    #leftSidebar {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 20%;
    }
    #content {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 60%;
    }
    #rightSidebar {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 20%;
    }
    #footer {
      font-family: inherit;
      font-size: 1em;
      color: #FCF9F4;
    }
    .headerStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      margin: 5px;
    }
    .navigationStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      margin: 5px;
    }
    .bodyStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
    }
    .sideBarstyle {
      display: flex;
      flex-direction: column;
      order: 0;
      flex: none;
    }
    .articleStyle {
      flex: 1;
      justify-content: center;
      align-items: center;
      transition: flex 1500ms cubic-bezier(0.17, 0.67, 0, 1.45);
    }
    .Articlestyle:hover {
      flex: 4;
    }
    .topArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: start;
      flex-basis: 100%;
    }
    .middleArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: center;
      flex-basis: 100%;
    }
    .bottomArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: end;
      flex-basis: 100%;
    }
    .footerStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
    }

Views

62

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 ,
Aug 31, 2022 Aug 31, 2022

Copy link to clipboard

Copied

LATEST

If you add display: flex; to your #footer and the following code to your CSS:

 

#leftFooter {
     flex-wrap: wrap;
     flex-basis: 20%;
}
#centerFooter {
     flex-wrap: wrap;
     flex-basis: 60%;
}
#rightFooter {
     flex-wrap: wrap;
     flex-basis: 20%;
}

 

shouldn't it work?

 

Edit: I just saw that the thread is from two months ago - my bad >.<

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