Eric
Eric

Reputation: 2231

Full-width background color inside a div

I've got a simple div that holds lines of text that have an alternating background color. The first line is green, second is red, third is green and so on. This div is 450px wide and most of the lines of text don't span the whole length of the div, but I'd like the background color to span the full 450px from left to right.

I've tried adding width: 450px to the span tag for the text, but still can't get it to go across all the way. Any suggestions?

Upvotes: 1

Views: 5870

Answers (2)

Simon Dorociak
Simon Dorociak

Reputation: 33515

If you set display: block on your span elements, the background color should span the full width of its container.

When you use display: block property for span elements they will be shown as a block, that is, the line break at the end.

Upvotes: 5

jacktheripper
jacktheripper

Reputation: 14259

Try setting display: block on the span element

See this jsFiddle example

Upvotes: 1

Related Questions