CODEWITHSUNDEEP
css
Ryan S
Ryan S

Reputation: 3268

CSS Sidebar Alignment

I have a problem with the CSS of a Sidebar I have. I need to make it auto aligned, at the moment they are coming on top of each other. I couldn't post an image yet, but maybe some of you can still help.

This is my CSS

#sideBar
{
position: relative;
padding: 0px;
margin: 0px;
height: 1020px;
background-color: #bfb48c;
width: 236px;
top: -10px;
}
#sideBar ul
{
position: relative;
display: block;
width: 222px;
height: 45px;
padding-top: 13px;
padding-left: 15px;
font-weight: 400;
background-image:url(../images/ulBG.png);
background-repeat: no-repeat;
color: #67614e;
margin: 17px;
 }

 #sideBar li
 {
position: relative;
display: block;
width: 201px;
height: 20px !important;
padding-left: 3px;
padding-bottom: 2px;
list-style-type:none;
border: thin;
border-bottom-style: solid;
color: #4c4a44;
 }

The UL seems to be doing it's job, but the Li's no.

This is the HTML

        <div id="sideBar">
            <img src="images/sideBarImage.png" width="236" height="241" alt=""/>
                <h1 id="productsSideBar"> PRODUCTS </h1>
                <ul id="acanaDog"> 
                    <h2> ACANA DOG </h2>
                    <li> <a href="#"> Acana Wild Prairie </a> </li>
                    <li> Acana Pacifica </li>
                    <li> Acana Grasslands </li>
                    <li> Acana Ranchlands </li>
                </ul>
                <ul id="acanaCat">
                    <h2> ACANA CAT </h2>
                    <li> Acana Wild Prairie </li>
                    <li> Acana Pacifica </li>
                    <li> Acana Grasslands </li>
                </ul>
                <ul id="orijenCat">
                    <h2> Orijen Cat </h2>
                    <li> Orijen Cat &amp; Kitten </li>
                    <li> Orijen 6-Fish For Cats </li>
                </ul>
                <ul id="orijenDog">
                    <h2> Orijen Dog </h2>
                    <li> Orijen Puppy </li>
                    <li> Orijen Puppy Large </li>
                    <li> Orijen Adult </li>
                    <li> Orijen 6 Fish Dog </li>
                    <li> Orijen Regional Red </li>
                    <li> Orijen Senior Dog </li>
                </ul>

This is the JS Fiddle, without images ofc. http://jsfiddle.net/KE4AL/

Upvotes: 0

Views: 1030

Answers (2)

Alex
Alex

Reputation: 7374

Remove all of your relative positioning and use negative margins instead. Relative positioning moves the element relative to itself, it doesn't actually move itself as margins do.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

Just remove from #sideBar ul the rule height: 45px.

See: http://jsfiddle.net/KE4AL/1/

Seems suspiciously simple..

Upvotes: 1

Related Questions