4 Replies - 522 Views - Last Post: 04 April 2011 - 02:37 PM

#1 superbyelich  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-March 11

Divs within Divs, and moving them where I want them

Posted 31 March 2011 - 06:15 PM

Hey all. Found this forum while searching for a fix for this. So I decided to just go ahead and ask the question myself.

Site I am referring to: http://www.chs.accom...type/index.html

I would like to get the div box that has the Address in the left-hand sidebar to move to the bottom of it's containing div, and stick there no matter how big the layout gets.

If anyone could assist, please do. Thank you.

oh and here is my HTML and CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
 <head>
  
  <title>Chincoteague High School</title>

  <meta content="Official website of Chincoteague High School" name="description">
  <meta content="Accomack County Public Schools, Chincoteague High School, Chincoteague" name="keywords">
  <meta content="TRUE" name="MSSmartTagsPreventParsing">
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <link href="styles/chs.css" type="text/css" rel="stylesheet">

 </head>

 <body>
  
  <div id="body">
  
   
  <div id="head_1">
   <a href="index.html" id="home_btn"> </a>
  </div>
   
  
   <div id="head_2">
  
   </div>
  
   <div id="head_3">
  
   </div>
   
   <!--start navbar-->
   <div id="nav_wrapper">
   <div id="top_menu">
   
    <ul id="navbar">
	 <li><a href="about.html" id="about_btn">About Us</a></li>
	 <li><a href="staff.html" class="top_menu">Staff</a></li>
	 <li><a href="http://www.sbo.accomack.k12.va.us/public/menus/" class="top_menu">Lunch Menu</a></li>
	 <li><a href="http://new.schoolnotes.com/xpages/view/154856/1" class="top_menu">Guidance</a></li>
	 <li><a href="calendar.html" class="top_menu">Calendar</a></li>
	 <li><a href="links.html" class="top_menu">Links</a></li>
	</ul>
	
   </div>
   </div>
   <!--end navbar-->
   
   <!--main content-->
   <div id="table_wrapper">
   
	<div id="l_menu_container" class="side_menu">
     
	 <div id="l_menu">
	  <h4>Parent Resources</h4>
       <p><a href="https://ps.sbo.accomack.k12.va.us/public/">PowerSchool Parent Portal</a></p>
       
	   <p><a href="http://www.sbo.accomack.k12.va.us/">ACPS Website</a></p>
	   
       <p><a href="http://www.boarddocs.com/vsba/accomack/Board.nsf/Public/">ACPS School Board</a></p>
	 </div>
	  
	  
	 <div id="contact_address">
	  <hr>
	  <p>4586 Main St.
	      Chincoteague, VA 23336</p>
	 </div>
		 	 
	</div>
   
    <div id="content">
     
	 <div id="school_pic">
	 
	 </div>
	 
	 <h4>Welcome to Chincoteague High School's Website!</h4>
   
     <p class="main_content">The administration, faculty and staff welcome you to Chincoteague High School.  This website contains important information about Chincoteague High School.  Please check it out!  We invite you to take an active role in your child's education by visiting our school and supporting our academic, sporting and social functions.  Our school and staff are dedicated to providing your child with a quality education.  With your support we will strive to make this year rewarding for all involved.  If you have any questions or concerns, our doors are always open.</p>
    
	 <h2 class="smoosh">Principal, Mr. Chris Holland</h2>
	 <h2 class="smoosh">Vice Principal, Ms. Karen Taylor</h2>
	 
	</div>
   
    <div id="r_menu_container" class="side_menu">
      
	  <div id="r_menu">
	   <h4>Teacher Resources</h4>
      
	   <p><a href="https://www.chs.accomack.k12.va.us/cgi/sqwebmail/">CHS Webmail</a></p>
       
	   <p><a href="http://resource.sbo.accomack.k12.va.us/itrt/">ITRT Website</a></p>
	   
       <p><a href="https://ps.sbo.accomack.k12.va.us/teachers">PowerTeacher</a></p>
      </div>
	  
	  <div id="contact_numbers">
	  
	   <hr>
	  
	   <p>Phone: 757-336-6166</p>
	   
	   <p>Fax: 757-336-1902</p>
	  
	  </div>
	
	</div>
	<!--main content-->
	
   </div>
   
   <div id="spacer">
   
   </div>
   
   <div id="footer">
   
   <a href="http://www.sbo.accomack.k12.va.us"><img alt="Accomack County Public Schools" src="images/acps_logo.png"></a>
   <br>
   Copyright  2011 Accomack County Public Schools
   </div>
   
  </div>
  
 </body>
 
</html>


body {
  background-color: rgb(44, 44, 44);
  font-family: verdana, sans-serif;
  font-size: 12px;
  }

a {
  outline: none;
  }
  
#body {
  margin-left: auto;
  margin-right: auto;
  width: 1076px;
  }
  
#head_1 {
  height: 159px;
  width: 236px;
  background-image: url(../images/chs_logo.png);
  background-position: center;
  float: left;
  }
  
#home_btn {
  display: block;
  height: 100%;
  width: 100%;
  }  
  
#head_2 {
  height: 159px;
  width: 649px;
  background-image: url(../images/chs_top.png);
  background-position: center;
  float: left;
  }

#head_3 {
  height: 159px;
  width: 191px;
  background-image: url(../images/chs_top_right.png);
  background-position: center;
  float: left;
  }
  
/*Begin Navbar*/
#navbar {
  text-align: center;
  margin: auto;
  padding: 0;
  float: left;
  
  }
  
#navbar li {
  display: inline;
  padding: 0;
  margin: 0;
  }
  
