Menu
I'm trying to make a website that has footer menu. And i'm using container in my content since i don't know how to make it center. When I tried to apply the footer menu without using container. The background-color of the footer expand upward where the last div without container. And the text won't center.
Sample
It become like this when I use .mainbar:float:left; and .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar{
float: left;
width: 736px;
}
.sidebar{
float: right;
width: 214px;
}
#fnav{
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
}
#fnav ul{
display: flex;
list-style: none;
margin: auto;
width: 1000px;
}
#fnav ul li.fmenu-item {
flex-grow: 1;
padding: 10px 0 10px 0;
}
#fnav ul li.fmenu-item a{
color: #262d33;
text-decoration: none;
}
.copyright{
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
}
263
hope this is help you footer style
footer {
float: right;
width: 100%;
}
Apply this style too, which resolve your problem.
footer {
float: left;
width: 100%;
}
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar {
min-height: 450px;
background: #ddd;
}
.side-bar {
min-height: 450px;
background: #eee;
}
footer {
background: #ccc;
margin-top: 15px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
