CSS, WordPress and IE

Question

I would like to position three items in CSS using float.

1. In the top left--logo
2. To the right of the logo, the navigation, which is an unordered list, ie floating left.
3. In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second

I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.

I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.

Any suggestions would be appreciated.

Answer 1

If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?

You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.

Answer 2

Thanks for the input.

I tried that but the center nav and top right item need to overlap. I set my page space/width to 850. The first column is 200, the nav is 600 and the email field is 300.

Answer 3

What about the following?

 .floatleft_logo
 {
  float: left;
  width: 200px;
 }

 .floatleft_nav
 {
  float: left;
  width: 600px;
 }
    .floatright_email
 {
  float: right;
  width: 300px;
  margin-left:-250px;
 }

Put all three in a 850px-wide container div and this works for me in a test page.