none
#container/#pagecontent is not extending to footer RRS feed

  • Question

  • I am making a few changes to a website that was not created by me. I wanted to add some color to the sides so I made a 1 pixel wide gradient and repeated it when I added it to the body. The only problem is that I can't seem to get the #pagecontent div to extend all the way to the footer. I want this to happen so it keeps the body background only on the outside of my content and my content for the most part white. I put a minheight of 350px which extended it somewhat( screen shot seen below). The height has to be variable because neither column is the same on the 25 page site. Any suggestions would be much appreciated, I spent a ton of hours trying to change anything I could think of with no avail. Code is also pasted below. Thanks in advance, Scott

    CODE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <!-- #BeginEditable "doctitle" -->
    <title>Default</title>
    <!-- #EndEditable -->
    <link rel="stylesheet" type="text/css" title="CSS" href="styles/style3.css" media="screen" />
    
    </head>
    
    <body>
    
    <!-- #BeginEditable "body" -->
    <!-- Begin Container -->
    <div id="container">
    
    	<!-- Begin Masthead -->
    	<div id="masthead">
    		<a href="index.htm">
    		<img src="Logo%20300%20dpi.jpg" alt="" class="style6" style="margin-left: 2px" /></a>
    				<p>&nbsp;</p>
    		<p style="height: 89px"><span class="style5"><strong>Office</strong> (301) 229-067</span>1<br />
    		<strong><span class="style5">Fax</span></strong><span class="style5"> (301) 229-0434</span><br />
    		<strong><a href="mailto:info@capitalsungroup.com">Info@Capitalsungroup.com</a></strong>
    		<br /><strong> <a href="http://capitalsungroup.wordpress.com/">Capital 
    		Sun Group Blog </a></strong>
    		</p>
    	</div>
    	<!-- End Masthead -->
    	<!-- Begin Navigation -->
    	<div id="navigation">
    		<ul>
    			<li><a href="index.htm">Home</a></li>
    			<li><a href="About/About new.htm">About</a></li>
    			<li><a href="Industry/Industry new.htm">Industry Sectors</a></li>
    			<li><a href="Products/Products new.htm">Products/Technologies</a></li>
    			<li><a href="">Photo Gallery</a></li>
    			<li><a href="Finacial Center/FinacialCenter.htm">Financial Center</a></li>
    			<li><a href="Partners/Partners new.htm">Partners</a></li>
    			<li><a href="Contact/Contact new.htm">Contact</a></li>
    		</ul>
    	</div>
    	<!-- End Navigation -->
    	
    	<!-- Begin Page Content -->
    	<div id="pagecontent">
    		<!-- Begin Left Column -->
    		<div id="column_l">
    			<!-- #BeginEditable "content" -->
    			<h2>Headline 2</h2>
    			<p>insert content here</p>
    			<!-- #EndEditable -->
    			</div>
    		<!-- End Left Column -->
    		<!-- Begin Right Column -->
    			<!-- #BeginEditable "sidebar" -->
    		<div id="column_r" >
    			<h3>Headline 3</h3>
    			<p>insert content here</p>
    				</div>
    		<!-- End Right Column -->
    			<!-- #EndEditable -->	
    	</div>
    	<!-- End Page Content -->
    	<!-- Begin Footer -->
    	<div id="footer">
    		<span class="style5"> 
    		<a href="index.htm">Home</a> | 		
    		<a href="Contact/Contact new.htm">Contact</a> |
    		<a href="Industry/Industry new.htm">Industry Sectors</a> |
    		<a href="Products/Products new.htm">Products</a> |
    		<a href="Services/Services new.htm">Services</a> |
    		<a href="photo_gallery/photo_gallery.htm">Photo Gallery</a> |
    		<a href="http://capitalsungroup.wordpress.com/">Blog</a> |
    		<a href="promotions/promotions.htm">Promotions</a> |
    		<a href="">Terms of Use</a>
    		<!-- |
    		<a href="site_map/site_map.htm">Site Map</a>-->
    		</span>
    		<p>Copyright © 2012 Capital Sun Group. All Rights Reserved.</p>
    	</div>
    	<!-- End Footer -->
    	
    </div>
    <!-- End Container -->
    
    <!-- #EndEditable -->
    
    </body>
    
    </html>
    

    STYLESHEET IS AS FOLLOWS:

    body {
        margin: 0;
        padding: 0;
        border: 0;
        background-image:url('../greenbackround.jpg')
    }
    #container {
        background-color: white;
        height: 100%;
        position: static;
        z-index: auto;
    }
    #masthead {
        width: auto;
        margin: 0;
        padding-bottom: 5px;
        overflow: auto;
    }
    #navigation {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        clear: both;
    }
    #pagecontent {
        background-color: white;
        width: 750px;
        min-height: 350px;
        margin: 0 auto;
    }

    #column_l {
        position: relative;
        float: left;
    }
    #column_r {
        float: left;
        left: 0px;
        top: 0px;
        text-indent: 4px;
    }
    #footer {
        width: auto;
        clear: both;
        overflow: auto;
    }
    .float_right {
        float:right;
    }


    • Edited by scottw237 Thursday, May 17, 2012 5:50 PM
    Thursday, May 17, 2012 4:30 PM

