Skip to content Skip to sidebar Skip to footer
Home / Css / Css Float / Html / Internet Explorer 7

Floating And Clearing In IE7

Post a Comment
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;
}
.catList li {
min-height:1px;
float: left;
width: 249px;
margin: 0 1px 0px 0;
background: orchid;
min-height:1px;
}
.catList li.rowStart {
clear: both; 
}

.catList li.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:

    <ul class="catList">
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="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>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="spacer"></li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="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>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="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;
}
.catList li.catRow li {
    float: left;
    width: 249px;
    margin: 0 1px 1px 0;
    background: orchid;
    display:inline-block;
    }

.catList li.catRow {
    float:left;
    width:1000px;
    clear:left;
    min-height:1px;
}

    html:

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

You may like these posts

Post a Comment for "Floating And Clearing In IE7"