CODEWITHSUNDEEP
htmlcsshtml-lists
Ron
Ron

Reputation: 287

CSS align UL side by side

I have two unordered lists whose elements are side by side. I am having a hard time figure out how to put these lists side by side. Right now it appears like:

Add 1 Add 2

Add 3 Add 4 Add 5

I need it to looks like this: Add 1 Add 2 Add 3 Add 4 Add 5

Here is my css and HTML including a fiddle I have been using. ul,ol { list-style:none; }

.product-view .sharing-links a {
  background-image: url(../images/icon_sprite.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.product-essential {margin-bottom:0px; padding-bottom:25px;}
.product-view .product-essential .product-shop .nobr {margin-bottom:5px; display:inline-block;}

.product-view { margin-bottom:20px;}
.product-view .product-shop {float:right;width:100%;}

.add-to-box { background-color: #F4F4F4; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; }
.add-to-box .add-to-links  { float: left; }

.product-view .add-to-links { margin-left:25px !important; padding: 15px 0 5px;  border-top: 1px solid #DBDBDB; width: 100%; float: left; }
.product-view .sharing-links { float: left; }

.product-view .add-to-links li {margin-bottom: 8px; display:inline-block; }
.product-view .add-to-links li a:before { font-size: 14px; margin-right: 15px; color:#2E8AB8; }
.product-view .add-to-links li .link-wishlist:before { }
.product-view .add-to-links li .link-compare:before { }


.product-view  .sharing-links:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .sharing-links li {
  float: left;
  padding: 0px 7px 7px;
}
.product-view .sharing-links a {
  text-indent: -9999px;
  display: block;
  width: 26px;
  height: 26px;
}
.product-view  .sharing-links a:hover {
  opacity: 0.8;
}
.product-view .sharing-links a.link-email-friend {
  background-position: 0px -322px;
}
.product-view  .sharing-links a.link-facebook {
  background-position: 0px -425px;
}
.product-view  .sharing-links a.link-twitter {
  background-position: 0px -372px;
}

<div class="product-view">
    <div class="product-essential">
        <div class="product-shop">
            <div class="add-to-box">
                <ul class="add-to-links">
                    <li>Add 1</li>
                    <li>Add 2</li>
                </ul>

                <ul class="sharing-links">
                    <li>Add 3</li>
                    <li>Add 4</li>
                    <li>Add 5</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/23y6o7dj/

Thanks for any help! Im sure its something obvious :/

Upvotes: 1

Views: 1235

Answers (1)

cнŝdk
cнŝdk

Reputation: 32175

You just need to change the value of width:100% to width:auto and remove the padding: 15px 0 5px; proprety from the .product-view .add-to-links CSS style:

.product-view .add-to-links { 
     margin-left:25px !important;  
     border-top: 1px solid #DBDBDB; 
     width: auto; 
     float: left; 
}

This is the working Fiddle.

Upvotes: 2

Related Questions