#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    Div won't expand correctly


    I am trying to explain this the best that I can...

    So, first of all, I want the DIV I am having issues with to have some room/margin at the bottom at about 140px.

    I add information into this main div which is the white area that contains all the text/slideshow within the body and expands to the bottom of the page, but the main DIV does not expand with the information that is added!

    So the information goes outside of the main DIV. I do not know how to fix this. Of course, all computers are different so height is different as well. I set the height to 98% and as you can see the page does expand, but the DIV does not.

    nstygaming.com


    Here is my coding!

    HTML:
    Code:
    <html>
      <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <style type="text/css">
    #myreel { /*sample CSS for demo*/
      border: 2px solid black;
      position: relative;
      top: 3px;
      width: 75%;
    }
    
    .paginate {
      width: 330px;
      margin-top: 5px;
      font: bold 14px Arial;
      text-align: center;
    }
        </style>
        <script src="reelslideshow.js" type="text/javascript">  /*********************************************** * Continuous Reel Slideshow-  Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/
        </script>
        <script type="text/javascript">
    var firstreel = new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image 	
    	imagearray: [
    		["images/slide1.png"],
    		["images/slide1.png"]
    	],
    	displaymode: {
    		type: 'auto',
    		pause: 6000,
    		cycles: 2,
    		pauseonmouseover: true
    	},
    	orientation: "h", //Valid values: "h" or "v" 	
    	persist: true, //remember last viewed slide and recall within same session? 	
    	slideduration: 1000 //transition duration (milliseconds)
    })
        </script> 
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>NsTyGaming - Home</title>
      </head>
      <body>
        <center>
          <div id="header">
            <div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
          </div>
        </center>
        <ul id="menubarone">
          <li><a href="index.html">Home</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="ourteam.html">Our Team/Clan</a></li>
          <li><a href="forums">Forums</a></li>
          <li><a href="more.html">More</a></li>
        </ul>
        <div id="midsection">
          <div class="display"><a href="index.html" style="text-decoration: none;">NsTyGaming</a></div>
          <div class="barone">
            <hr />
          </div>
          <center>
            <div id="myreel"></div>
            <div class="bartwo">
              <hr />
            </div>
          </center>
          <div id="sponsor">
            <a class="sponsorhead">Want us to sponsor your clan?</a> 
            <p class="sponsorbody">Here at NsTyGaming, we are interested in sponsoring clans with potential for both Xbox-360/One and PS3/4. There are many benefits as being sponsored and you will haev access to them if you are approved. Below are the requirements for a sponsorship with NsTy!</p>
            <ul id="requirements">
              <li><a>Must be on the Xbox-360 or PS3. We will support Xbox-One and PS4.</a></li>
              <li><a>The games your clan plays must follow our </a><a href="gamecriteria.html">criteria</a>.</li>
              <li><a>You must be at least 13 Years Old and 17 Years Old for games that are rated M for Mature.</a></li>
              <li><a>Each player must have an active PSN Account or Xbox Account(Gold).</a></li>
              <li><a>You must have at least 6 active members in your clan.</a></li>
              <li><a>Game standards change with each game. You must meet them for the games you wish to associate with. They will be discussed upon application.</a></li>
            </ul>
            <ul id="requirements">
              <li><a>Must be on the Xbox-360 or PS3. We will support Xbox-One and PS4.</a></li>
              <li><a>The games your clan plays must follow our </a><a href="gamecriteria.html">criteria</a>.</li>
              <li><a>You must be at least 13 Years Old and 17 Years Old for games that are rated M for Mature.</a></li>
              <li><a>Each player must have an active PSN Account or Xbox Account(Gold).</a></li>
              <li><a>You must have at least 6 active members in your clan.</a></li>
              <li><a>Game standards change with each game. You must meet them for the games you wish to associate with. They will be discussed upon application.</a></li>
            </ul>
          </div>
        </div>
      </body>
    </html>
    CSS:
    Code:
    body {
      background: grey;
      margin: auto auto;
    }
    
    #header {
      background: #f3f4f4;
      border: 1px black solid;
      position: relative;
      width: 75%;
      height: 100px;
      margin-top: 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    
    .logo {
      position: relative;
      float: left;
      top: 7px;
    }
    
    #menubarone {
      width: 75%;
      background: #eeeeee;
      position: relative;
      float: left;
      list-style-type: none;
      height: 35px;
      margin: 0;
      padding: 0;
      display: inline;
      margin-left: 12.4%;
      margin-right: -1px;
      border-bottom: 1px black solid;
      border-left: 1px black solid;
      border-right: 1px black solid;
      z-index: 2;
    }
    
    #menubarone li {
      position: relative;
      display: inline;
      top: 7px;
      padding: 5px;
    }
    
    #menubarone li a {
      color: #3fbcea;
      text-decoration: none;
      padding: 5px;
      font-size: 18px;
      font-family: sans-serif;
    }
    
    #menubarone li a:hover {
      color: #84ceed;
      text-decoration: none;
      padding: 5px;
      font-size: 18px;
      font-family: sans-serif;
    }
    
    #midsection {
      position: relative;
      top: 31px;
      width: 75%;
      height: 98%;
      margin-left: 12.4%;
      background: #f3f4f4;
      border-left: 1px black solid;
      border-right: 1px black solid;
    }
    
    .display {
      position: relative;
      top: -20px;
      margin-left: 10px;
    }
    
    .display a {
      color: #3fbcea;
      font-size: 16px;
      font-family: sans-serif;
    }
    
    .display a:hover {
      color: #84ceed;
      font-size: 16px;
      font-family: sans-serif;
    }
    
    #bottommenu {
      position: relative;
      top: 31px;
      width: 75%;
      height: 100px;
      margin-left: 12.4%;
      background: #f3f4f4;
      border-left: 1px black solid;
      border-right: 1px black solid;
    }
    
    .barone {
      position: relative;
      top: -15px;
    }
    
    .bartwo {
      position: relative;
      top: 20px;
    }
    
    #sponsor {
      position: relative;
      top: 15px;
      margin-left: 5px;
    }
    
    .sponsorhead {
      font-family: sans-serif;
      font-size: 20px;
    }
    
    .sponsorbody {
      font-family: sans-serif;
      font-size: 16px;
    }
    
    #requirements {
      color: #3fbcea;
      padding-bottom: 5px;
      font-family: sans-serif;
      font-size: 16px;
    }
    
    #requirements li {
      padding-bottom: 5px;
      list-style-type: none;
    }
    
    .barthree {
      position: relative;
      top: 10px;
    }
    Last edited by Kravvitz; June 25th, 2013 at 10:10 PM. Reason: reformatted the code

IMN logo majestic logo threadwatch logo seochat tools logo