2 replies [Last post]
jstuardo
Offline
Regular
Last seen: 7 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hello...

I have spent a lot of hours trying to expand a DIV 100% of its parent, but it was imposible.

You can see the page in question at the following URL:

http://mutual.qa.desytec.com/

When prompted, please enter "1" as both username and password. You will see immediately what the problem is.

Just in case, I give you the CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.container
{
    min-height:100%;
    position:relative;    
}
.header
{
    height: 180px;
}
.content
{
    padding-bottom:72px;
    height:100%;
}
.footer
{
    height: 72px;
    position:absolute;
    bottom:0;
    width:100%;    
}
body {
    margin: 0;
    padding: 0;
    background: #fff url(../images/img01.jpg) repeat-x left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
 
h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000000;
}
 
h1 { font-size: 44px; }
 
h2 { font-size: 18px; }
 
h3 { }
 
p, ul, ol {
    margin-top: 0;
    line-height: 100%;
    text-align: justify;
}
 
ul, ol { }
 
blockquote { }
 
a { color: #f4b782; }
 
a:hover { text-decoration: none; }
 
a img {
    border: none;
}
 
img.left {
    float: left;
    margin: 7px 30px 0 0;
}
 
img.right {
    float: right;
    margin: 7px 0 0 30px;
}
 
hr { display: none; }
 
.list1 {
}
 
.list1 li {
    float: left;
    line-height: normal;
}
 
.list1 li img {
    margin: 0 30px 30px 0;
}
 
.list1 li.alt img {
    margin-right: 0;
}
 
#wrapper {
}
 
/* Header */
 
#header-wrapper {
}
 
#header {
    width: 920px;
    height: 45px;
}
 
/* Menu */
 
#menu {
    float: left;
    width: 540px;
    height: 45px;
}
 
#menu ul {
    margin: 0;
    padding: 2px 0px 0px 5px;
    list-style: none;
    line-height: normal;
}
 
#menu li {
    display: block;
    float: left;
}
 
#menu a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 13px 25px 2px 25px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #818181;
}
 
#menu a:hover { text-decoration: underline; }
 
#menu .current_page_item a {
    height: 26px;
    background: #000 url(../images/img02.jpg) repeat-x left top;
    color: #343738;
}
 
#menu .first {
    background: none;
}
/* Search */
 
#search {
    float: right;
    width: 305px;
    height: 45px;
}
 
#search form {
    float: right;
    margin: 0;
    padding: 12px 30px 0 0;
}
 
#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
 
#search input {
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
    border: none;
}
 
#search-text {
    width: 135px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ffffff;
    color: #000000;
}
 
#search-submit {
    height: 21px;
    margin-left: 10px;
    padding: 0px 5px;
    background: #e7e7e7;
    color: #343738;
}
 
/* Page */
 
#page {
    width: 920px;
    margin: 0 auto;
}
 
#page-bgtop {
    padding-top: 30px;
}
 
/** LOGO */
 
#logo {
 
    height: 134px;
    margin: 0 auto;
 
    background: url(../images/img04.png) no-repeat center top;
}
 
#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
}
 
#logo p {
    text-transform: lowercase;
    font-size: 12px;
}
 
#logo h1 {
    padding-top: 40px;
    font-size: 40px;
}
 
#logo a {
    text-decoration: none;
    color: #FFFFFF;
}
 
/* Content */
 
#content {
    float: right;
    width: 658px;
    padding-top: 10px;
    padding-right: 30px;
}
 
/* Post */
 
.post {
    background: url(../images/img07.jpg) repeat-x left bottom;
    margin-bottom: 25px;
}
 
.post .title {
    height: 30px;
    color: #000;
}
 
.post .title a {
    text-decoration: none;
    color: #343738;
}
 
.post .date {
}
 
.post .meta {
    margin-top: -10px;
    padding: 10px 0px 2px 16px;
    background: url(../images/img03.gif) no-repeat left 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #343738;
}
 
.post .meta span {
    display: block;
    margin-top: -10px;
}
 
.post .meta a { }
 
.post .entry {
    padding: 10px 0;
}
 
.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
}
 
.post .links .comments {
}
 
.post .links .permalink {
    padding-left: 17px;
}
 
/* Sidebar */
 
#sidebar {
    float: inherit;
    width: 177px;
    padding-left: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #343738;
    background:#aac051;
}
 
#sidebar ul {
    margin: 0;
    padding: 0px;
    list-style: none;
    line-height: normal;
}
 
#sidebar li {
    margin-bottom: 30px;
    padding: 0 10px 10px 0px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(../images/img07.jpg) repeat-x left bottom;
}
 
#sidebar p {
    margin: 0;
    padding: 0px 10px;
}
 
#sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 7px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
}
 
 
#sidebar p {
    line-height: 200%;
}
#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #496b02;
}
 
/* Calendar */
 
#calendar {
}
 
#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
}
 
#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
}
 
#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
}
 
#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}
 
#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}
 
#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
}
 
#calendar tfoot #prev {
    border-top: 1px solid #24130F;
}
 
#calendar .pad {
    border-bottom: 1px solid #24130F;
}
 
#calendar #today {
    background: #24130F;
}
 
/* Footer */
 
#footer {
    width: 920px;
    height: 40px;
    margin: 0 auto;
    padding-top: 30px;
}
 
#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 70px;
    background: #464646;
    border-top: 2px solid #000;
}
 
#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #fff;
}
 
#footer a {
    color: #fff;
}
.style1 {
    font-size: 11px;
    color: #333333;
}
.style2 {
    font-size: 13px;
    font-weight: bold;
}
.style3 {
    font-size: 16px;
    font-style: italic;
}
.input {
    border-color:#333333;
    border-width:thin;
    font-size: 10px;
    color: #333333;
    width:inherit;
}

And this is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MUTUAL - Intranet</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <div class="container">
            <div class="header">
                <?php
                include ('template/barraSuperior.php');
                ?>
            </div>        
            <div class="content">
                <iframe src="pages/listaContratos.php" frameborder="0"
                        width="100%" height="100%" scrolling="auto">  </iframe>
            </div>
            <div class="footer">
                <?php
                include ('template/barraInferior.php');
                ?>
            </div>
        </div>
    </body>
</html>

Any help to solve this will be greatly appreciated

Thanks
Jaime

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Jamie, I couldn't see the

Hi Jamie,
I couldn't see the problem in Chrome Sad

The code you gave us contains PHP, what we need is the markup generated by PHP. To get that view the source of the page and copy that.

It looks like you are using floats, so the issue may be clearing, see clearfix

jstuardo
Offline
Regular
Last seen: 7 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hi tony, this is the

Hi tony,

this is the generated HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MUTUAL - Intranet</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div id="logo">
		<h1>&nbsp;</h1>
		<p></p>
	</div>
	<hr />
	<!-- end #logo -->
	<div id="header">
		<div id="menu">
			<ul>
		<li class="current_page_item">
				<a href="http://SistemaContrato/index.php" class="first">Inicio</a></li>
	<li><a href="http://SistemaContrato/indexReporteContratoAsignado.php">Reporte</a></li>
				<li><a href="http://SistemaContrato/index.php?accion=LOGOUT" >Cerrar Sesion</a></li>	
			</ul>
		</div>
	</div>
            </div>        
            <div class="content">
                <iframe src="pages/listaContratos.php" frameborder="0"
                        width="100%" height="100%" scrolling="auto">  </iframe>
            </div>
            <div class="footer">
                <!-- end #page -->
<div id="footer-bgcontent">
    <div id="footer">
        <p><strong>Sede Corporativa:</strong> Av. Lib. Bernardo O'Higgins 4850 pisos 12-20, Estaci√≥n Central. Tel√©fonos: (2) 2787 9000 - Fax: (2) 2787 9380 Santiago - Chile&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a></p>
    </div>
</div>
<!-- end #footer -->            </div>
        </div>
    </body>
</html>

In chrome does not work either. The footer is placed outside the visible page, displaying a vertical scroll bar. I need the footer to be shown at the bottom of the visible page.

In Firefox footer position works, but not the middle DIV height expansion.

Regards,
Jaime