Css between IE and Chrome/Firefox

HTML & CSS
1

Is there a problem with the following code between IE and Chrome/Firefox.

These DIV’s are supposed to be side by side and they are in chrome/firefox, but in IE the second div is under the first one.

.contentLayout .sidebar1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 183px;
}
.contentLayout .sidebar2
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  /* float: left; */
  overflow: hidden;
  width: 184px;
}

i’m still messing with the margins, padding, and width, to see if it’s wrapping it in IE. i’ll post more later, but this was on the top of my mind right now.

2

Why do you have the float:left in .sidebar2 as a comment?


.contentLayout .sidebar2
{
  /* float: left; */
}

By the way. You don’t need the overflow hidden since both divs are floating!

Edit: What are the properties for .contentLayout?

3

My guess is that the OP has replaced the float declaration with "overflow:hidden to create the second column (creating a new block formatting context). But in this case, it is the width that can be dropped.

The content of .sideBar2 could be the issue here as IE6 expands containers.

4

i commented the float on the second one because i was just toying around with div placement. most of the css was from a wordpress template that i was changing around to work with the site i was designing, which never had a second sidebar to begin with.

after all that, it was the size of the div that was moving it around on the page between chrome and IE. the difference was just 1 px that was causing the problem.

all is well now.

thanks

5

You did not post any markup so it is difficult to guess about your construct.
But as a side note, if these are two columns supposed to show side by side in a container, it is possible to not set a width on the second “column” - going only with “overflow:hidden” (plus hasLayout, i.e. zoom:1).
The advantage of that technique is that it prevents rounding errors since one of the containers is width-less.