fmz 14

I am building a Twitter feed on this site and separating the entries with a border-bottom on the list element. However the border doesn't go all the way to the right edge of the box.

I am trying to figure out how to get it to the edge without wrecking the positioning of the text.

Here is the html:

<div id="twitter">
          <div id="tweet-mid">
            <div id="tweet-top">
              <div id="tweet-bot">
                <ul id="twitter_update_list"><li></li></ul> 
                <a id="follow" href="http://www.twitter.com/">Follow us on Twitter</a>
              </div>
            </div>
          </div>
        </div>

Here is the css:

#twitter                            { width: 284px; margin-left: 20px; }
#tweet-mid                          { width: 284px; background: url(../_images/tweet-mid.png) repeat-y left top; }
#tweet-top                          { width: 284px; background: url(../_images/tweet-top.png) no-repeat left top; }
#tweet-bot                          { width: 284px; background: url(../_images/tweet-bot.png) no-repeat left bottom; }
#twitter_update_list                {
                                width: 275px;
                                padding: 50px 0 6px 0;
                                overflow: hidden;
                                color: #4F4F51; font: normal normal bold 13px/21px "Trebuchet MS", Helvetica, sans-serif; 
                                }
#twitter_update_list li             { border-bottom: 1px solid #9f9fa0; padding: 10px 10px 10px 20px; }
#twitter_update_list li a           { color: #949598; text-decoration: none; border: none; }
a#follow                            { 
                                width: 207px;
                                height: 26px;
                                display: block;
                                text-indent: -9999px;
                                position: relative;
                                bottom: 14px;
                                left: 40px;
                                border: none;
                                background: url(../_images/btn_follow.png) no-repeat center bottom; 
                                }
a#follow:hover                      { background-position: center top; }

If I could just get the border bottom over about 10px that would wrap it up. Thanks!

1 answer

1
point
This was chosen as the best answer

put some widths on the ul and the li?

They're not extending to the full width of the containing div, only to the browsers sense of what is needed based on the content

you might need width and margin combined to align them nicely inside the borders.

Answered over 8 years ago by Tony Crockford
  • Hi Tony. Spot on. Thank you and have a nice weekend. I always appreciate your help. fmz over 8 years ago