Answers

  • "The height has to be variable because neither column is the same on the 25 page site."

    Even if it were, you shouldn't assign heights.  Text size can be changed by the visitor's browser.  You should always leave heights blank on containers that have text in them, to accomodate that.

    There is no automatic way to make two divs side-by-side be the same height, when they contain text and height must be left unspecified.  They will each be as tall as they need to be to contain what is inside them.

    There are several methods to give the illusion that they are the same height. 

    The term to google for is "equal height faux columns" and you'll find lots of example, some complex, some graphics-based, etc.

    Here's one simple example: http://www.css-lab.com/demos/2col/2col-faux.html# (Simple because the right column has no background color and simply lets the page background color through.)


    • Marked as answer by scottw237 Thursday, May 17, 2012 6:35 PM
    • Edited by KathyW2 Thursday, May 17, 2012 6:45 PM typo correction
    Thursday, May 17, 2012 5:46 PM

All replies

  • We need to see the full page to be able to help. Please give a link to the published page.

    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    Thursday, May 17, 2012 5:18 PM
  • "The height has to be variable because neither column is the same on the 25 page site."

    Even if it were, you shouldn't assign heights.  Text size can be changed by the visitor's browser.  You should always leave heights blank on containers that have text in them, to accomodate that.

    There is no automatic way to make two divs side-by-side be the same height, when they contain text and height must be left unspecified.  They will each be as tall as they need to be to contain what is inside them.

    There are several methods to give the illusion that they are the same height. 

    The term to google for is "equal height faux columns" and you'll find lots of example, some complex, some graphics-based, etc.

    Here's one simple example: http://www.css-lab.com/demos/2col/2col-faux.html# (Simple because the right column has no background color and simply lets the page background color through.)


    • Marked as answer by scottw237 Thursday, May 17, 2012 6:35 PM
    • Edited by KathyW2 Thursday, May 17, 2012 6:45 PM typo correction
    Thursday, May 17, 2012 5:46 PM
  • I have changed the published page too much for it to be an help. I attached the master.dwt code above. and her is what it looks like-

    Thursday, May 17, 2012 5:55 PM
  • Please don't post code and images here.  For anything more speciific than I already replied, you would need to publish the page you want help with, and give us a link.  A screen shot tells us nothing about what is behind it, and even listing HTML and CSS doesn't give us your iamges, and doesn't let us debug the page without trying to recreate it on our machine.  A published page lets us use browsers' developer tools on it.
    Thursday, May 17, 2012 6:00 PM
  • Scott, READ the Forum FAQs and Guidelines - Start Here, where you ill find that the FIRST forum posting guideline says this:

    Guidelines for the Forum

    If you have a question about your website, please post a link to the page about which you have a question. Without being able to actually see the page and all related files that are involved with your issue, it’s often impossible for anyone to help you.

    Yes, that means exactly what it says, and no, you are not an exception to the rule. We need to see the actual published page, in situ, with all linked and embedded CSS, images, and other resources available. The markup of the DWT from which the page as derived is not sufficient.

    In the current instance, the description of your objective indicated that you don't actually have an error condition that we need to analyze and help you to resolve, but are encountering a common issue caused by the nature of block elements, that they only expand far enough to contain their contents. It is so common that there are quite a few solutions which have been developed. Kathy has told you what to search on to find them, and pointed you to one of them. That's your answer.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, May 17, 2012 6:15 PM
  • Posting screen shots is exactly like showing your mechanic a photo of your car and asking him why it won't start.

    Posting code is like showing your mechanic a sample of brake fluid and asking him why your brakes don't work.

    there's a real reason why it states, clearly, in the Forum FAQ that we need to see the site/pages in situ, with all the parts working together.


    Titanic, the movie, as CSS:

    @mixin iceberg {
         float: none;
    }

    #titanic {
         @include iceberg;
    }

    Thursday, May 17, 2012 6:39 PM
  • Thanks again for your time.

    After looking at the published webpage through Firefox's Inspect Element function, the problem is also on the published page so I put the link below. I noticed that the body, #container and #pagecontent only extend past the NavBar on the index page, the other pages stop at the NavBar. Trying to find the problem now.

    The published page can be found at http://www.capitalsungroup.com/index.htm

    Thursday, May 17, 2012 7:10 PM
  • Scott,

    The page renders exactly as it should. It expands/contracts according to the content in the body and or the sidebar.

    What is it you want it to do?

    Mike

    Thursday, May 17, 2012 7:14 PM
  • Mike,

    I am updating that page now. I attached a background color to the body so it wasn't so bland. When I did that the body background showed where the container/pagecontent should be(picture up top) even the I have that set at white. So I am trying to figure out why the container/pagecontent divs are not expanding/contracting with the columns that are located in them.

    Thursday, May 17, 2012 7:32 PM