Css- formating a list

HTML & CSS
1

hello,

i have a script that uses css to create a 2 col list. the list works if no border is added but if a border is added it turns the 2 column list into a single column list.
border-bottom:1px solid #ccc; code that works
border: 1px solid red; problem code

whats causing it to turn into a single column list when i add the boarder?


<!DOCTYPE html>
<html>
	<head>
		<style>
				ul{ width:660px;   overflow:hidden;  }
				li{ line-height:30px; /*border-bottom:1px solid #ccc; */ border: 1px solid red; float: left;  display:inline; }
		  #test li{ width:50%; }
		</style>
		
	</head>
	<body>
		<ul id="test">
  			<li>Red</li>
  			<li>Blue</li>
  			<li>Green</li>
 			<li>White</li>
  			<li>Blacky</li>
  			<li>yellow</li>
 			<li>Red</li>
  			<li>Blue</li>
  			<li>Green</li>
 			<li>White</li>
  			<li>Blacky</li>
  			<li>yellow</li>
  			<li>Red</li>
  			<li>Blue</li>
  			<li>Green</li>
 			<li>White</li>
 		</ul>
	</body>
</html>
2

Your list items are assigned a width of 50%. Two columns = 100%. Add a border and the total width of two columns exceeds 100%, thus the items wrap to a single column.

An easy way to avoid the heavy math is to add the box-sizing property to your CSS (which redefines the box model to include the border in the width):


*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

3

Another solution to consider is not only to reduce the width from 50% to 49% but also to set border:0 and use outline.


<!DOCTYPE html>  
<html> 
  <head> 
    <style> 
        ul{ width:660px;  overflow:hidden;  }
        li{ line-height:30px; /*border-bottom:1px solid #ccc; */ 
            border: 1px solid red; 
            float: left;  display:inline;}
      #width-49 li{ width:49%; }
      #width-50 li{ width:50%; border:0; outline: 1px solid blue;}
      h5 {float:left;}
    </style> 
    
  </head> 
  <body> 
    <h5>width-49</h5>
    <ul id="width-49">  
        <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
        <li>Blacky</li> 
        <li>yellow</li> 
      <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
        <li>Blacky</li> 
        <li>yellow</li> 
        <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
    </ul> 


    <h5>width-50</h5>
    <ul id="width-50">  
        <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
        <li>Blacky</li> 
        <li>yellow</li> 
      <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
        <li>Blacky</li> 
        <li>yellow</li> 
        <li>Red</li> 
        <li>Blue</li> 
        <li>Green</li> 
      <li>White</li> 
    </ul> 
  </body> 
</html>

Output using a Secret Gist:

4

An old way ( read very backwards compatible) is to add the extra space you would need for the borders as padding-left to the container. then use negative margin to suck the elements into place.

				ul{ width:300px;   overflow:hidden; ; padding-left:2px; outline:1px solid}
				li{ line-height:30px; /*border-bottom:1px solid #ccc; */ border: 1px solid red; float: left;  display:inline; margin-left:-2px }
		  #test li{ width:50%; }
5

Thanks everybody. love the replies I got back…thanks again.