?
Solved

Why is this 2 column div misbehaving

Posted on 2012-09-05
8
Medium Priority
?
288 Views
Last Modified: 2012-09-05
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!
0
Comment
Question by:Rowby Goren
  • 4
  • 3
8 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38368566
#citylistcontainer #leftcities {
    display: inline-block;
}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38368601
Thanks GaryC

It worked :)

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38368779
not to be a party pooper, but I don't think that's going to work for IE7 - I could be wrong of course...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 38368796
True, add

    *display: inline;
    zoom: 1;
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38368894
Thanks. Will fix
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38369017
Is this how it should be?

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

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38369068
#citylistcontainer #leftcities {
    display: inline-block;
    *display: inline;
    zoom: 1;

}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38369127
Thanks.  Made the modification.

Thanks for your help too  kozaiwaniec
Rowby
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month15 days, 4 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question