Are the widths of <span> tags included in total width calculations for <ul> tags?

HTML & CSS
1

.
Hello;

I have got a <ul> list tag. Inside the tag I am using float left <li> list item tags. Inside each <li> tag I have got <span> tags.

Using float left the sum total left to right of the margins, borders, paddings, and contents for both list item tags must equal exactly the width of the <ul> tag in order for both list items to fit on the same line.

If the sum total width of both <li> tags exceed the width of the <ul> tag the last <li> tag will break onto a second line.

For example, if I decrease the width of the <ul> tag below from 94px to 93px the loss <li> tag will break and go onto a second line.

If I increase the width of the <ul> tag from 94px to 95px or more there is a gap between the loss <li> tag and the right border of the <ul> tag.

My question is about the widths of the <span> tags.

I can increase the width of the <span> tags below from 30px to 50px and the <span> tag exceeds the width of the <li> tag. The two <li> tags still stay on one line.

I can increase the border sizes of the <span> tags from 1px to 5px and the <li> tags still stay on one line (which is good - I want both <li> tags to be on the same line).

However, just testing, if I increase the borders to 25px it causes the last <li> loss tag to break to a second line.

Question 1: Am I supposed to somehow calculate the width of the <span> tag borders and include them into the width of the <ul> tag?

Question 2: Why is it that increasing the width of the <span> tags from 30px to 50px and the width of the <span> tag borders from 1px to 5px do not cause the last <li> tag to break to the second line; but in testing increasing the <span> tag border width to 25px it causes the second <li> tag to break to the second line?

Thanks.

Calculate width for list item(s) left to right:

margin + border + padding + width + padding + border + margin = width

Win:  0px + 1px + 0px + 40px + 0px + 1px + 5px = 47px
Loss: 0px + 1px + 0px + 40px + 0px + 1px + 5px = 47px

List width: 47px + 47px = 94px



ul.Legend
{
padding: 0px;
margin: 0px;
list-style-type: none;
border: 1px solid black;
width: 94px;
overflow: auto;
clear: both;
}

li.Win
{
margin: 0px 0px 0px 5px;
padding: 5px 0px 5px 0px;
border: 1px solid lightgrey;
float: left;
width: 40px;
}

li.Loss
{
margin: 0px 0px 0px 5px;
padding: 4px 0px 4px 0px;
border: 1px solid darkgrey;
float: left;
width: 40px;
}



span.Win
{
border: 1px dashed black;
background-color: tan;
display: inline-block;
width: 30px;
}

span.Loss
{
border: 1px dashed black;
background-color: grey;
display: inline-block;
width: 30px;
}



<ul class="Legend">

	<li class="Win"><span class="Win">Win</span></li>

	<li class="Loss"><span class="Loss">Loss</span></li>

</ul>
2

Really? Using what browser? When I try it, making the <span>s wider than the <li> pushes the second <li> onto a new row.

3

Stevie D;

Thanks for responding to my question. I’m using the FireFox browser version 13.0.

I just tried the code using the Internet Explorer. It did just as you said. I increased the width of the Win <span> tag to 50px, which is 10px more than the <li> tag that encloses it, and the second <span> tag broke to the second line.

Both <li> items stay on the same line in the FireFox browser.

I may have figured out the answer(s) to my questions. So then is it accurate to say that when calculating the total width for the <ul> tag I must add in the width of the borders, padding, and margin with the <span> tags?

Thanks again.

4

So then is it accurate to say that when calculating the total width for the <ul> tag I must add in the width of the borders, padding, and margin with the <span> tags?

The total calc’ed width of an element is the sum of its horizontal borders, padding, width, and if applicable margins. IE can screw this up if you do not use a strict doctype ( it includes the padding as part of the width).

Why are you setting a width on a span??? perhaps you could simplify your code and solve your problem at the same time

I dont have IE available at the moment… but see if this works for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  	<head>
  		<title></title>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type='text/css'>
  .Legend{
    padding: 0;
    margin: 0;
  	border: 1px solid #000;
    list-style: none;
    width:94px;
    overflow:auto;
    clear:both;	
  	}
 .Legend li{
margin-left: 5px;
padding: 5px 0px ;
border: 1px solid ;
float: left;
width: 40px;
}
li.Win {border-color:darkgrey}
li.Loss {border-color:lightgrey}
.Legend span {border: 1px dashed black;display: block; }
.Win span{background-color: tan;}
.Loss span{background-color: grey;}

  </style>
  	</head>
  	<body>


<ul class="Legend">
    <li class="Win"><span>Win</span></li>
    <li class="Loss"><span>Loss asddaas </span></li>
</ul> 
  	</body>
  </html>