#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0

    CSS: box within box confusion :S


    Ive searched the net, maybe im putting in the wrong keywords or something but i cant figure out how to do the following:

    I have a big long box, and in it are small boxes all beside eacher. I would like this group of small boxes to be centered in the big box.

    The net is saying stuff and verticle and horizontal alignment which i dont im really aiming for (? ), but i think there is something much simpler that im missing.

    im lookin for the equivalent of box-align: center , but that doesnt seem to be an option:P

    thanks, matt.
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Hi, this works, kind of. i.e. it looks fine in explorer, but not too hot in Firebird:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test boxes</title>
    <style type="text/css">
    #box {
    	border: 1px solid #000;
    	padding: 10px;
    	text-align: center;
    	margin-left:auto; 
    	margin-right:auto;
    }
    #box .smbox {
    	width: 100px;
    	display: inline;
    	border: 1px solid #f00;
    	text-align: center;
    	margin: 5px;
    }
    </style>
    </head>
    <body>
    	<div id="box">
    		<div class="smbox">1</div>
    		<div class="smbox">2</div>
    		<div class="smbox">3</div>
    		
    	</div>
    </body>
    </html>
    Hopefully it will set you on the right track.

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________

IMN logo majestic logo threadwatch logo seochat tools logo