Search code examples
csshtmlalignmenthtml-lists

Aligning two UL's to same baseline with CSS

Trying to get two UL's to align to a single baseline, while having one UL flush left and the other UL flush right.

Currently, the UL's do not align and appear like this: http://imgur.com/EXzy0Uk

How do I get the two UL's to share the same baseline?

CSS

#footer ul,
#footer li,
#footer span,
#footer a {
    margin: 0;
    padding: 0;
    position: relative;
}
#footer {
    list-style-type: none;
    padding: 0;
    margin-left: 21px;
    margin-right: 20px;
    text-decoration: none;
}
#footer a{
    text-decoration: none;
    padding: 0 7px;
    color: #777;
}
#footer li {
    display: inline;
}
#footer li > a {
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    color: #777;
}
#footer li:hover a {
  color: #71979f;
}

#social ul,
#social li,
#social span,
#social a {
    margin: 0;
    padding: 0;
    position: relative;
}
#social {
    margin: 0 31px 0 0; 
    padding: 0; 
    height: 15px;
}
#social li {
    margin: 0 8px 0 0; 
    padding: 0; 
    list-style-type: none;  
    height: 15px;
    float: right;
}
#social li.last{
    margin-right:0px;
}
#social li a {
    background-image: url("../images/icon_social.png");
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    display: block;
    height: 15px;
    width: 18px;
}
#social li#social-twitter a{
    background-position: 0px 0px;
}
#social li#social-twitter a:hover {
    background-position: 0px -15px;
}
#social li#social-youtube a{
    background-position: -18px top;
}
#social li#social-youtube a:hover {
    background-position: -18px -15px;
}
#social span {
    display: inline;
    font-size: 11px;
    color: #777;
}

HTML

<div>
<ul id="social">
    <li id="social-youtube" class="last"><a href="#"></a></li>
    <li id="social-twitter"><a href="#"></a></li>
    <li id="social-text"><span>STAY CONNECTED</span></li>
</ul>
<ul id="footer">
    <li><a href='#'><span>Blog</span></a></li>
    <li><a href='#'><span>Contact</span></a></li>
    <li><a href='#'><span>Knowledgebase</span></a></li>
    <li><a href='#'><span>Site Map</span></a></li>
    <li><a href='#'><span>Privacy/Legal</span></a></li>
    <li><a href='#'><span>Mailing List</span></a></li>
</ul>
</div>
Solution

  • ul tags are block elements you may need to float them and assign the same height:

    #social {
  float:right;
  height:20px;
}
#footer {
  float:left;
  height:20px;
}

    The demo http://jsfiddle.net/CvLt9/2/