auto height page help

January 2, 201313 yr

I have 3 div's on a page that each relate to a hyperlink. Each page is a different height and I want the body to reduce size in relation to the div. Here is the pagehttp://www.purewarrior.co.uk and the code is

HTML

<?php
//require ('../includes/connect_db_pw.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>PW</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Include Facebox CSS and script files -->
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script type="text/javascript" src="facebox/facebox.js"></script>
<script>
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);

// remove "active" class from all links inside #nav
   $('#nav a').removeClass('active');

// add active class to the current link
   $(t).addClass('active');
}
</script>
</head>
<body>
<!-- Header Section -->
<div id="headerContainer">
 <div id="header"><a href="#" id="logo" onclick="goto('#home', this); return false"><img src="img/logo.png" /></a></div>
</div>
<!-- Navigation Section -->
<div id="nav">
 <div id="navHome"><a class="active" href="#" onclick="goto('#home', this); return false"><img src="img/navHome.png" /></a></div>
 <div id="navShop"><a href="#" onclick="goto('#shop', this); return false"><img src="img/navShop.png" /></a></div>
 <div id="navContact"><a href="#" onclick="goto('#contact', this); return false"><img src="img/navContact.png" /></a></div>
</div>
<div id="bar">

</div>
<div id="contentContainer">
 <div id="content">
  <div class="contentbox-wrapper">
   <div id="home" class="contentbox">
 <img src="img/home.png" /><br>
 <br>
 <br>
 <p class="homeFont">Pure Warrior is a clothing company designed to make a real difference. Originally developed in October 2012 the brand was designed to make a difference in one particular person’s life.<br>
 <br>
 Captain Naima Mohamed, who died of terminal cancer at the age of 27, her formidable courage and strength was the inspiration for the company "Pure Warrior". With Captain Naima gone, the clothing line will continue to thrive just as her memory shall live on.

 Now we honour her with the Pure Warrior brand, helping to raise money for cancer research and cancer support foundations through every purchase made.<br>
 <br>
 We thank you for your support.</p>
 <div id="imgWings">
  <img src="img/wings.png" />
 </div>
   </div>

   <div id="shop" class="contentbox">
 <img src="img/shop.png" /><br>
 <br>
 <br>
 <div class="itemBox" style="margin: 0px;">
  <div class="item">
   <img src="img/t-shirt.png" />
  </div>
  <div class="paypal">
   <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
   <input type="hidden" name="cmd" value="_s-xclick">
   <input type="hidden" name="hosted_button_id" value="H84MYNA3GC7LQ">
   <table>
    <tr><td><input type="hidden" name="on0" value="Colour">Colour</td></tr><tr><td><select name="os0">
    <option value="Black">Black </option>
    <option value="Blue">Blue </option>
    <option value="Red">Red </option>
    <option value="White">White </option>
    </select></td></tr>
    <tr><td><input type="hidden" name="on1" value="Size">Size</td></tr><tr><td><select name="os1">
    <option value="Small">Small </option>
    <option value="Medium">Medium </option>
    <option value="Large">Large </option>
    <option value="X-Large">X-Large </option>
    <option value="XX-Large">XX-Large </option>
    </select></td></tr>
   </table>
   <br>
   <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
   <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
   </form>
  </div>
  <p class="shopFont">Our Pure Warrior T-Shirts are our first designs of the brand available to buy.<br>
  <br>
  With the large Pure Warrior logo printed on the front chest, v-neck and moulded fit material makes this T-Shirt ideal for general use as well as when working out.</p>
 </div>

 <div class="itemBox">
  <div class="item">
   <img src="img/superBowlTicket.jpg" />
  </div>
  <div class="paypal">
   <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
   <input type="hidden" name="cmd" value="_s-xclick">
   <input type="hidden" name="hosted_button_id" value="JEPY5ZKWAK5SS"><br>
   <br>
   <br>
   <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
   <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
   </form>
  </div>
  <p class="shopFont">MAS Promotions presents their 4th Super Bowl Party at The Winchester Pub. Doors open at 9PM with kickoff at 11:30PM.<br>
  <br>
  Come see it on the BIG screen along with Bournemouths own team The Bobcats. Cheerleaders, Food, Raffle, Music and Bar. Mardi Gras themed, its sure to be a heck of a night.</p>
 </div>
   </div>

   <div id="contact" class="contentbox">
 <img src="img/contact.png" /><br>
 <br>
 <br>
 <p class="contactFont">Please contact us using the form provided for any questions or queries you may have.<br>
 <br>
 The Pure Warrior team will respond to your question as soon as possible.</p>
 <script>
 $("#contact").bind("submit", function() {
 $.ajax({
 type	    : "POST",
 cache	   : false,
 url		 : "/form_action_handler.php",
 data	    : $(this).serializeArray(),
 success: function(data) {
 $.fancybox(data);
 }
 });
 return false;
 });
 </script>
 <form action="includes/form_action_handler.php" method="POST" id="contact">
  <label>Name:</label>
   <input type="text" id="name" name="name">
  <label>Email Address:</label>
   <input type="text" id="mail" name="mail">
  <label>Comments:</label>
   <textarea rows="5" cols="20" id="comment" name="comment"></textarea>
  <input type="image" class="submit" name="submit" src="img/formSend.png" />
 </form>
 <a href="img/t-shirt.png" rel="facebox">View Test Image</a>
   </div>
  </div>
 </div>
