Answered
Problems With Footer
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
@1552174 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
@4036250 {
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
AdChoices