Two divs in a single row, and more

In the mockup I created for my search results page I had a bar at the top that provides an option to sort the results, displays the number of results and allows you to page through them. Kayak has a similar bar that looks like this:

I wanted to be able to create a bar that would have a left and right portion on top, with a second connected portion on bottom. I also wanted a border around the outside of it with a border dividing the top and bottom portions. Kayak uses a table for their layout but I wanted to see how I could accomplish the same thing using divs and CSS. After a lot of trial and error I was able to come up with the following:

Here’s the HTML for it:

1
2
3
4
5
6
7
8

<div class="bar ui-corner-all">
<div class="top-left">
  Top left</div>
<div class="top-right">
  Top right</div>
<div class="bottom">
    Bottom</div>
</div>

The ui-corner-all class is from jQuery UI, but otherwise you’ll see everything else in the following CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.bar {
  border: solid 2px #dedede;
  width: auto;
}
 
.top-left {
  padding: 3px 5px;
  float: left;
}
 
.top-right {
  padding: 3px 5px;
  text-align: right;
  float: right;
}
 
.bottom {
  padding: 3px 5px;
  border-top: solid 2px #dedede;
}
 
.clear {
  clear: both;
}

This works great for Firefox, but as I was creating this post I figured I’d try it out on IE and noticed that I get some extra space in the top section:

I’m not sure what’s causing that, and I’m not going to try to figure it out at the moment. I’m saving all of that for the very end as I doubt this is the only IE-specific issue I have and I want to tackle them all at once. If I figure it out though, I’ll be sure and update this post.