Have white space grow / shrink

Tom Knowlton
Tom Knowlton used Ask the Experts™
on
http://test.huskyshoponline.com/coursesearch.aspx
http://test.huskyshoponline.com/login.aspx

See how there is a bunch of white space before the footer at the bottom?

For example, on this page:

http://test.huskyshoponline.com/login.aspx

the footer should be visible perhaps half an inch below the last of the links on the left hand side.  So you have the link for Publisher Reps and then a little bit of white space, and then the links for "join email list", twitter and facebook, etc.


How can I have this space grow and shrink according to content needs?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
set the height to auto.
Top Expert 2011

Commented:
Well, try this.

I changed a bunch, so take a look and see if you like it.

Make sure you back up before using.



 
body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window

Top Expert 2011

Commented:
I forgot that I did make ONE markup change.

Close the Al div before the footer.

Get the footer OUTSIDE this div.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2011

Commented:
Sorry, had to make one more change.

 
body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window

Top Expert 2011

Commented:
When I said FOOTER

I was referring to the H div.

This needs to be OUTSIDE the AL div.
Tom KnowltonWeb developer

Author

Commented:
While testing in Mozilla:

http://test.huskyshoponline.com/
http://test.huskyshoponline.com/coursesearch.aspx


Still off a bit....but very close!

Just saw you post again, I think.....so this may be premature.....
Top Expert 2011

Commented:
Looks like you closed the DIV in the wrong spot.

I added an additional </div>

just before <div id="H">

This was so that the Al div would only contain E and D.

Naturally, because you closed it early, you would have to remove the </div> that was closing it prior to that.
Tom KnowltonWeb developer

Author

Commented:
I just moved "H" outside the "A1" div.


Apparently did not do it correct?


Let me slow down and wait for your reply to THIS.
Tom KnowltonWeb developer

Author

Commented:
Perhaps I should post my CURRENT CSS and MARKUP?
Tom KnowltonWeb developer

Author

Commented:
Waiting to hear from you.

Please confirm most recent suggestion.
Tom KnowltonWeb developer

Author

Commented:
Here is my current CSS:

body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window










Here is the current MARKUP:  (for the master page)


(just posted the relevant bits)

<body id="bodytaguconn" runat="server">
    <form id="mainbodyformuconn" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="toolKit" AllowCustomErrorsRedirect="true"
        EnablePartialRendering="true">
        <Scripts>
            <%-- <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAim5Ru7zlC5LJzi3w0XqvXxTNtfGCkjY40i7thHFIqUc19l7sbRSfcvST6GfqHG6636f3bKKwrbkUbA"></script>
			<script language="javascript" type="text/javascript">
			//<![CDATA[
				google.load("jquery", "1");
			//]]>
			</script>
		   
            --%>
            <atlas:ScriptReference Path="~/scripts/thickbox.js" />
            <atlas:ScriptReference Path="~/scripts/contact.js" />
        </Scripts>
    </ajaxToolkit:ToolkitScriptManager>



<div id="W" class="W">
<div id="C" class="C">
<div id="C1" class="C1"></div><%--end div c1--%>
<div id="O" class="O">
<div id="S" class="S"><uc10:Login1 ID="Login1" runat="server" /></div><%--end div s--%>
</div><%--end div o--%>
<div id="Y" class="Y">
<div id="V" class="V"></div><%--end div v--%>
<div id="P" class="P">
<a href="http://test.huskyshoponline.com/Default.aspx" runat="server"><cc1:themeawareimage ID="ThemeAwareImage2" runat="server" ImageUrl="new_header_angled2.png" /></a>
</div><%--end div p--%>
<div id="U" class="U">


<div id="T" class="T"><object id="searchtcsdatc" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
            width="200" height="22" align="left">
            <param name="allowScriptAccess" value="always" />
            <param name="allowFullScreen" value="false" />
            <param name="movie" value="/searchtcs.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="wmode" value="transparent" />
            <embed src="/searchtcs.swf" id="searchtcsdatcembed" quality="high" bgcolor="#ffffff"
            width="200" height="22" name="searchtcsdatcsname" align="left" allowscriptaccess="always"
            allowfullscreen="false" wmode="transparent" type="application/x-shockwave-flash"
            pluginspage="https://www.adobe.com/go/getflashplayer" />
</object>
</div><%--end div t--%>
<div id="X" class="X"><uc1:TopCart ID="TopCartHusky" runat="server" /></div><%-- end div x --%>
</div><%--end div u--%>
</div><%--end div y--%>


<div id="Z" class="Z">
<div id="N" class="N">
</div>
<%--end div n--%>
<div id="R" class="R">
<uc5:HorizMenu ID="HorizMenu1" runat="server" />
</div><%--end div r--%>
</div><%--end div z--%>

</div><%--end div c--%>
<div id="A1" class="A1">
<div id="E" class="E">

<div id="F" class="F"><cc1:themeawareimagebutton  ID="husky_dog" 
        runat="server" ImageUrl="husky-dog.png" PostBackUrl="http://bookstore.uconn.edu/departments/text/text_tg.htm" /></div><%--end div f--%>
<div id="G" class="G">
<!-- <uc3:Catalogs runat="server" ID="Catalogs1" /> -->

