Member Avatar for jasonc31

I have a problem with getting the center DIV the same height as the 'bodyContainer' DIV

I have tried adding height:100% to the HTML tag and the inherit to the child divs, but this causes the page to always be 100% or seem like it is actually 150% and the footer is way down the page.

Can anyone suggest a way to fix this display problem I am having?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }

.bodyContainer {
background-color: orange;           margin: 0em auto;   padding: 0em 0em 0em 0em;   
width: 45em;                        height: 100%;
border-top-left-radius: 1.125em;    border-top-right-radius: 1.125em;
}

.menu {
background: green;                  margin: 0em;        padding: 0.313em 0em 0.313em 0em;
border-top-left-radius: 1.125em;    border-top-right-radius: 1.125em;
text-align: center;                 font-size: 1.1em;
}

.leftSidePanel {
background-color: orange;                               padding: 0.313em 0.625em 0em 0.625em;
float: left;
width: 10em;
}

.mainContent {
background-color: lightblue;        margin: 0em auto;   padding: 0.625em 0.625em 0.625em 0.625em;
width: 20em;                        height: 100%;
border-left: 0.5em solid purple;    border-top: 0.3em solid purple;     border-right: 0.5em solid purple;
border-top-left-radius: 1.125em;    border-top-right-radius: 1.125em;
text-align: center;                 float: left; 
}

.formWrapper{
                                    margin: 0em auto;   padding: 0em;
text-align: left;
border-top-left-radius: 1.125em;    border-top-right-radius: 1.125em;
}

.rightSidePanel {
background-color: orange;                               padding: 0.313em 0.713em 0em 0.313em;
float: right;
width: 10em;
}

.footer {
background-color: #ddd;             margin: 0 auto;     padding: 1em 0em 0em 0em;
text-align: center;
font-size: 0.875em;
}

.clearfloat {
clear: both;
}
--></style>

</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">

    <!-- menu start -->
    <div class="menu">
        <div class="clearfloat"></div>
    </div>
    <div class="clearfloat"></div>
    <!-- menu end -->

        <div class="leftSidePanel">
        <br><br>blah<br><br>blah<br><br>blah<br><br>blah
        <br><br>take some of this out<br><br>blah
        </div>

            <!-- mainContent start -->
            <div class="mainContent">
                <div class="formWrapper">
                <br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
                </div>
            </div>
            <!-- mainContent end -->

        <div class="rightSidePanel">
        <br><br><br><br>blah<br>blah<br><br>blah<br><br>blah
        </div>

<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>


</div>
<!-- body container end -->

</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 85 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for almostbob

a doctype >=html4 to get positioning to operate properly, html5 should work
unsure ab out the manifest link, 1999 seems like the html4 manifest,
anyhoo ,, the height of the content is irrelevant, to position the footer, you can position the footer directly., the order of the markup doesnt matter

footer {background-color:#ddd; margin:0 auto; padding:1em 0 0 0; text-align:center; font-size:0.875em; bottom:0; position:fixed; z-index:10;}

places the footer at the bottom of the page and makes other content slide underneath it, as the footer on this page does
removed 'em' from zero padding measurements, unneccessary, zero is dimensionless

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.