CODEWITHSUNDEEP
htmlcss
VenRaj
VenRaj

Reputation: 37

DIV is not expanding in IE7, IE8 and IE9

I am using four DIVs: container, header, content and footer.

Based on the text or images the content DIV is expanded but the header and footer div do not expand in IE7, IE8 and IE9 but works fine in Firefox, IE10 and IE11.

HTML:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS

<style>
body {
    height:100%;
    margin-left: 0;
    margin-top: 0;
    padding:0;
    width:100%;
    position: relative;
    display:inline-block;
}

#header {
    top:0px;
    height:75px;
    width:100%;
}

#container {
    display:table;
    width:100%;
    height:100%;
}

#content {
    width:100%;
    height:auto;
}

#footer {
    top:5px;
    bottom:0px;
    height:45px;
    width:100%;
}
</style>

Any ideas?

Upvotes: 0

Views: 449

Answers (2)

anonymous
anonymous

Reputation: 4064

You have a fixed value on footer and header

#footer
{
    top:5px;
    bottom:0px;
    /*height:45px;*/
    width:100%;
}
#header
{
    top:0px;
    /*height:75px;*/
    width:100%;
}

When it has fixed value, the element won't expand. The min-height could be a simple solution but a browser that doesn't support CSS2.0 won't process it right and could give you an unexpected result.

ANSWER UPDATED...

I'm giving you an answer that you might have expected. I still don't know what you are trying to achieve, what kind of layout do you need, and etc. But with a wild guess, I tweaked this code. It's going to be the exact answer for you if what you wanted was making header and footer responsive to the content div.

body {
  margin-left: 0;
  margin-top: 0;
  padding:0;
}

#header {
  top:0px;
  width:100%;
  height:75px;
  position:absolute;
  background-color:#eaeaea;
}

#content {
  display:table;
  padding:75px 0 45px;
  height:150px;
  position:relative;
}

#footer {
  bottom:0px;
  width:100%;
  height:45px;
  position:absolute;
  background-color:#1d1d1d;
}
<!DOCTYPE html>	
<html>
	<head>
	</head>
	<body>

		<div id="content">
            
            <h3>Expanding as you expected....</h3>
            <h5>
                * Try remove these h3 and h5 element. <br/>
              the result will be nothing on your screen because no dimension is given to content div.
            </h5>
			<div id="header"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

Try and see above code result and test how it expands as the content div gets smaller or bigger.

Upvotes: 3

VenRaj
VenRaj

Reputation: 37

style.css 

      body
        {
            height:100%;
            margin-left: 0;
            margin-top: 0;
            padding:0;
            width:100%;
            position: relative;
            display:inline-block;
        }
        .header
        {
            top:0px;
            height:75px;
            width:100%;
        }
        .container
        {
            display:table;
            width:100%;
            height:100%;
        }
        .content
        {
            width:100%;
            height:auto;
        }
        .footer
        {
            top:5px;
            bottom:0px;
            height:45px;
            width:100%;
        }

**index.xhtml**


   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:pm="http://primefaces.org/mobile"
    >
<f:view>
 <h:head>
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
 </h:head>
 <h:body>
  <div class="container"> 

   <div class="header" class="ui-layout-unit-header ui-widget-header">    
        <ui:include src="${ModuleGenerator.headerPageh}" />
   </div>

   <div class="content" class="ui-panel-content ui-widget-content">
        <ui:include src="/pages/system/homeContent.xhtml"/>
   </div>  

   <div class="footer" class="ui-layout-unit-footer ui-widget-header">
        <ui:include src="${ModuleGenerator.headerPageh}" />
   </div>

</div>

  </h:body>
  </f:view>
</ui:composition>

I have posted my full code of my layout...i hope it will okey for you to undestand yourself and reply.

this page working fine in IE10,IE11 and firefox but not works in IE6,IE7 and IE8.

what i am trying to achieve is? when the content(width) of div is expand dynamically the header and footer div(width) also expand based on content(width).

When we scroll down the page on browser then that page need to get centre alignment.

i am the beginner.

if you need further details post me.i will reply.

Upvotes: 0

Related Questions