CODEWITHSUNDEEP
csswidth
user379888
user379888

Reputation:

Percentage width in css

I have developed a html css code. It works perfect on all browsers but when I am uploading it to the website's sidebar it is not displaying properly.

<p>
 <ul style="display:inline; list-style-type: none;">
 <li style="
background:none repeat scroll 0 0 rgba(255, 57, 65, 0.9) !important;
 text-decoration:none;

position: relative;
margin: 0 0 -6px 0;

padding: 15px 15px 15px 15px;

list-style:none;

width: 100%;

border: 0;

 ">
 <a style="color: #000000; text-decoration: none;text-align:center;" href="#">F Awan</a></li>

 <li style="background:none repeat scroll 0 0 rgba(255, 103, 57, 0.9) !important;padding:5px;text-decoration:none;width:95%;text-align:right;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;



    border: 0;

 ">(IT Consultant, UK) </li> 
 <li style="background:none repeat scroll 0 0 rgba(255, 218, 57, 0.9) !important;padding:5px;text-decoration:none;color: #000000; text-decoration: none;


 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;


    width: 90%;

    border: 0;


 "><a style="color: #000000; text-decoration: none;text-align:center;" href="#">FUddin</a> </li> 
 <li style="background:none repeat scroll 0 0 rgba(193, 241, 78, 0.9) !important;padding:5px;text-decoration:none;width:85%;text-align:right;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;



    border: 0;

 "> (Systems Engineer, Pakistan)</li> 


 <li style="
 background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;;padding:5px;
 text-decoration:none;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;

    width: 80%;

    border: 0;
    ">

 <a style="color: #000000; text-decoration: none; href="mailto:[email protected]?Subject=Hello%20again">Interact with Us </a>

 </li>
</ul>
</p>

Here is the JSFiddle.

Upvotes: 0

Views: 595

Answers (5)

de.vina
de.vina

Reputation: 116

Something like this? http://jsfiddle.net/pwvV5/

I inserted an id for the ul so it won't mess up with other ul. Then added width for it in CSS so it won't overflow.

Upvotes: 1

Robert
Robert

Reputation: 58

Here's an updated jsfiddle for you.

http://jsfiddle.net/RN2Hy/8/

Upvotes: 1

hungerstar
hungerstar

Reputation: 21675

You could try CSS3 box-sizing.

http://www.w3.org/TR/css3-ui/#box-sizing0

Upvotes: 1

sandeep
sandeep

Reputation: 92803

It's better if you remove width & use margin-right instead of it. Write like this:

CSS

.red{
background:rgba(255, 57, 65, 0.9);
}
.orange{
background:rgba(255, 103, 57, 0.9);
    text-align:right;
    margin-right:5%;
}
.yellow{
background:rgba(255, 218, 57, 0.9);
    margin-right:10%;
}
.green{
background:rgba(193, 241, 78, 0.9);
    text-align:right;
    margin-right:15%;
}

.blue{
background:rgba(29, 195, 246, 0.9);
    margin-right:20%;
}

Check this http://jsfiddle.net/RN2Hy/1/

Upvotes: 2

Zeta
Zeta

Reputation: 105876

This is a common misconception of the box model. If you specify width:100% and add a padding the overall size will be more than 100%.

To prevent this behavior nest another item (e.g. <div>) in your list items and use a margin on these.

You could also use box-sizing: border-box;, however this is not supported by all browser.

See also:

Upvotes: 1

Related Questions