Making text with different styles the same width in 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/

thirtydot · Accepted Answer · 2011-12-13 23:12:47Z

3

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

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;
}

answered Dec 13, 2011 at 23:12

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Sorry, I should have been a little bit more specific. 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.

thirtydot Over a year ago

If they're in completely different places, nothing in CSS can help you. You'll need to use JavaScript.

Collectives™ on Stack Overflow

Making text with different styles the same width in CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related