Según tengo entendido display: table; y display: table-cell; funcionan para crear una table en CSS, le asignas un ancho y debería funcionar. Lo trato de agregar a un sitio y se alinea uno después de otro siendo que deberían estar en una sola línea.
Funcionando con Html5.
Captura de pantalla:
Html:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Indice</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="global.css">
<script type="text/javascript" src="jscript/jquery.min.js"></script>
<script type="text/javascript" src="jscript/fadegray.js"></script>
</head>
<body class="ultimos">
<div class="topline"></div>
<header><div><!-- Cabecera -->
<a href="index.html"><div class="logo"></div></a>
<nav><!-- Navegacion -->
<ul>
<li><a href="ultimos" class="ultimos">Últimos</a></li>
<li><a href="en_emision">En emisión</a></li>
<li><a href="populares">Populares</a></li>
<li><a href="series" class="series">Todas</a></li>
<li><a href="#">Buscador</a></li>
</ul>
</nav><!-- Fin de la navegacion -->
</div></header><!-- Fin de la cabecera -->
<div id="content"><!-- Contenido -->
<div id="gallery"><!-- Galeria -->
<h1>Ultimos episodios</h1>
<ul>
<li><a href="series/naruto"><img src="uploads/naruto.png"></a></li>
<li><a href="series/one_piece"><img src="uploads/one_piece.png"></a></li>
<li><a href="series/bleach"><img src="uploads/bleach.png"></a></li>
<li><a href="series/fairy_tail"><img src="uploads/fairy_tail.png"></a></li>
<li><a href="series/naruto"><img src="uploads/naruto.png"></a></li>
<li><a href="series/one_piece"><img src="uploads/one_piece.png"></a></li>
<li><a href="series/bleach"><img src="uploads/bleach.png"></a></li>
<li><a href="series/fairy_tail"><img src="uploads/fairy_tail.png"></a></li>
</ul>
</div><!-- Fin de la galeria -->
<aside><!-- Publicidad -->
<img src="uploads/publicidad.png">
</aside><!-- Fin de la publicidad -->
</div><!-- Fin del contenido -->
<div class="bottomline"></div><!-- Pie de pagina -->
<footer>
<div>
<section class="links">
<ul>
<li><a href="help.php">Ayuda</a></li>
<li><a href="about.php">Acerca de</a></li>
<li><a href="copyright.php">Derechos de autor</a></li>
<li><a href="contact.php">Contacto</a></li>
<li><a href="team.php">Equipo</a></li>
<li><a href="adverten.php">Publicidad</a</li>
<li><a href="send_error.php">Notificar un error</a>
</ul>
</section>
<section class="social">
<ul>
<li class="f_facebook"><a href="http://facebook.com"><img src="images/f_facebook.png"></a></li>
<li class="f_twitter"><a href="http://twitter.com"><img src="images/f_twitter.png"></a></li>
<li class="f_rss"><a href="#"><img src="images/f_rss.png"></a></li>
<li class="f_rss"><a href="#"><img src="images/f_logo.png"></a></li>
</ul>
</section>
</div>
</footer>
</body>
</html>
CSS:
Código PHP:
/* =============================================================================
Base
========================================================================== */
/* Resetear propiedades margin y padding */
* {
margin: 0;
padding: 0;
}
/* Le decimos a los navegadores que renderize todos las etiquetas nuevas de HTML5 como block */
header, section, footer, aside, nav, article, figure {
display: block;
}
::selection { background-color: rgba(122, 192, 0, 0.2); }
::-moz-selection { background-color: rgba(122, 192, 0, 0.2); border: 10px solid red; }
img {
border: none;
}
:focus {
outline: 0;
}
h1 {
font-family: GillSans MT Condensed;
font-size: 35px;
line-height: 35px;
border-bottom: #bdbdbd 3px dashed;
display: inline;
}
p {
margin: 0;
line-height: 14px;
}
b, strong { font-weight: bold; }
html, body {
height: 100%;
}
/* =============================================================================
Global
========================================================================== */
body {
background: #efefef url(images/bg_body.png);
color: #151515;
font-family: Colaborate Regular, Arial;
font-size: 13px;
text-transform: uppercase;
text-align: center;
margin: 0; padding: 0;
}
a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #000; text-decoration: underline; }
/* Mejora la legibilidad cuando el puntero pasa sobre el y es cliqueado -en todos los navegadores- */
a:hover, a:active { outline: 0; }
.logo {
background: url(images/logo.png) no-repeat;
height: 57px;
width: 150px;
margin: 25px 0 0 0;
}
.topline {
background: url(images/topline.png) repeat-x;
height: 15px;
width: 100%;
top: 0; left: 0; right: 0;
position: absolute;
}
header {
background: url(images/bg_header.png) repeat-x;
padding: 15px 0;
height: 100px;
width: 100%;
}
header div {
width: 950px;
margin: auto auto;
}
nav ul{
font-size: 13px;
float: right;
margin: -25px 0 0 0;
padding: 0;
}
nav ul li{
float: left;
margin: 0 3px 0 3px;
padding: 0;
list-style: none;
}
nav ul li a, nav ul li a:visited{
color: #000;
text-decoration: none;
font-weight: bold;
padding: 4px 7px 4px 7px;
}
nav ul li a:hover, nav ul li a:active {
text-decoration: none;
}
body.ultimos nav ul li a.ultimos{
color: #fff;
background: #7195d2;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#content {
width: 950px;
display: table;
margin: auto auto;
text-align: left;
}
#gallery {
display: table-cell;
width: 740px;
}
aside {
display: table-cell;
width: 230px;
}
div#gallery ul {
list-style: none;
margin: 20px 0 0 0; padding: 0;
}
div#gallery ul li {
background: #1c1c1c;
float: left;
margin: 10px 10px 10px 0;
display: inline; /*--IE6 Fix - Arregla el fallo de doble margen en IE6--*/
}
div#gallery ul li a img {
background: #1c1c1c;
padding: 6px;
width: 145px; /*--Ancho de la imagen--*/
height: 200px; /*--Alto de la imagen--*/
}
.label {
background: #5d7bc0;
padding: 3px 4px;
color: #efefed;
font-face: Colaborate Medium;
font-size: 15px;
}
.bottomline {
background: url(images/bottomline.png) repeat-x;
height: 15px;
width: 100%;
margin-top: 117px;
}
footer {
background: #151515;
width: 100%;
height: 100px;
position: absolute;
}
footer div {
width: 950px;
display: table;
margin: auto auto;
}
footer div section.links {
display: table-cell;
width: 50%;
text-align: center;
}
footer div section.links ul {
margin: 0 0 0 0; padding: 0;
font-weight: 600;
}
footer div section.links ul li {
margin: 0 15px 0 0;
list-style:none;
float: left;
padding: 0;
}
footer div section.social {
display: table-cell;
width: 50%;
}
footer div section.social ul {
margin: 15px 0 0 0;
}
footer div section.social ul li {
margin: 0 0 0 20px;
list-style: none;
float: left;
padding: 0;
}
footer div section ul li a:link, footer div section ul li a:visited, footer div section ul li a:hover, footer div section ul li a:active {
color: #fff;
text-decoration: none;
}
/* =============================================================================
Typograprafías
========================================================================== */
@font-face {
font-family: 'GillSans MT Condensed';
src: url('fonts/gilsans.eot');
src: url('fonts/gilsans.eot?#iefix') format('embedded-opentype');
src: url('fonts/gilsans.ttf') format('truetype');
src: url('fonts/gilsans.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Colaborate Regular';
src: url('fonts/colaborater.eot');
src: url('fonts/colaborater.eot?#iefix') format('embedded-opentype');
src: url('fonts/colaborater.ttf') format('truetype');
src: url('fonts/colaborater.otf');
font-weight: normal;
font-style: normal;
}