<div class="lefthandnav">
<div class="catnav3"><a id="A1" href="http://test.huskyshoponline.com/coursesearch.aspx" runat="server">Textbooks</a></div>
<div class="catnav2"><a id="A2" href="http://bookstore.uconn.edu/departments/text/text_stu.htm" runat="server">Student Info</a></div>
<div class="catnav2"><a id="A3" href="http://bookstore.uconn.edu/departments/text/text_fac.htm" runat="server">Faculty Info</a></div>
<div class="catnav2"><a id="A4" href="http://bookstore.uconn.edu/departments/text/text_refund.htm" runat="server">Refund Info</a></div>
<div class="catnav2"><a id="A5" href="http://bookstore.uconn.edu/departments/text/text_bb.htm" runat="server">Buy Back Info</a></div>
<div class="catnav2"><a id="A6" href="http://bookstore.uconn.edu/departments/text/text_pub.htm" runat="server">Publisher Reps</a></div>
</div>

</div><%--end div g--%>
</div><%--end div e--%>
<div id="D" class="D">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>    
</div><%--end div d--%>
</div><%--end div a1--%>


<div id="H" class="H">



<div id="I" class="I">

<div id="D1" class="D1">

<cc1:ThemeAwareImageButton ID="ThemeAwareImageButtonSJoinEmail" runat="server" ImageUrl="emailsignup.png" PostBackUrl="http://bookstore.uconn.edu/mailing.htm"></cc1:ThemeAwareImageButton>


</div><%--end div D1--%>


</div><%--end div i--%>




<div id="J" class="J">

<uc11:HuskyFooter ID="HF" runat="server" />

</div><%--end div j--%>





<div id="K" class="K">








<!-- BEGIN FOOTER | DO NOT EDIT THIS AREA -->
<%--<div id="footer">
<div class="content">
<div class="footer_r">
<a href="http://bookstore.uconn.edu/">UConn Co-op Bookstore</a> &nbsp;·&nbsp;Phone:
(860) 486-3537<br />
Questions: <a href="mailto:asktheco-op@bookstore.uconn.edu">Co-op Help/Info</a><br />
Webmaster: michael.jean@uconn.edu<br />
</div>
<div class="footer_l">
<br />
Powered by:<br />
<a href="http://total-computing.com/">
Total Computing</a><br />
</div>
</div>
</div>--%>
<!-- END FOOTER -->




</div><%--end div k--%>
</div><%--end div b1--%>
</div><%--end div h--%>




</div><%--end div w--%>


    </form>


</body>
</html>

Open in new window

Top Expert 2011

Commented:
Well, it looks like your markup is a little funky, but you got the H outside the Al which is what you needed.

Also, be careful, you have a lot of redundancy. What I mean by that is you give a class (D in this case) properties in one place, and then define them again someplace else. You will always run into problems doing it this way.

I will post fix in a minute. Working through it.

Top Expert 2011
Commented:
Try this:

Change these properties:

.D {
    background-color: White;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 814px;
}

Open in new window


#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 210px;
}

Open in new window


.E {
    background-color: #FFFFFF;
    float: left;
    position: relative;
    width: 210px;
}

Open in new window


I changed the min-height to 450 and the height: 700px I removed from .D and .E.

Let me know when you have made the changes.
Top Expert 2011

Commented:
Also, change the A1 class to this:

.A1 {
    background: none repeat scroll 0 0 white;
    float: left;
    width: 1024px;
}

Open in new window

Tom KnowltonWeb developer

Author

Commented:
BINGO!!!!!!!!!!!!!!


Looking MUCH better now!!!!!!!!!



I tried a few pages NOT part of my original question:


http://test.huskyshoponline.com/SecureOrderForm.aspx

(use un/pw

m    i    k    e

(spaces removed) to authenticate if you need to...then buy a textbook to get to the screen.



Something happened:



 secure
Top Expert 2011

Commented:
The reason it is doing that is because of the

.AEPS {
    height: 100%;
   left: 0;
    position: absolute;
   top: 0;
}

Change it to:

.AEPS {
    height: 100%;
    position: absolute;
}

Open in new window

Tom KnowltonWeb developer

Author

Commented:
This helped.

Still not quite there.

See what happens now please.
Top Expert 2011

Commented:
Already working on it........
Top Expert 2011

Commented:
The problem here is the iframe.

Trying to figure out how to get the parent DIV (D) to expand because of the iframe.
Top Expert 2011

Commented:
Alright, remove the position: absolute from .AEPS.

Now?
Tom KnowltonWeb developer

Author

Commented:
Fixed it.


I have more pages that need some tweaking.


Should I post them as new questions?

Commented:
yes
Top Expert 2011

Commented:
Whatever you want. Don't mind helping.

Also wouldn't mind more points....

:P
Top Expert 2011

Commented:
@SSupreme

LOL.
Tom KnowltonWeb developer

Author

Commented:
Of course!!!

Let me settle this question...then keep eyes peeled for more.
Tom KnowltonWeb developer

Author

Commented:
Just saw Supreme's post.

::: nice :::::
Tom KnowltonWeb developer

Author

Commented:
thx....accurate and fast....all I could ask for!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial