Ajustar DIV al 100% del Documento

GatorV · #1 (**permalink**) 03/10/2012, 14:02

Que tal compañeros, les vengo con una duda que no he podido arreglar, estoy haciendo un layout muy sencillo, pero quiero que el div de header y footer tengan el 100% del ancho, de todo el documento, no solo de la ventana, ya que si pones una imagen grande, el ancho se queda solo al ancho de la ventana.

Anexo el código a lo básico que he llegado, lo que me gustaría ver es el div header (azul) que se fuera hasta el ancho de la imagen, y también el de contenido (blanco).

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Template</title>
        <style type="text/css">
            body {
                background: #333;
                font-family: sans-serif;
                width: 100%;
                margin: 0px;
                padding: 0px;
                border: 0px;
                outline: 0px;
            }
            #header {
                width: 100%;
                background: blue;
                color: white;
            }
            #content-container {
                background: white;
                color: black;
                font-size: .8em;
            }
        </style>
    </head>
    <body>
        <!-- Header -->
        <!-- Header title -->
        <div id="header">
            <p><em>Title</em></p>
        </div>
        <!-- /Header title -->
        
        <!-- Content Container -->
        <div id="content-container">
            <!-- Content -->
            <div id="content-body">
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra justo et erat condimentum iaculis. Maecenas eros sapien, pharetra at molestie auctor, accumsan ut quam. Duis id purus id nisl ornare porttitor sed sed nisi. Fusce gravida mauris mi, sit amet tincidunt nibh. Cras porttitor posuere pretium. In hac habitasse platea dictumst. Quisque malesuada eros ac odio tincidunt bibendum suscipit at tortor. Sed faucibus rutrum nisl, vitae porta lectus porttitor nec. Etiam quis nibh a lacus blandit vestibulum in nec metus. Donec a sodales dui.<br />
    <br />
    Nulla condimentum auctor eros a ultricies. Praesent vestibulum aliquam justo id hendrerit. Proin augue arcu, semper a convallis ac, ornare in massa. Etiam pharetra euismod nibh, nec aliquam leo mattis a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra felis bibendum ante fermentum bibendum. Morbi vitae lorem ipsum, ac convallis massa. Proin et tincidunt lorem. Sed at lacus at turpis iaculis tempor id sed augue. Quisque pharetra sollicitudin dolor, quis feugiat eros sollicitudin at. Phasellus quis libero at nulla pellentesque faucibus a eu purus. Etiam ultrices molestie massa eget tempus. Etiam eget sem nulla, id mollis magna. Vivamus nec est nisi. Donec condimentum nisi id purus ornare at iaculis est condimentum. Phasellus non turpis vitae diam tincidunt tempor.<br />
    <br />
    In metus massa, placerat non auctor et, pharetra ac massa. Ut quam purus, sodales sit amet scelerisque aliquam, consectetur et dui. Praesent non orci odio, sed auctor orci. Duis tincidunt metus quis arcu vehicula auctor. Phasellus posuere faucibus turpis, sed aliquet quam consequat in. Pellentesque ipsum massa, elementum non iaculis vitae, rutrum non nibh. Sed scelerisque semper iaculis. Sed euismod enim ac ante bibendum volutpat. Nulla consequat dapibus adipiscing.<br />
    <br />
    Nulla sit amet pulvinar metus. Integer sit amet nunc a ante cursus elementum. Donec imperdiet rhoncus vestibulum. Maecenas eu magna magna, eu pretium libero. Morbi condimentum, dolor pharetra gravida accumsan, nibh justo varius orci, sed condimentum odio mauris in metus. Maecenas nec sapien sed risus ullamcorper volutpat. Donec interdum sodales hendrerit. Proin at lorem non eros ornare ornare vel a augue.<br />
    <br />
    Mauris semper magna porttitor elit pulvinar vitae accumsan purus placerat. Ut laoreet ante at tellus semper tempus. Mauris lacinia condimentum massa, sed pharetra augue tincidunt et. Nulla vel eros ut ipsum pretium volutpat elementum at leo. Curabitur molestie massa at sem elementum ornare. Mauris sit amet lorem eu nisl scelerisque sollicitudin. Cras elementum nibh ac diam vehicula consectetur. In euismod venenatis velit, at venenatis orci feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu nulla augue. Nulla accumsan hendrerit ante, at euismod mi venenatis et. Nulla facilisi. Pellentesque aliquam adipiscing ligula, vitae iaculis nulla pellentesque aliquam. Nunc vel ultricies nisl.<br />
    </p>
    <img src="http://www.photographers.ie/site/wp-content/uploads/2012/02/Exhibition_SligoWide_PR_Photo.jpg" border="0">
            </div>
        </div>
    </body>
</html>

Saludos y gracias

IsaBelM · #2 (**permalink**) 03/10/2012, 15:07

se trata de asignar la propiead display: inline-block a body y a #content-container. al mismo tiempo hay que usar min-width: 100% en body

GatorV · #3 (**permalink**) 03/10/2012, 15:30

Interesante, gracias IsabelM, voy a ajustar mi layout porque parece que no funciona como debería aunque el ejemplo sí que lo hace bien.

¡Gracias!