No replies
chasingmaxwell
Offline
newbie
Last seen: 12 years 34 weeks ago
Joined: 2009-05-28
Posts: 1
Points: 0

Here's my situation: I have a div which holds all the main content on the page with a class of "body". This div centers everything inside of it with text-align:center. Then inside that div there is another div with the class of "content_wrapper" which I want to shrink to fit its contents and re-align everything to the left with text-align:left. The text-align works but the shrink to fit is not working. It would be easy enough with a simple float:left or display:table, but its contents are divs with display:inline-block (which is necessary in order to get them to play nicely together the way I want) and for some reason this prevents the content_wrapper div from shrinking to fit its contents. My code is below. Any ideas?

HTML:

<div class="body">
<div class="content_wrapper">
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
	<div class="ps_category"></div>
</div>
</div>

CSS:

div.body {
	float: right;
	width: 100%;
	min-width: 575px;
	background: transparent;
	padding: 0;
	overflow: hidden;
	height: 100%;
	text-align: center;
}
div.content_wrapper {
	text-align: left;
	margin: 0 auto;
	float: left;
}
div.ps_category {
	display: -moz-inline-stack;
	width: 230px;
	min-height: 175px;
	_height: 175px;
	padding: 10px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	float: left;
}

Edit: I had been playing with the CSS and accidentally copy and pasted the code without the "float: left;" under div.content_wrapper. It's fixed now.