SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist compwizard's Avatar
    Join Date
    May 2002
    Location
    United States
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering floats

    I have a css layout where there are an unknown number of divs (3-5) lined up next to each other that are all CENTERED!

    I want all of the "choices" to be centered on the page, but I can't quite seem to get it right.

    THanks for your help.

    Code:
    <html>
    <head>
    <style type="text/css">
    
    BODY
    {
    	margin: 0px;
    	padding: 0px;
    	text-align:center;
    }
    
    #container
    {
    	margin: auto;
    	padding: 0px;
    	border: 1px solid black;
    	width:728px;
    	height:400px;
    
    }
    
    #googleAd
    {
    	width:728px;
    	height:15px;
    	background-color:red;
    	margin: 0px;
    	padding: 0px;
    }
    
    #header
    {
    	margin: 0px;
    	padding: 0px;
    	padding-top:15px;
    }
    #main
    {
    	height:365px;
    	margin: 0px;
    	padding: 0px;
    	border: 1px solid yellow;
    }
    
    #footer
    {
    	margin: 0px;
    	padding: 0px;
    }
    
    #choice
    {
    	width: 140px;
    	height: 140px;
    	border: 1px solid black;
    	float:left;	
    	margin: 10px;
    }
    
    #choiceWrapper
    {
    	border: 1px solid red;
    	margin: auto;
    
    }
    
    #spacer
    {
    	clear:both;
    	
    }
    
    </style>
    </head>
    <body>
    
    <div id="container">
    	<div id="googleAd">GOOGLE AD</div>
    	<div id="main">
    		<div id="header">HEADER / LOGO</div>
    		
    		<div id="content">
    			SOME BLAH CONTENT 
    		
    			<div id="choiceWrapper">
    				<div id="spacer"></div>
    				
    				<div id="choice">CHOICE 1<br>CHOICE 1<BR></div>
    				<div id="choice">CHOICE 2<br>CHOICE 2<BR></div>
    				<div id="choice">CHOICE 3<br>CHOICE 3<BR></div>
    				
    				<div id="spacer"></div>
    			</div>
    		</div>	
    		<div id="footer">FOOTER</div>	
    	</div>
    	<div id="googleAd">GOOGLE AD</div>
    </div>
    	
    
    
    
    </body>
    </html>
    Compwizard
    "There are 10 kinds of people in this world -- those who know binary, and those who don't."

  2. #2
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried this:

    margin-left: auto;
    margin-right: atuo;

  3. #3
    SitePoint Evangelist compwizard's Avatar
    Join Date
    May 2002
    Location
    United States
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, the problem is that the choiceWrapper div spans 100% instead of just the width of what's inside;
    Compwizard
    "There are 10 kinds of people in this world -- those who know binary, and those who don't."


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
  •