Automatic width

HTML & CSS
1

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

Hi,

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


.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

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

Make sure to remve float: left:

.tabs li {
list-style: none;
[COLOR="#FF0000"]float: left;[/COLOR]
}
5

Perfect.

Works great.

Thanks for your help.

6

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.