IE 6/7 float height issue

I have 6 li elements that are floated to appear to be in a 2x3 grid:

1 2 3
4 5 6

Looks fine in everything except IE 6/7, there it looks like:

1 2 3
4   5
  6

The CSS I have is:

ul {
    margin: 0;
    padding: 0;
    width: 900px;
    overflow: hidden;
}

li {
    list-style: none;
    width: 278px;
    float: left;
    margin-left: 12px;
    line-height: 1.6em;
    padding-bottom: 20px;
}

Items 1 and 4 have these styles on them:

li.row_start {
    margin-left: 0;
    clear: both;
}

The problem (I'm guessing) is that the content in the li containers can have a variable height depending on the content inside. So in the example, item 2 would have a larger height than 1 and 3 so when item 5 is trying to float left, it is hitting the height/padding of item 2.

Answers


Your guess is right on. The only real way to ensure that you get a layout like you want is to set the height on your items as well.


Need Your Help

Retrieve a list of tree paths

c# linq tree

I currently have a tree and i am using the code found here Functionally traversing a tree in C# to get the paths in my tree. The thing is, this code currently returns a list of each path in my tree...

Reference a library project without copying on Android Studio - Error:Configuration with name 'default' not found

android gradle android-studio android-gradle build-error

I'm trying to migrate my Android projects from Eclipse to Android Studio. I have a library project which is used in other projects and that's the reason I want it to be separated (not copied in the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.