0

I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):

#controller {
    width: 250px;
    float: left;

    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.controller-row {
    background-color: blue;
}

.controller-row-number {
    background-color: yellow;
    width: 60px;
    text-align: right;
    padding: 0 15px 0 0;
}

.controller-row-name {
    background-color: orange;
    width: 150px;
    text-align: left;
    padding: 0 0 0 0;
}

Are being ignored in the following code:

<div id="controller">
    <div class="controller-row">
        <span class="controller-row-number">1</span>
        <span class="controller-row-name">First Name</span>
    </div>

    <div class="controller-row">
        <span class="controller-row-number">2</span>
        <span class="controller-row-name">Second Name</span>
    </div>
</div>

I have a JSFiddle located here:

http://jsfiddle.net/WZFJD

Can anyone point me to the correct edits to make, so that the styles are adhered?

Thanks!

3 Answers 3

4

display: inline-block; to the rescue !

Fiddle

.controller-row-number {
    background-color: yellow;
    width: 60px;
    display: inline-block;
    text-align: right;
    padding: 0 15px 0 0;
}

.controller-row-name {
    background-color: orange;
    width: 150px;
    display: inline-block;
    text-align: left;
    padding: 0 0 0 0;
}

span elements are by default inline, so you have to make them block, or inline-block if you want your width rule to be applied, otherwise they just take up enough width to fit. The width and height of display: inline; elems cannot be set as you tried to do. Tho you can fake the height using line-height.

1
  • As an added explanation: <span> is an inline element to contain text, thus can't be given a height or width and some other styling you are used to for divs. display:inline-block fixes this. Apr 22, 2014 at 22:53
0

Spans are displayed as inline by default, if you want to specify a width you'll have to set display: inline-block.

0

width cannot be applied to an inline element like a <span>. You will have to also style your spans of class controller-row-number and controller-row-name to be display: inline-block

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.