How do I get these DIVs to be the right size?

[Stert]

I am having trouble getting a couple of DIVs to stay the right size and width. I am converting a layout from using tables to DIVs, and it's all gone well up until this. With the table layout, the boxes that are giving me trouble as DIVs were automatically sized, depending on how much text they contained. With the DIVs, they're coming out at 100%. I can change the size if I set it to a pixel value, but I'd much prefer it to automatically size.

This is how it used to look:


This is what it does now:


This is the code for that section of the page:

<div class=infoboxes>

	<a href="#" onClick="expandcontent('sc1')">Who&hellip;</a>
		<div id=sc1 class=switchcontent>
		<blockquote>
		<b>Stert</b>
		<br>
		theanix -at- gmail -dot- com
		<br>
		<a href="http://www.myspace.com/hostiletakeovercrew" target=new>myspace.com/hostiletakeovercrew</a>
		<br>
		0411 540 373
		</blockquote>
		</div>
<p>
	<a href="#" onClick="expandcontent('sc2')">What&hellip;</a>
		<div id=sc2 class=switchcontent>
		<blockquote>
		<b>Images</b>
		<br>
		<a href="http://www.drukqs.net/" target=new>r. d. james</a>, <a 						

href="http://www.director-file.com/cunningham" target=new>c. cunningham</a>; <a 					

href="http://en.wikipedia.org/wiki/At_the_drive-in" target=new>el paso, tx</a>
		</blockquote>
		</div>
</div>

And here is the stylesheet:

.switchcontent
	{
	text-align: center;
	width: auto;
	}


.infoboxes
	{
	font-size: 10pt;
	font-family: courier;
	line-height: 12pt;
	color: #ffffff;
	text-align: center;
 	}

blockquote
	{
	font-size: 10pt;
	font-family: courier;
	line-height: 12pt;
	color: #ffffff;
	border: dashed;
	border-width: 1px;
	text-align: left;
 	}

[VIPStephan]

Divs are always expanding to 100% width automatically as opposed to tds in tables collapsing if there's less content. There's nothing you can do about it except of setting a specific width (which isn't very flexible, though).
You can set "min-width: ??px;" and "max-width: ??px;" but that doesn't work in IE.

[slushy77]

hi Stert, there are several ways of doing this, here are two.
the first positions a specific <div> centrally across the page and gives a uniform layout.

#myDiv{
position:absolute;
top:0;
left:10%;
right:10%; /*width is implied no need to set */
/*IE ignores 'right' so use width as well */
width:90%;
}

the second example uses margin to ensure that a class of <div>s is positioned at least 100 pixels away from any other element. this gives a more organic layout.

.nervousDiv {
margin:100px;
width:auto;
}

a sketch pad and pencil are useful tools when converting from table to div . Dont be scared to experiment with position, top, left,bottom, right, width, height, margin etc