CSS column troubleshooting

[notarypublic]

Kind of embarrassing, but after fiddling with it for 20 minutes I'm ready to ask for help.

I'm replacing a page that uses tables for a structural layout, for biographies for each member of staff for a site.

It should be a simple matter of using divs with css for formatting instead. There is a div container for each bio, with a picture/summary info div that floats left and a bio summary div that floats on the right - with a contact information div that clears both and floats at the bottom.

CSS:

.contact {
	margin: 0px;
	float: left;
	width: 180px;
	font-size: 0.8em;
	line-height: 1.1;
}

.contactIMG {
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 2px;
	width: 160px;
	border: thin solid #D6D6D6;
	margin-left: 10px;
	margin-bottom: 5px;
}

.bio {
	width: 800px;
	padding-top: 5px;
	margin-bottom: 15px;
	border: thin solid #D6D6D6;
}

.contactLinks {
	padding-left: 165px;
	font-size: .7em;
	clear: both;
}

.information {	
}

html:

<div class = "bio">
    <div class = "contact">
    	  <div class = "contactIMG"><img src="images/balas.png" width="100" height="125" alt="Benjamin Balas, Ph. D." /></div>
          
    	  <p><strong><a href="http://www.psych.ndsu.nodak.edu/index.php?f=4&amp;uid=bbalas">Benjamin Balas, Ph.D.</a></strong></p>
    	  <p>Assitant Professor, Department of Psychology</p>
   	  </div>
        <div class = "information">
        <p>Dr. Balas researches the properties and development of high-level vision, specifically face and object recognition. </p>
        <p>Before joining the CVCN, Dr. Balas received his PhD from MIT’s<br />
Department of Brain and Cognitive Sciences and was a post-doctoral<br />
fellow at Children’s Hospital Boston. Dr. Balas has studied the ways that infants perceive faces and object learning, and has published work relating to texture and scene perception, the effects of categorization on object learning, and has ongoing projects related to infant motor behavior and eye movement.</p>
        <p>The Balas Lab conducts psychophysical and electrophysiological<br />
research directed at describing object recognition and learning in<br />
children and adults.<a href="http://sites.google.com/site/balaslab/home/research"> &raquo;</a></p>
        </div>
      <div class = "contactLinks"><p> 701-231-6105 | <a href = "mailto:[email protected]">[email protected]</a> | <a href = "http://sites.google.com/site/benjaminbalas/">Personal Home Page</a></p>
        </div>         
    </div>

Now at the moment, I took the float:left and float:right attributes out of the CSS for the div tags, since it wasn't working. The text is too tall and wraps down below the picture div, which looks very unprofessional.

Any thoughts? It shouldn't be a hard fix..

 

[DHDdirect]

Try the following, it seems to work for me.

.information {
	overflow:auto;
}

Jason H.

 

[notarypublic]

Worked indeed! Thanks.