Widget - Recent Threads Divs as Columns instead of Rows

[MGP_Tech]

Hello,

I was hoping someone might be able to help me out with the code of a widget I'm making. I'd like to make it so that the divs in my recent threads widget line up as columns instead of rows. Here's what it looks like now, and what I'm going for is more of a newspaper look with columns for the articles.



Here is my widget code, I can also add the CSS from vbcms.css and widget.css if needed.

<div class="cms_widget_news">
	<div class="cms_widget_block_news">
		<div class="cms_widget_header_news">
			<h2><img src="http://myworldofdarkness.com/images/news.jpg"></h2>
		</div>
		<div class="cms_widget_content widget_content_news">
		<vb:each from="threads" key="threadid" value="thread">
			<div class="cms_widget_post_bit widget_post_bit_news">
				
					<div class="cms_widget_post_comment widget_post_comment_news">
						<center><h4 class="cms_widget_post_header widget_post_header_news">
							{vb:raw thread.title}</a>
						</h4>
						<p class="cms_widget_post_content widget_post_content_news">{vb:raw thread.previewtext}</p>
						<a href="{vb:link thread, {vb:raw thread}}">Read More...</a>
						<a href="{vb:raw thread.lastposturl}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" border="0" /></a><center>
					</div>
			</div>
		</vb:each>
		</div>
	</div>
</div>

[Lynne]

Can we get a link?

[MGP_Tech]

Sure.

http://myworldofdarkness.com/content

[Lynne]

Is it always three columns? Something like:

.widget_post_bit_news {    
border-top: 1px dotted #C9C9C9;    
clear: none;    
display: inline-block;    
padding-bottom: 2px;    
vertical-align: top;    
width: 32%;}

[MGP_Tech]

Yes, in the widget set up I've set it to only pull the three most recent threads from our News & Media board.

Thank you for the code Lynne, I will test it out

edit: Works perfectly and seems so simple, I really appreciate it!