Break Line

Hello,

I have an input and a span as follows:

<label for="Title">Title</label>
<input id="Title" type="text" value="" name="Title"/>
<span class="Error">Some error message</span>

I would like the span to be under the input and not on its right.
I could add "display: block" to the span.
The problem is that the span has a background color:

form span.Error {
background-color: #FFA0A0;
color: #FFFFFF;
padding: 0.2em 0.4em;
}

If I add "display: block" I will have the background color extended
100%.
I don't want to set a width because the length of the error message is
not known.

Thanks,
Miguel

In article
<5294ed1c-5249-450a-b399-235f94e6320f (AT) j12g2000vbl (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

If I add "display: block" I will have the background color extended
100%.
I don't want to set a width because the length of the error message is
not known.

Maybe you can think of a way to float and use the shrink to fit quality
of this mode.

--
dorayme

shapper wrote:

Hello,

I have an input and a span as follows:

label for="Title">Title</label
input id="Title" type="text" value="" name="Title"/
span class="Error">Some error message</span

I would like the span to be under the input and not on its right.
I could add "display: block" to the span.
The problem is that the span has a background color:

form span.Error {
background-color: #FFA0A0;
color: #FFFFFF;
padding: 0.2em 0.4em;
}

If I add "display: block" I will have the background color extended
100%.
I don't want to set a width because the length of the error message is
not known.

Why not set the input as a block and leave the span alone?

Jeff

Thanks,
Miguel

On 2009-05-06, shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I have an input and a span as follows:

label for="Title">Title</label
input id="Title" type="text" value="" name="Title"/
span class="Error">Some error message</span

I would like the span to be under the input and not on its right.
I could add "display: block" to the span.
The problem is that the span has a background color:

form span.Error {
background-color: #FFA0A0;
color: #FFFFFF;
padding: 0.2em 0.4em;
}

If I add "display: block" I will have the background color extended
100%.
I don't want to set a width because the length of the error message is
not known.

Put <br> between the input and the span or put a div around the span.

If you must have a pure-CSS solution:

form span.Error:before { content: "\000A"; white-space: nowrap }

However this is more likely not to work in IE.

Replace nowrap with pre for Firefox support.