Member Avatar

http://jsfiddle.net/jLFTq/21/
Hi friends,
I've following code on the link given above.. My problem is that, I want the width of div (.char) containing alphabets as equal to the width of main div (#right). please take a look at the link above, hope you understand my problem.

Member Avatar

What problem??? The divs are clearly assigned the same width in the sample code given.

#right{
float: right;
border: 1px solid #85004B;
width:182px;
}

and

#right .char{
background:#C9F;
width:182px;
}

Edited by drjohn: n/a
Member Avatar

yes but the div containing alphabets is not touching the border of outer di. there is a distance between right side border of outer div and alphabets containing div i want no distance between them.

Member Avatar

Then just make the div smaller, a few pixels at a time!!!

Either make both smaller, or, probably a better initial start make the .chart smaller, in case #right is used elsewhere on the site and it's width matters.
Can't you work this out of yourself?

Or apply padding inside .char, again only a few pixels at a time, until it fits the way you want.

These are not difficult problems to solve at all for any web developer. Or are you copying code and don't normally build web sites, so you don't understand what the code does? Blindly copying code doesn't teach you anything.

Member Avatar

This is closer to what you are looking for

#right{ 
    float: right;
    border: 1px solid #85004B;
    width:182px;
    text-align: center;
}
#right .heading{
    font-size: 9pt;
    font-weight:bold;
    padding:2px 0px 2px 3px;
    background:#85004B;
    color:#fff;
}

#right ul.char {
    list-style-type:none;
    margin: 0px 0px 0px 1px;
    width: 100%;
}
#right ul.char li{
    width:14px;
    display:inline;
    font-size:11pt;
    font-weight:700;
    margin:0px 1px 1px 0px;
    background-color:#C9F;
    overflow:hidden;
}
#right .left{
    float:left;
}