I thought I would share a little trick on how to use CSS to nicely style featured blog posts and listings with images and videos, as is often done in website sidebars.

Here are the objectives for this project (this assumes your website is running with table layouts, which is not applicable if your website uses our next-gen HTML layouts):

• Make the sidebar a fixed width at all times, no matter what content is in it, and if the content is too wide to fit, simply “clip” it (it’s the lesser of 2 evils: the other having the sidebar stretching too wide and ruining the entire website layout)
• Scale all the images and embedded videos in the sidebar to the *maximum* of a given width and have the height auto adjust. Note that the images that are narrower than the given maximum width will be left untouched.

Here is what you would need to do:

• First, use Firebug in Firefox or “Inspect Element” facility in Safari or Chrome to locate the sidebar “TD” element. Then identify the parent table and write down its ID; for the purposes of this example, let’s say this ID is “tid_123”
• In the page editor, choose “Edit Layout”, select the layout that contains your sidebar, click on the sidebar cell edit icon, and enter a custom CSS class into the “Advanced” tab in the dialog, for example “sidebar-cell”.
• Write down the width of the sidebar cell if it’s assigned in the HTML.
• Return to “Manage Website” screen, right-click on the page and select “Edit CSS”.
• Enter the following values into your CSS editor:

	
table#tid_123
{
	table-layout: fixed;
}

td.sidebar-cell
{
	/* should be the width you wrote down for the cell */
	width: 175px; 
	overflow-x: hidden;
}

td.sidebar-cell img, 
td.sidebar-cell object, 
td.sidebar-cell embed
{
	/* should be the width that accounts for some margin */
	max-width: 165px;
	height: auto;
}

You will need to substitute your own width values, table ID and sidebar cell class.

This technique appears to work in IE7+, FF3.x, Safari and Chrome.

Hope this helps! Special thanks to Ben Chimes of liveinkits.ca for triggering this “discovery”. Let me know what you think or if you have better tips: leave your comments here or email me to bill-at-myrealpage.com