html - Make two elements inside <ul> tags responsive on the same line -

i know how make 2 div's inside tags responsive, @ same time elements have stay on same line. right right div going below first one. here jsfiddle example:

http://jsfiddle.net/vladicorp/vzssp/3/

the code:

<div id="design01"> <div id="titledesign01">title</div>                 <ul>                 <li>                 <div id="designphoto01"><img src="http://www.emocool.com/work/01.jpg" ></div>                 </li>                 <li>                 <div id="designphoto04"><img src="http://www.emocool.com/work/03.jpg" ></div>                 </li>                                 </ul></div> 

the css:

   #design01 {   display: block;   position: relative;   max-width: 100%;   margin: 0 auto;   float:left;    } #design01 ul {     float:left;     overflow:hidden;     max-width: 100%;     height:100%;     list-style:none;     padding:0px;     padding:0px;     } #design01 ul li{     float:left;     position:relative;     padding:0px; } #titledesign01 {      max-width: 100%;     font: 18px/20px "helvbold", helvetica, arial, sans-serif;     text-transform: uppercase;     color:#fff;     margin-left:20px;        } #designphoto04 {     display: block;     max-width: 100%;  } #designphoto04 img{      max-width: 100%      }  #designphoto01 {      display: block;     max-width: 100%;  }  #designphoto01 img{      max-width: 100%    } 

you close. need add css li's make work:

width:50%; margin:0; 

these values can adjusted. basically, telling css let elements 50% of ul width. if set more this, wrap. alternately, can set 1 40% , other 60%, 2 values have add 100% (or less if add padding, margin, or border).

fiddle