SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with "DIV" width

    Hey-

    I want my div box to act like a table without a set width. For example:
    Code:
    <table>
    <tr><td>short</td></tr>
    <tr><td>medium medium</td></tr>
    <tr><td>long long long long long long</td></tr>
    </table>
    The table will be as small in width as it possibly can. But if you don't set the width of a DIV, it stretches as wide as it can. How can I make it not stretch without setting a width?

    Thanks!

    BTW, here's the code that I'm working with:

    HTML
    Code:
    <div class="menu">
    <p class="menu"><a href="html.html">html</a></p>
    <p class="menu"><a href="html.html">html</a></p>
    <p class="menu"><a href="html.html">html</a></p>
    <p class="menu"><a href="html.html">html</a></p>
    </div>
    CSS
    Code:
    .menu {
    border:1px solid #000000;
    margin: 0px 10px 0px 0px;
    width: 100px;
    }
    
    p.menu {
    margin:0px 0px 0px 0px;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    border: 0; }
    
    .menu a {
    padding: 4px 12px 4px 6px;
    background-color: #FFC448;
    color: #000000;
    border-top: #FFE6B0 1px solid;
    border-bottom: #E69B00 1px solid;
    text-decoration: none;
    display: block; }
    
    .menu a:hover {
    background-color: #FFA448;
    color: #FFFFFF;
    border-top: #FFC448 1px solid;
    border-bottom: #F97C00 1px solid;
    text-decoration: none; }
    Thanks!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    Alt+F4= User Control ;-) rabmurdy's Avatar
    Join Date
    Mar 2002
    Location
    Ecosse
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might be missing the point, but would it not be easy enough to have a transparent gif in there to set the width ?

    Hopefuly someone will come along with the real answer...


    Rab
    "If something is too hard,give it up. The moral my boy is too never try anything"
    "Just because I don't care doesn't mean I don't understand"

  3. #3
    SitePoint Member
    Join Date
    Apr 2001
    Location
    glasgow
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    making .menu a #menu, this here slight adaptation works (in IE anyway). i've removed your fixed width. hope this helps:

    css now:

    #menu {
    float:left;
    border:1px solid #000000;
    margin: 0px 10px 0px 0px;
    }

    #menu p{
    margin:0px 0px 0px 0px;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    border: 0 }

    #menu a {
    padding: 4px 12px 4px 6px;
    background-color: #FFC448;
    color: #000000;
    border-top: #FFE6B0 1px solid;
    border-bottom: #E69B00 1px solid;
    text-decoration: none;
    display: block }

    #menu a:hover {
    background-color: #FFA448;
    color: #FFFFFF;
    border-top: #FFC448 1px solid;
    border-bottom: #F97C00 1px solid;
    text-decoration: none }


    html now:

    <div id="menu">
    <p><a href="html.html">html</a></p>
    <p><a href="html.html">html</a></p>
    <p><a href="html.html">html</a></p>
    <p><a href="html.html">html</a></p>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •