How to Fix the Floating Sidebar
Question
I've made an HTML that shows a company's information. For now, I have the home page of the Information of the Company. The only problem I have is that the floating sidebar doesn't float quite like I intend it to. I don't know what's wrong, it doesn't float beside the texts, it just goes beneath it for some reason. I want the sidebar to look like something like this : http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
Here's my html :
<body>
<div id="header">
<div class = "logo">
<h1><center><font size = "10">Company Name</font></center></h1>
<div class="borders">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<br/>
<section>
<div id="content">
<h2>Company Bio</h2>
<h3>The information of the company.</h3>
<p>info info info info info info info info info info info info info info info info
info info info info info info info info info info info info info info info info
info info info info info info info info info info info info info info info info
info info info info info info info info info info info info info info info info
</p>
<p>info info info info info info info info info info info info info info info info
info info info info info info info info info info info info info info info info
info info info info info info info info info info info info info info info info
</p>
</div><!--end content-->
</section>
<nav>
<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!</h3>
<ul id = "subscribe">
<li><a href="#">Subscribe via RSS</a></li>
<li><a href="#">Get Email Updates</a></li>
<li><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div id="contributors">
<h3>Contributors</h3>
<ul>
<li><a href="#">Gamble</a></li>
<li><a href="#">Judgement</a></li>
</ul>
<a href="#" >Join Our Team</a>
</div>
</div><!--end sidebar-->
</nav>
<div style="clear:both"></div>
<div id="footer">
<div class="container">
<p>Copyright 2015<br />
All Rights Reserved</p>
</div><!--end footer container-->
</div><!--end footer-->
</body>
Here's my CSS :
<style>
-------------Navigation
ul#menu {
list-style: none;
padding-top: 55px;
}
ul#menu li a {
font-size: 30px;
color: Green;
text-decoration: none;
}
ul#menu li {
float: left;
padding-left: 100px;
padding-right: 75px
}
-------------Sidebar
#content {
width: 510px;
clear: left;
}
#sidebar {
float: right;
margin: 0 0 10px 10px;
background: #d4d6d3;
border: 1px solid #BEBDBD;
padding: 15px;
}
-------------Sidebar style
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li {
padding-bottom: 5px;
}
ul#subscribe li a {
font-size: 18px;
}
</style>
<style>
section {
margin-right: 300px;
float: left;
}
nav {
float: right;
width: 20%;
}
.borders{
border: 3px solid violet;
background-color: violet;
height: 35%;
margin: 0 auto;
border-radius: 25px;
box-shadow:0px 0px 25px #FFE4C4;
}
.logo{
border: 3px solid gray;
background-color: gray;
height: 25%;
}
</style>
2 answers
solution1
3 ACCPTED 2015-09-22 05:23:12
Add below css in code:
section {
margin-right: 300px;
float: left;
position: absolute;
}
solution2
0 2015-09-22 05:22:02
Hello please check html and css
ul#menu li a { font-size: 30px; color: Green; text-decoration: none; } ul#menu li { float: left; padding-left: 100px; padding-right: 75px } -------------Sidebar #content { width: 510px; clear: left; } #sidebar { float: right; margin: 0 0 10px 10px; background: #d4d6d3; border: 1px solid #BEBDBD; padding: 15px; } -------------Sidebar style #sidebar h3 { font-size: 24px; color: #044055; font-weight: normal; padding-bottom: 20px; padding-left: 15px; } #sidebar ul { list-style: none; padding-bottom: 25px; } #sidebar ul li a { font-size: 14px; color: #393838; } ul#subscribe li { padding-bottom: 5px; } ul#subscribe li a { font-size: 18px; } section { float: left; width: 70%; } nav { float: right; width: 20%; } .borders { border: 3px solid violet; background-color: violet; height: 35%; margin: 0 auto; border-radius: 25px; box-shadow:0px 0px 25px #FFE4C4; } .logo { border: 3px solid gray; background-color: gray; height: 25%; } nav.sidebar { float:right; width:20%; }
<div id="header"> <div class="logo"> <h1><center><font size = "10">Company Name</font></center></h1> <div class="borders"> <ul id="menu"> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Product</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> </div> <br/> <section id="content"> <div id=""> <h2>Company Bio</h2> <h3>The information of the company.</h3> <p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p> <p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p> </div> <!--end content--> </section> <nav id='sidebar'> <div id=""> <div id="subscribe"> <h3>Subscribe!</h3> <ul id="subscribe"> <li><a href="#">Subscribe via RSS</a> </li> <li><a href="#">Get Email Updates</a> </li> <li><a href="#">Follow us on Twitter</a> </li> </ul> </div> <div id="contributors"> <h3>Contributors</h3> <ul> <li><a href="#">Gamble</a> </li> <li><a href="#">Judgement</a> </li> </ul> <a href="#">Join Our Team</a> </div> </div> <!--end sidebar--> </nav> <div style="clear:both"></div> <div id="footer"> <div class="container"> <p>Copyright 2015 <br />All Rights Reserved</p> </div> <!--end footer container--> </div> <!--end footer-->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to fix a sidebar on scroll?
How to make floating sidebar stop floating before the footer to not overlap with it
How to fix floating footer in Chrome?
How to fix the floating issue with Clearfix
Why sticky sidebar not floating
Text Floating Out of Sidebar
My sidebar Floating at bottom
Sidebar is floating over the footer
floating sidebar Semantic Ui
Sidebar is not floating to right
Related Tags