在CSS中使用不同样式的文本具有相同的宽度

Question

I was wondering if there was a way to make an html element with the same text in it but in different styles take up the same amount of space without giving it a fixed width.

Here's a jsfiddle of what I'm talking about.

I want both divs to have the same width despite having slightly different styles. The text can change so I can't give the div a fixed width or use fixed padding or margins to achieve this either. Any ideas?

HTML:

<div class="normal">Lorem ipsum dolor sit amet.</div><br />
<div class="disabled">Lorem ipsum dolor sit amet.</div>

CSS:

div {
    padding:5px;
    display:inline-block;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

EDIT: The two different styled divs will not be next to each other in its application. They're the same div, I just want the size of the div not to change when the different style is applied. Here's a better example: http://jsfiddle.net/cbargren/4b8KQ/3/

Answer 1

Wrap them in a div with display: inline-block , and remove display: inline-block from the child div s.

http://jsfiddle.net/thirtydot/4b8KQ/1/

HTML:

<div class="foo">
    <div class="normal">Lorem ipsum dolor sit amet.</div>
    <div class="disabled">Lorem ipsum dolor sit amet.</div>
</div>

CSS:

.foo {
    display: inline-block;
}
.foo div {
    padding:5px;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}