[SOLVED] IE won't put divs on the same line

[jordanwb]

If you go to my SCM at http://jordanwb.homelinux.com/scm in Firefox the Main Menu and User Menu are on the same line like they should be, but in IE6 they're not. I don't know how it looks in IE7.

[obsidian]

They look the same to me in both FF and IE... I'm assuming you are playing with them currently?

[jordanwb]

Yes. Are you using IE7?

[obsidian]

Nope, IE6 and FF2.

 

I've attached a SS of what I'm seeing in IE6 (identical to what I get in FF2 currently)...

 

[attachment deleted by admin]

[jordanwb]

It's not supposed to look like that. It's supposed to look like this:

 

http://img143.imageshack.us/my.php?image=71762620li5.jpg

[obsidian]

So, have you tried floating all your content/menu divs left and then putting a clear: both on the footer?

[jordanwb]

No but I'll try that.

 

[Edit] Now it works, but not as good as it should in IE.

[jordanwb]

If I set primary_area_container's width to 544px instead of 550px, it works, but there's too much of a gap between the side menus and the center content.

[obsidian]

That's probably because you have a lot of margin on the divs. Reduce the margin on the facing sides until the combined total of the margin is equal to the distance you want between them. So, for instance, if you wanted 20px between the divs, your margin structure would be something like this:

#left-col {
  margin: 20px 10px 20px 20px;
}

#center-col {
  margin: 20px 10px;
}

#right-col {
  margin: 20px 20px 20px 10px;
}

 

This way, the total margin between all elements is 20px.

[jordanwb]

I see what you mean: share the spacing across all the columns. I'll give that a shot.

 

[Edit] I removed the margin from the left and right columns but IE still isn't placing the center column properly.

[obsidian]

Well, here's another way to be sure your center one is truly centered:

 

HTML:

<div id="left-col">asdfdf</div>
<div id="right-col">adfasdf</div>
<div id="center-col">asdfsdaf</div>

 

CSS:

#left-col {
  float: left;
  width: 100px;
}

#right-col {
  float: right;
  width: 100px;
}

#center-col {
  margin: 0 110px;
}

 

That way, you float your side columns and just put enough margin on your center content to assure that you clear your sides. Also, this centers your middle column, too.

[jordanwb]

That doesn't work either.

 

So far the only thing that has worked were tables, and even then the cells wouldn't stay the same width.

[obsidian]

You keep saying that these examples won't work, but you aren't sharing any code or examples of your implementation with us. I know for a fact these will work in both FF and IE. In fact, I just put this last example together in a sample layout for you to look at in action. This works as-is in both FF and IE6 (just tested). Feel free to pull it apart and do whatever you want with it:

 

http://code.guahanweb.com/test_layout.html

[jordanwb]

You keep saying that these examples won't work, but you aren't sharing any code or examples of your implementation with us.

 

Yes I did, I gave the link, you looked at it yourself. I'll try it again to get the divs to work.

[obsidian]

You keep saying that these examples won't work, but you aren't sharing any code or examples of your implementation with us.

 

Yes I did, I gave the link, you looked at it yourself. I'll try it again to get the divs to work.

 

A link to code you are currently working on doesn't much aid in the debugging process when it's changing, though

[jordanwb]

I set the center column to float: left, and it works correctly now.