CODEWITHSUNDEEP
htmlcssweb
Bing
Bing

Reputation: 3

navigation wants to be left aligned

I want my navigation to be left aligned inside a div with the class aside. I want it to be aligned just like my paragraph in my div with the class aside. but the navigation is sitting more towards right side. can anyone sort it out for me?

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    }

.sidebar li{ width:100%;list-style-type: none;border-bottom:1px white solid;}
.sidebar a:link, a:visited {
    display: block;
    font-weight: bold;
    color: black;
    background-color: royalblue;
  /*    width: 120px;  */

    text-align: center;
    padding: 4px;
    text-decoration: none;
    }
.sidebar a:hover, a:active {
    background-color: #7A991A;
    color:black;
} 

.aside
    {
         float: left; 
         /* overflow:hidden; */
        width: 20%;
        margin-bottom: 1em;
        border:thin royalblue solid;
        background-color:grey;

    }

HTML code:

<div class="aside">
             <div><p>paragraph paragraph paragraph paragraph paragraph paragraphp aragrap hparag raph paragraph</p></div> 

                <ul class="sidebar">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Services</a></li>
                    <li><a href="solar.html">Solar</a></li>
                    <li><a href="#">Hendrer</a></li>
                        </ul>


                </div>

Fiddle http://jsfiddle.net/z0bwuhqr/

Upvotes: 0

Views: 42

Answers (2)

Rino Raj
Rino Raj

Reputation: 6264

Please try this

Add the following style.

.aside
    {
        width: 40%;
        margin-bottom: 1em;
        border:thin royalblue solid;
        background-color:grey;

    }
.test{
    width:50%;
    float:left;    
}
.clearFix{
    clear:both;
}

HTML:

<div class="aside">

    <div class="test">
        <ul class="sidebar" style="padding-left:5px;">
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="solar.html">Solar</a></li>
            <li><a href="#">Hendrer</a></li>
        </ul>

    </div> 
    <div class="test"><p>paragraph paragraph paragraph paragraph paragraph paragraphp aragrap hparag raph paragraph</p></div>
    <div class="clearFix"></div>
</div>

DEMO

Upvotes: 1

Umesh Aawte
Umesh Aawte

Reputation: 4690

Problem was with your class declaration for the UL Make changes in CSS

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    }

Edit this like

ul.sidebar  {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width:100%;
    }

Please refer updated fiddle http://jsfiddle.net/z0bwuhqr/2/

Upvotes: 0

Related Questions