How to change the width of css tab according to length of alphabet?

Tags: html,css

Problem :

It's a tab menu of css. I tried to write a long name in one tab so its out its position you can check the images on following links:

This is the orignal one:

When I changed in css enter image description here

.tabs {width:100%;overflow:auto;}
.tabs li {float:left;padding-right:1px;}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/;position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/;position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}

and this is the HTML

 <ul class="tabs">
        <li><a href="#" id="changeText">inclusive Class</a></li>
        <li><a href="#" id="changeText2">inclusive Class</a></li>
        <li><a href="#" id="changeText3">inclusive Class</a></li>
        <li class="end"><a href="#" id="changeText5">inclusive Class</a></li>

Please any one help me out how to look its original bit with long text?

Solution :

the reason is that your ul (tabs) is in article.col which has a width of 267px so when you say 100% for ul width it expands only that much.

make it 1000px.

also remove the tabs a width.

    CSS Howto..

    How to center horizontally a position: absolute elment on a position: fixed container

    Magento - how to locate the location of inline css

    How to apply icons to links using css?

    How do you make 2 YouTube videos automatically play one after the other?

    How are CSS frameworks used?

    How to format an HTML table using CSS for printing?

    How to make a condition in CSS with an HTML attribute?

    How to use “Wedding text ” in Css font family?

    Wordpress nav menu images not showing up in mobile safari

    How can I force browsers to print background images in CSS?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How do I make this Javascript checkbox trigger action work like my CSS only example

    how to position a css sprite as background for another class

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to remove/add jQueryUI CSS theme from specific element?

    CSS: how to vertically and horizontally align an image?

    How do I align the list items in an
      with my


    CSS Chevron Showing Unwanted Rectangle

    css how to center this content

    How to scroll right and left by mouse scroll button

    How to split the image using Javascript + CSS?

    How to style an add to cart

    How can i dynamically change title of input type file?

    How to put a css tag in an element if another has this element [closed]

    How to get CSS font-weight to display?

    How can I show a element on my site when hovered with only JS?

    How do you resize a container between two others?

    How to force font-weight on all children, but respect the nested depth

    How to remove the css class

    How does the padding work in responsive CSS square?