Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Okay following on from this thread I have now run into a different problem.

    Situation: I have a wrapper div which centers my body content. I have a div which holds my results. My results need to be 3 per line. Because I only want 3 per line, and the fact that I use float to achieve that means that when I try to center the floated divs it fails. I want the floated divs to be centered as per the wrapper divs width.

    Sample code:

    HTML Code:
    <html>
    
    <head>
    
      <style type="text/css">
    
      #wrapper
      {
        border: 2px solid red;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
      }
    
      .result
      {
        float: left;
        margin-right: 20px;
        width: 220px;
      }
    
      .clear
      {
        clear: both;
      }
    
    </style>
    
    </head>
    
    <body>
    
      <div id="wrapper">
        <div id="results">
    
            <div class="result">
                <ul>
                    <li>ListItem 1 of the first column of first row.</li>
                    <li>ListItem 2 of the first column of first row</li>
                </ul>
            </div>
    
            <div class="result">
                <ul>
                    <li>ListItem 1 of the second column of first row.</li>
                    <li>ListItem 2 of the second column of first row</li>
                </ul>
            </div>
    
            <div class="result">
                <ul>
                    <li>ListItem 1 of the third column of first row.</li>
                </ul>
            </div>
    
            <div class="clear"></div>
    
            <div class="result">
                <ul>
                    <li>ListItem 1 of the first column of second row.</li>
                    <li>ListItem 2 of the first column of second row</li>
                </ul>
            </div>
    
            <div class="result">
                <ul>
                    <li>ListItem 1 of the second column of second row.</li>
                </ul>
            </div>
    
        </div>
      </div>
    
    </body>
    </html>
    It looks like the <div class="clear"></div> cuts off the wrapper, but that is not the main issue.

    Any help appreciated.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, if you have an absolute width you can play with margins to make things work. To wit, here's how you might do it with yours; replacing the relevant section in your CSS:

    Code:
      .result
      {
        float: left;
        margin-right: 33px;
        margin-left: 13px;
        width: 220px;
      }
    If you have relative widths I suspect things get significantly more difficult, though you may be able to pull off some percentage-based voodoo.

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Forgive my awkwardness, but using margins to place content (by place I mean almost using margin as a form of absolute positioning) is not a road I want to go down.

    The margin-right: 20px; in my snippet above was to produce a gap between the divs that were on the same row.

    However if this is what I need then so be it.

    Thanks again.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I agree that using margins to place content is about as nasty as it gets. However, there are very few ways of adjusting the position of floating elements, and this is one of them.

    The only other option I know of would be to make the lists [minicode]display: inline-block;[/minicode] and use [minicode]text-align: center;[/minicode] to center them. Trouble is, then the baseline of the line that an inline-block is on is at the baseline of the block, which in this case is the bottom of the list, so the lists are effectively aligned at their bottoms instead of their tops, which makes for serious oddness. This does carry the benefit, however, that when you have two lists instead of three, they are still centered.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com