SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Automatic width

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Automatic width

    I have this:

    http://page-test.co.uk/tabs.php

    Is it possible to have the tabs so they fit the complete width of the outer box (the bottom one being slighter bigger than the top one)?

    Obviously this could be manually done, but I would like to have it so it automatically fills the width regardless of the width and regardless of the number of tabs (so no manual work needed every time I set one of these up).

    Thanks for any help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For IE8+ you could change the ul and list styles to this:

    Code:
    .tabs ul{
    	display:table;
    	width:100%;
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .tabs li {
    	display:table-cell;
    }
    For IE7 and under you would need to float them as you had them before.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks, but I can't get it to work.

    I've put the code in exactly (as the http://page-test.co.uk/tabs.php is now) and also I've moved things around, but it doesn't seem to work.

    I get the idea what you're saying (table), but I just can't get it to work.

    Thanks.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Make sure to remve float: left:

    Code:
    .tabs li {
    list-style: none;
    float: left;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect.

    Works great.

    Thanks for your help.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Hi,

    Thanks, but I can't get it to work.

    I've put the code in exactly (as the http://page-test.co.uk/tabs.php is now) and also I've moved things around, but it doesn't seem to work.

    I get the idea what you're saying (table), but I just can't get it to work.

    Thanks.
    Yes I meant for you to remove your original styles for those rules I gave but didn't make it clear.

    Note that for IE7 and under you will need to use conditional comments and float the list items instead.


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
  •