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;
}
1
Reply
AdChoices