Question

I have some text I want to be positioned inside a holder as follows:

[...........]
[.the]......]
[.[title]...]
[...........]

The holder needs to have a black background and I’d like the text to have a white background and black text. I am using the following structure:

<div class="holder">
    <div class="title">
        <span>The</span>
        <span>Title</span>
    </div>
</div>

I am not sure if it’s correct or not, but I am using the <span>s over <p>s becuase the p was going full width of the holder whereas the width of the span sizes itself to the text itself.

I want each span on a new line and this is where it is breaking atm. Currently the spans just sit on the same line together. I tried adding a <br> after the first span but that doesn’t fix it either, this time the second span is slightly below but positioned to the right.

The css I am using:

.holder {
    width: 200px;
    height: 300px;
}

.title span {
    background: #fff;
    color: #000;
    float: left;
    display: block;
    padding: 2px;
}

Answer 1

You shouldn’t use float for that.
Moreover, span was created to span text in the middle of the line.

Is that what you were trying to do: http://jsfiddle.net/Rhjtv/ ?