#navbar a:link,
#navbar a:visited {
  color: rgb(44, 44, 44);
  background: rgb(210, 210, 48);
  padding-top: 2px;
  float: left;
  height: 20px;
  border-right: 1px solid rgb(44, 44, 44);
  text-decoration: none;
  font: bold 14px Verdana, sans-serif;
  text-shadow: 2px 2px 2px #555;
  margin: auto;
  }

#navbar a:hover {
  color: #ffffff;
  background: rgb(44, 44, 44);
  }  
  
#about_btn {
 border-left: 1px solid rgb(44, 44, 44);
 width: 179px;
 }
 
a.top_menu {
  width: 178px;
  }  
/*End Navbar*/

/*Begin Main Content*/
#table_wrapper {
  display: table;
  float: left;
  }

#content {
  display: table-cell;
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255);
  width: 674px;
  }

#school_pic {
  margin: auto;
  background-image: url(../images/school.jpg);
  height: 452px;
  width: 600px;
  }
  
p.main_content {
  text-indent: 30px;
  }

h2.smoosh {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: right;
  }
  
#l_menu_container {
  border: 1px solid white;
  display: table-cell;
  padding: 5px;
  text-align: center;
  background-color: rgb(34, 43, 64);
  color: rgb(255, 255, 255);
  height: 100%;
  width: 200px;
  } 
  
#l_menu_container h4 {
  text-decoration: underline;
  } 

#l_menu {
  border: 1px solid yellow;
  vertical-align: top;
  margin: auto;
  }
  
#contact_address {
  vertical-align: bottom;
  border: 1px solid red;
  margin: auto;
  height: 100%;
  width: 170px;
  padding-top: 30px;
  text-align: left;
  } 

#contact_address hr {
  color: rgb(210, 210, 48);
  width: 75%;
  }  
  
#r_menu_container {
  display: table-cell;
  padding: 5px;
  text-align: center;
  background-color: rgb(34, 43, 64);
  color: rgb(255, 255, 255);
  height: 100%;
  width: 200px;
  }

#r_menu_container h4 {
  text-decoration: underline;
  }  
  
#r_menu {
  vertical-align: top;
  margin: auto;
  }
  
#contact_numbers {
  margin: auto;
  width: 170px;
  padding-top: 30px;
  text-align: left;
  }

#contact_numbers hr {
  color: rgb(210, 210, 48);
  width: 75%;
  }    

div.side_menu {
  vertical-align: top;
  }
  
div.side_menu a:link {
  text-decoration: none;
  color: rgb(255, 255, 255);
  }
  
div.side_menu a:visited {  
  text-decoration: none;
  color: rgb(255, 255, 255);
  }
  
div.side_menu a:hover {
  text-decoration: none;
  color: rgb(210, 210, 48);
  text-shadow: 2px 2px 2px rgb(17,17,17);
  }
/*End Main Content*/  
  
  
#spacer {
  background-image: url(../images/chs_bottom.png);
  height: 17px;
  width: 1076px;
  float: left;
  }
  
#footer {
  color: white;
  background-color: rgb(34, 43, 64);
  vertical-align: middle;
  padding-bottom: 10px;
  text-align: center;
  width: 1076px;
  float: left;
  }

img {
  border-style: none;
  }
  


Note: I am still new to CSS.

Is This A Good Question/Topic? 0
  • +

Replies To: Divs within Divs, and moving them where I want them

#2 d4t4ch17d  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 31-January 08

Re: Divs within Divs, and moving them where I want them

Posted 01 April 2011 - 01:11 PM

Well the "content_address" div is at the bottom of its container. Only because of the "content" div is it making the floated div so long. My suggestion would be to set the div position absolutely to the relative location of the "l_menu_container div", then remove the height.

Something like this:

#l_menu_container {
  border: 1px solid white;
  display: table-cell;
  padding: 5px;
  text-align: center;
  background-color: rgb(34, 43, 64);
  color: rgb(255, 255, 255);
  height: 100%;
  width: 200px;
  position: relative;
  } 

#contact_address {
  vertical-align: bottom;
  border: 1px solid red;
  margin: auto;
  width: 170px;
  padding-top: 30px;
  text-align: left;
  position: absolute;
  top: 750px;
  }


Was This Post Helpful? 0
  • +
  • -

#3 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Divs within Divs, and moving them where I want them

Posted 01 April 2011 - 03:23 PM

View Postd4t4ch17d, on 01 April 2011 - 01:11 PM, said:

Well the "content_address" div is at the bottom of its container. Only because of the "content" div is it making the floated div so long. My suggestion would be to set the div position absolutely to the relative location of the "l_menu_container div", then remove the height.

Something like this:

#l_menu_container {
  border: 1px solid white;
  display: table-cell;
  padding: 5px;
  text-align: center;
  background-color: rgb(34, 43
, 64);
  color: rgb(255, 255, 255);
  height: 100%;
  width: 200px;
  position: relative;
  } 

#contact_address {
  vertical-align: bottom;
  border: 1px solid red;
  margin: auto;
  width: 170px;
  padding-top: 30px;
  text-align: left;
  position: absolute;
  top: 750px;
  }



I wouldn't go top:750px;, though. Do bottom:0;, that way it will stick to the bottom, and if you have a lot of content in that bar it won't ride underneath or over the contact_address.
Was This Post Helpful? 0
  • +
  • -

#4 superbyelich  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-March 11

Re: Divs within Divs, and moving them where I want them

Posted 04 April 2011 - 06:05 AM

Neither of these made the box stick to the bottom. Once i added content in the content area it stays put instead of sticking. Thanks for the suggestions though.
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Divs within Divs, and moving them where I want them

Posted 04 April 2011 - 02:37 PM

Ok. So you don't want it on the bottom of the screen, merely on the bottom of the content? Is that what you want?? Because to stick it to the bottom of the screen you do use bottom: 0
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1