Center Div's in The Same Line

HTML & CSS
1

My HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ian Gonsalez</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
 	<link rel="stylesheet" href="style.css" /> 
<script type="text/javascript"> 
		$(document).ready(function() {
			/*
			*   Examples - images
			*/
 
			$("a#example1").fancybox({
				'titleShow'		: false
			});
 
			$("a#example2").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});
 
			$("a#example3").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'
			});
 
			$("a#example4").fancybox();
 
			$("a#example5").fancybox({
				'titlePosition'	: 'inside'
			});
 
			$("a#example6").fancybox({
				'titlePosition'	: 'over'
			});
 
			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
 
			/*
			*   Examples - various
			*/
 
			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
 
			$("#various2").fancybox();
 
			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});
 
			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script> 

</head>

<body>
	<div id="head" >
<a <a href="/"><img src="images/logo.png"</a>
	</div>
	<div id="content" >
<div align="center"><h2>My Latest Works</h2></div>
	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
	
	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>HELLO  TESTING!
	</div>
<div id="footer" >
<div align="center"><h2>Footer, yo.</h2></div>

</ br>
I like doin, flip n ****. Copyright
</ br>

	</div>
</body>
</html>

My CSS

/* Hand coded by Chris Yee */ 
html, body{ 
	margin:0; 
	padding:0; 
	text-align:center; 
	background-color:#FFFFFF;
	background-repeat:repeat;
	background-position:center;

} 
 
#head{ 
	width:100%;
	margin-left:auto; 
	margin-right:auto; 
	background-color:#242424;
	text-align:left; 
	color:#FFFFFF;
} 

#content{ 

	width:850px;
	text-align:center;  
	margin-left:auto; 
	margin-right:auto; 
	background-color:#efefef; 
	color:#808080;
	font-family:arial;
	font-size:8pt;
} 
 
#subs{ 
	margin:5px;
	float: left;
	width:150px;
	padding:5px; 
	text-align:center;  
	background-color:#f6f6f6; 
	color:#808080;
	font-family:arial;
	font-size:8pt;
	border-style:solid;
	border-width:1px;
	border-color:white;
} 

#footer{ 
	width:790px;
	padding:5px; 
	text-align:center;  
	margin-left:auto; 
	margin-right:auto; 
	background-color:#ebebeb; 
	color:#000000;
	font-family:arial;
	font-size:8pt;
	font-weight:bold;
}

I’m trying to get those divs centered so its like a gallery.

2

is that the subs divs you want centered? could try giving them a width and margin: 5px auto. Why are they floating? are you intending on adding a sidebar at some point?
Generally it is a good idea to get the align=center business out of the html and into the css file to really separate form from content.

3

You need to make that a list of inline-block list items. See Inline-block Gallery demo and tutorial.

cheers,

gary

4

We had one of these yesterday :slight_smile:

Using the methods mentioned in Gary’s link you could do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ian Gonsalez</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" >
<link rel="stylesheet" href="style.css">
<style type="text/css">
/* Hand coded by Chris Yee */ 
html, body {
    margin:0;
    padding:0;
    text-align:center;
    background-color:#FFFFFF;
    background-repeat:repeat;
    background-position:center;
}
#head {
    width:100&#37;;
    background-color:#242424;
    text-align:left;
    color:#FFFFFF;
}
h1, h2 {
    text-align:center
}
#content {
    width:850px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    background-color:#efefef;
    color:#808080;
    font-family:arial;
    font-size:8pt;
}
#subs {
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
    text-align:center;
}
#subs li {
    display:-moz-inline-box;/* vendor extension for FF2 support - won't validate but a valid construct*/
    display:inline-block;
    margin:5px 10px 10px;
    width:160px;
    text-align:justify;
    ;
}
#subs li a {
    width:150px;
    padding:5px;
    text-align:center;
    background-color:#f6f6f6;
    color:#808080;
    font-family:arial;
    font-size:8pt;
    border:1px solid #fff;
    display:block;
}
#footer {
    width:790px;
    padding:5px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    background-color:#ebebeb;
    color:#000000;
    font-family:arial;
    font-size:8pt;
    font-weight:bold;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
ul#subs li{display:inline}
</style>
<![endif]-->
</head>
<body>
<div id="head"><a href="/"><img src="images/logo.png" alt=""></a></div>
<div id="content" >
    <h1>My Latest Works</h1>
    <ul id="subs">
        <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
            This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
        <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
            This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
        <li><a href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
            This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
        <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
            This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
        <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
            This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
    </ul>
    <div id="footer" >
        <h2>Footer, yo.</h2>
        <p> I like doin, flip n ****. Copyright</p>
    </div>
</div>
</body>
</html>

Note that you don’t self- close tags in html and ids must be unique (the above code is now valid).

If you don’t want to use inline block or if you want the row centered but the orphans left aligned then you would need to work out the width of the row exactly and use auto margins on the parent of each row to center it and then float the items 4 across inside the parent. Then do the same for each row of 4 all held in the same parent which is auto centred and set to clear:both so that it doesn’t snag on any higher floats.