</div>
<div id="footerContainer">
 <div id="footer">
  <div class="socialMedia">
   <a href="http://www.facebook.com/pages/Pure-Warrior-Co/457497380956356?fref=ts" target="_blank"><img src="img/facebook.png" /></a>
  </div>
  <div class="socialMedia">
   <a href="http://twitter.com/PureWarriorCo" target="_blank"><img src="img/twitter.png" /></a>
  </div>
  <div id="secondaryLinks">
   <p><a href="#home" class="footerText" onclick="goto('#home', this); return false">Home</a> | <a href="#shop" class="footerText" onclick="goto('#shop', this); return false">Shop</a> | <a href="#contact" class="footerText" onclick="goto('#contact', this); return false">Contact</a></p>
   <p class="footerText"><a href="http://www.nurdit.com" target="_blank">© nurdIT 2012</a></p>
  </div>
 </div>
</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}
html {
padding: 10px;
background: #FFF;
}
body {
background-image: url("../img/bg.png");
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 11pt;
line-height: 20pt;
color: #FFF;
}
/* ---------- Header Section ---------- */
#headerContainer {
height: 57px;
background: #FFF;
}
#header {
width: 940px;
height: 57px;
padding: 0px 20px;
margin: 0 auto;
}
#header #logo:hover {
opacity:0.8;
}
a img {
border: none;
}
/* ---------- Navigation Section ---------- */
#nav {
width: 940px;
height: 30px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
#navHome {
width: 88px;
height: 34px;
position: absolute;
top: -5px;
left: 572px;
}
#navShop {
width: 88px;
height: 34px;
position: absolute;
top: -5px;
left: 690px;
}
#navContact {
width: 139px;
height: 34px;
position: absolute;
top: -5px;
left: 800px;
}
#navHome:hover {
opacity:0.8;
}
#navShop:hover {
opacity:0.8;
}
#navContact:hover {
opacity:0.8;
}
#bar {
height: 45px;
background: #FFF;
margin-top: 160px;
}
/* ---------- Content Section ---------- */
#contentContainer {
width: 940px;
height: auto;
padding: 0px 20px;
margin: 0 auto;
margin-top: -148px;
margin-bottom: 10px;
}
#content {
overflow: hidden;
height: auto;
}
.contentbox-wrapper {  
position: relative;
left: 0;
width: 3000px;
}
.contentbox {
width: 918px;
height: 100%;
float: left;
padding: 10px;
}
#nav a.active {
/*font-weight: bold;*/
}
/* ---------- Home Section ---------- */
.homeFont {
width: 500px;
float: left;
}
#imgWings {
float: left;
padding: 20px 0px 0px 30px;
}
/* ---------- Shop Section ---------- */
.itemBox {
margin-top: 10px;
overflow: hidden;
}
.item {
width: 200px;
height: 200px;
border: solid 10px #FFF;
float: left;
}
.paypal {
float: left;
padding-left: 50px;
font-size: 14px;
font-weight: bold;
}
.shopFont {
padding-left: 550px;
}
#_xclick label {
display: block;
font-size: 14px;
font-weight: bold;
}
select {
width: 150px;
display: block;
}
/* ---------- Contact Section ---------- */
#contact form{
margin-left: 100px;
float: left;
font-size: 14px;
}
#contact label {
padding: 0px 0px 5px 0px;
display: block;
font-weight: bold;
}
#contact input {
width: 446px;
margin: 0px 0px 10px 0px;
padding: 5px;
display: block;
color: #131313;
background: #FFF;
border: solid 2px #FFF;
}
#contact textarea {
width: 446px;
height: 120px;
margin: 0px 0px 10px 0px;
padding: 5px;
display: block;
color: #131313;
background: #FFF;
border: solid 2px #fff
}
#contact input.submit {
padding: 0px;
display: block;
background: none;
border: none;
width: 88px;
height: 34px;
}
.contactFont {
width: 300px;
float: left;
}
/* ---------- Footer Section ---------- */
#footerContainer {
background: #FFF;
}
#footer {
width: 940px;
padding: 0px 20px;
margin: 0 auto;
}
.socialMedia {
width: 109px;
height: 50px;
padding: 8px 50px 0px 0px;
float: left;
}
#secondaryLinks {
padding-top: 5px;
text-align: right;
font-size: 12px;
}
.footerText {
color: #131313;
}
a:link {
color: #131313;
}
a:visited {
color: #131313;
}

January 2, 201313 yr

im assuming you want the height of the contentContainer to be auto,

if so, this should work

height: inherit;

then change your doc type to this

<!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">

January 2, 201313 yr

Try adding overflow:hidden to .contentbox-wrapper...

overflow:hidden;

Then change your jQuery to this:

function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"height": $(id).outerHeight() + "px", "left": -($(id).position().left)}, 600);

// remove "active" class from all links inside #nav
       $('#nav a').removeClass('active');

// add active class to the current link
       $(t).addClass('active');
}

January 2, 201313 yr

then change your doc type to this

<!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">

Why would this make a difference?

Also, I think Andy's suggestion is most effective, achieving the same result with just CSS may not be possible or at least very difficult without a selector to select the parent of a child element; just make sure that it degrades nicely on machines without javascript.

January 2, 201313 yr

if the doc type isnt declared the inherit height property, like many other properties may not work in some browsers..

Craig

January 2, 201313 yr

if the doc type isnt declared the inherit height property, like many other properties may not work in some browsers..

Craig

But he did declare it...

<!DOCTYPE html>

(4th line of his html)

Edited January 2, 201313 yr by Alluziion

January 2, 201313 yr

Apologies, i missed it.

January 2, 201313 yr

Author

thanks guys and Andy again

March 24, 201313 yr

Author

this is weird Andy, Looking over this the auto height works but the auto height keeps increasing the more I click the links?

auto height page help

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)