Floating And Clearing In Ie7

Currently I'm trying to implement a HTML 5 site. On one of the pages I I have the following HTML structure

• Solution 1:

  Edit: removed old superfluous stuff

  Option 1, this css worked:

  .catList {
  overflow: hidden;
  background: sandybrown;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 1000px;
  overflow:auto;
  }
  .catListli {
  min-height:1px;
  float: left;
  width: 249px;
  margin: 01px0px0;
  background: orchid;
  min-height:1px;
  }
  .catListli.rowStart {
  clear: both; 
  }
  
  .catListli.spacer{
  font-size:1px;
  line-height:1px;
  text-height:1px;
  height:1px;
  margin:0;
  padding:0;
  width:1000px;
  background:#000;
  float:none;
  clear:both;
  }
  

  html:

  <ulclass="catList"><liclass="cat rowStart"><h4>Title</h4><pclass="shortDesc">Consetetur sadipscing elitr...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="cat rowEnd"><h4>Dozer Bags</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="spacer"></li><liclass="cat rowStart"><h4>Title</h4><pclass="shortDesc">Consetetur sadipscing elitr...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">Bobilicius Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="cat rowEnd"><h4>Dozer Bags</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="cat rowStart"><h4>Title</h4><pclass="shortDesc">Consetetur sadipscing elitr</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">Sanctus sea sed takimata ut vero voluptua</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p></li><liclass="cat rowEnd"><h4>Dozer Bags</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p></li></ul>

  Option 2: Nested Lists

  CSS:

  .catList {
      background: sandybrown;
      margin: 0;
      padding: 0;
      list-style: none;
      width: 1000px;
  }
  .catListli.catRowli {
      float: left;
      width: 249px;
      margin: 01px1px0;
      background: orchid;
      display:inline-block;
      }
  
  .catListli.catRow {
      float:left;
      width:1000px;
      clear:left;
      min-height:1px;
  }
  

  html:

  <ulclass="catList"><liclass="catRow"><ul><liclass="cat"><h4>Title</h4><pclass="shortDesc">Consetetur sadipscing elitr...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="cat"><h4>Dozer Bags</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li></ul></li><liclass="catRow"><ul><liclass="cat"><h4>Title</h4><pclass="shortDesc">Consetetur sadipscing elitr...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p></li><liclass="cat"><h4>Title</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li><liclass="cat"><h4>Dozer Bags</h4><pclass="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p></li></ul></li></ul>

Share