Help!!!
Here's the page I'm working on for you to view:
http://ashby-design.co.uk/MPT/community.php

I just can't figure out why IE7 won't display the list (ul.lineup) of images and captions in the second column without it flipping down when the window is smaller. The link widths are set by the image and caption widths, but overall there should be plenty of room - but acts as though it doesn't.

I've used the column set-up throughout my website and this is the only place where this problem occurs and I've tried all sorts to try and figure out what's going on. I've added borders to ul (black) and li (red) to try and pick up what's happening - but no inspiration as yet - anyone?

If I note out the div.authorphotosmall and the p.authorcaptionsmall the same thing happens, so I don't think it has anything to do with their properties. I've tried playing around with the ul.lineup links - but no joy.

Below is the html and css (I've removed the specific content so it's easier to see what's going on, I hope)

HTML Code:
<div class="two">
<h3>TITLE</h3>
<div class="column-wrapper">
<div class="column">  
<div class="prose">
<h2>title</h2>   
<p>text content</p>
<p>text cotent</p>
<!-- end prose--></div>
<!-- end column --></div>
    
<div class="column">  
<div class="prose">
<h2>title</h2>  

<ul class="lineup caption">
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
</ul>

<ul class="lineup caption">
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
<li><div class="authorphotosmall"><img src="image" /></a></div>
<p class="authorcaptionsmall">Caption</p></li>
</ul>
 <p class="dark"><strong>A paragraph</strong></p>
	<!-- end prose--></div>
	<!-- end column --></div>
 
<!-- end column-wrapper --></div>    
</div>

Code:
.lineup { overflow: hidden;}
ul.lineup { 
	margin-bottom: 0;
	border: 1px solid black
	}
.lineup li { 
	list-style-type: none;
	float: left;
	width: 100px;
border: 1px solid red
	}

.caption {
	font-style: italic;
	overflow: hidden;
	}
.caption a {text-decoration: none; }
.caption p.authorcaptionsmall { width: 80px;}

.authorphotosmall img {width: 100%; }
.authorphotosmall {border: 3px solid rgb(204,204,204);}
.authorphotosmall a {display: block }	
.authorphotosmall, .authorphotosmall a { width: 80px; height: 80px; }



.two {
	background-color: rgb(255,255,255);
	margin-bottom: 2em;
	overflow: hidden;
	}
.column-wrapper { 
	overflow: hidden; 
	width: 100%;
	}
.column {
	width: 50%;
	float: left;
	overflow: hidden;
	}
.prose {
	padding-left:1.5em;
	padding-right:1.5em;
	margin: 1.5em 0.8em 1em 0.8em;
	overflow: hidden;
	}