CODEWITHSUNDEEP
htmlcss
Raios
Raios

Reputation: 65

How to Fix the Floating Sidebar

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>

Upvotes: 1

Views: 108

Answers (2)

HaRdik Kaji
HaRdik Kaji

Reputation: 425

Add below css in code:

section {
   margin-right: 300px;
   float: left;
   position: absolute;
}

Upvotes: 3

Mitul
Mitul

Reputation: 3427

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-->

Upvotes: 0

Related Questions