Make the background of a span inside of a div be full size using CSS

Question

I am trying to make a gameserver console for our gameserver control panel. Now a small styling issue I have is that every odd line needs to a have a slightly brighter background.

Instead of this:

I want this:

Code:

 showLoading('gameTerminal_content', '32', 'html', ''); 

 .gameTerminal_content_outputLine:nth-of-type(odd) { width:500px; background: #4C3C33; } 

  <div class="well-md" id="gameTerminal" style="background: #2A211C; height: 300px; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace"> <p> <span id="gameTerminal_content" style="color:#80FF80; width: 100%;"> <span class="gameTerminal_content_outputLine">Line 1</span><br /><br /> <span class="gameTerminal_content_outputLine">Line 2</span><br /><br /> <span class="gameTerminal_content_outputLine">Line 3</span><br /><br /> </span> </p> <!--<input type="text" name="gameTerminal_input" style="background: #4C3C33; float: left; color: #FFFFFF; width: 90%; border:none; position: absolute; bottom: 0; outline: none;" />--> <div id="gameTerminal_scrollHeigth"></div> </div> 

Answer 1

Couldn't you just add style that targets even lines using :nth-of-type(event) that is similar and slightly brighter than your current one which targets odd elements :

.gameTerminal_content_outputLine:nth-of-type(odd) { 
     width:500px; 
     background: #4C3C33; 
 }
.gameTerminal_content_outputLine:nth-of-type(even) { 
     width:500px; 
     background: #5D4D44; 
 }

Update

I hadn't realized you wanted to get rid of the explicit padding between each row of elements. Since the elements are <span> elements, you would want to set them to set them to display:block :

.gameTerminal_content_outputLine {
      display: block;
}

which would render the content as seen in this example and demonstrated below :

Answer 2

You want your spans to be inline blocks if you want them to take up the width of the div. Just add:

.gameTerminal_content_outputLine { display: inline-block; }

Snippet:

 showLoading('gameTerminal_content', '32', 'html', ''); 

 .gameTerminal_content_outputLine:nth-of-type(odd) { width:500px; background: #4C3C33; } .gameTerminal_content_outputLine { display: inline-block; } 

 <div class="well-md" id="gameTerminal" style="background: #2A211C; height: 300px; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace"> <p> <span id="gameTerminal_content" style="color:#80FF80; width: 100%;"> <span class="gameTerminal_content_outputLine">Line 1</span><br /><br /> <span class="gameTerminal_content_outputLine">Line 2</span><br /><br /> <span class="gameTerminal_content_outputLine">Line 3</span><br /><br /> </span> </p> <!--<input type="text" name="gameTerminal_input" style="background: #4C3C33; float: left; color: #FFFFFF; width: 90%; border:none; position: absolute; bottom: 0; outline: none;" />--> <div id="gameTerminal_scrollHeigth"></div> </div> 

Answer 3

You wants this ? (according to your pictures)

.gameTerminal_content_outputLine { display: block; width: 100%; }