SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question centering content not behaving

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

    Code:
    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.
    -=SunnaH=-

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SunnaH View Post
    I am toggling a show/hide but is should not make a difference on the presentation.
    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.

  3. #3
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images
    Attached Files Attached Files
    -=SunnaH=-

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <!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>

  5. #5
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.
    -=SunnaH=-

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Is it possible to post a link to a live example?

  7. #7
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images
    Attached Files Attached Files
    -=SunnaH=-


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •