Centering content not behaving

been at this a few days already and not making progress-

wrapper div
   inner_wrapper div
      fieldset01, [wrapper] fieldset02, fieldset03 [wrapper]
   inner_wrapper div
wrapper div

ultimately what I am trying to do is center the three field sets. I have all three float:left. the inner_wrapper has display:inline-block. I have tried different combinations but no solutions yet. the second and third field sets are in a wrapper as I am toggling a show/hide but is should not make a difference on the presentation. i am sorry i cannot put up the code as my intranet is locked out from the outside world. the trend for me are “easy” things just do not work easily. :slight_smile:

That sounds like presentation to me.

It’s a bit hard to answer this without an example. Could you post page code that includes the HTML and CSS? That is, an example we can test in our browser.

I have included screen shots of how the layout looks when rendered. I added a color border so you can see the red area which toggles and the blue innerWrapper div. I am working with the Primefaces Java CMS so the code and styles are referencing its syntax. Ultimately, Primefaces rendered HTML. Finally I have the small JavaScript with toggles. I just need the layout to center on the page. The innerWrapper is used around the floated elements thinking I can center it but it is not working.

To center an inline-block element you need text-align:center on the parent just as you would need for text.

Here’s the smallest example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap { text-align:center;/* centeres text and inline elements (or inline block elements*/ }
.inner-wrap { display:inline-block }
* html .inner-wrap { display:inline }/* ie6 inline-block fix*/
*+html .inner-wrap { display:inline }/* ie7 inline-block fix*/
.float {
	float:left;
	width:200px;
	height:200px;
	background:red;
	border:1px solid #000;
	margin:10px;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="inner-wrap">
				<div class="float">Float</div>
				<div class="float">Float</div>
				<div class="float">Float</div>
		</div>
</div>
</body>
</html>


@Paul, Thank you your code was a good fresh start for me to work it in my code. I do have one last issue with the placement order which I cannot figure out and the solution can probably be in the toggle JavaScript I am using. Example: [fieldset01] [fieldset02] [fieldset03] then it would toggle to [fieldset01] [fieldset02] [fieldset04] but what is happening is this: [fieldset01] [fieldset02] [fieldset03] then it would toggle to [fieldset04] [fieldset01] [fieldset02]. I do have all of these floated left using the code which you have provided. Everything works nicely now except the order.

Is it possible to post a link to a live example?

I apologize for being a bit vague. I have attached two screen shots and the XHTML/javascript code. I have the innerwrapper in red so you can see that the fieldsets are contained within the innerwrapper but the other toggle you can see that it jumps out of the fieldset.