asked on

Why is this 2 column div misbehaving

Hello all,

One day I'll get these centered two column (etc) divs straight in my brain. I seem to ask this same / similar question once (or twice) a year!

Please look at this page:

http://ogrowby.com/centered-div

Why isn't the right column lined up on the top with the left column.

Here's my html:

<div id="citylistcontainer">
  <div id="leftcities">Fullerton<br>
    Brea<br>
    San Bernardino<br>
    Colton<br>
    West Covina<br>
    Riverside<br>
  Corona</div>
  <div id="rightcities">Rialto<br>
    Diamond Bar<br>
    San Dimas<br>
    Pomona<br>
    Fontana<br>
    Chino<br>
    Rancho Cucamonga<br>
  </div>
</div>

Open in new window

Here's my css:

	#citylistcontainer {
	  width: 500px ;
	  margin-left: auto ;
	  margin-right: auto ;
	}	
	
	#citylistcontainer #leftcities {
	  margin-right: 200px ;
	}
	#citylistcontainer #rightcities {
	  float: right ;
	  width: 200px ;
	}

Open in new window

Thanks!

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Thanks GaryC

It worked :)

Rowby

Kyle Hamilton

not to be a party pooper, but I don't think that's going to work for IE7 - I could be wrong of course...

Gary

True, add

*display: inline;
zoom: 1;

Rowby Goren

ASKER

Thanks. Will fix

Rowby Goren

ASKER

Is this how it should be?

#citylistcontainer #leftcities {
    *display: inline;
    zoom: 1; 
}

Open in new window

Gary

#citylistcontainer #leftcities {
display: inline-block;
*display: inline;
zoom: 1;

}

Rowby Goren

ASKER

Thanks. Made the modification.

Thanks for your help too kozaiwaniec
Rowby