Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Force a DIV to the bottom of a container

Status
Not open for further replies.

bubarooni

Technical User
May 13, 2001
506
US
I have a div on my main pages called leftcontent. Leftcontent contains a js menu that controls local navigation thru my site.

At the very bottom of this div I am attempting to put a div that contains an input button that prints out the web pages content.

No matter what I do, this div is always right below the last item in the js menu and not all the way to the bottom of the parent container. I have been careful and made sure that I haven't accidentally put it in the js menus parent div.

Code:
<div leftcontent>

  <div jsmenu>
     <div button1>
     </div>
     <div button2>
     </div>
  </div>

  <div printbutton>
  </div>

</div>

Surely there is a way to get the printbutton div to the bottom? Any advice would be greatly appreciated.


 
To really make it absolutely at the bottom, you would need to relatively position your leftcontent, then absolutely position your printbutton with bottom being 0.
 
Hi, I would like to vertically align the content of 2 div's to the TOP of another div that contains these 2 div's. The body-ID is necessary to draw a border. The problem in Mozilla is also that the right boxtext doesn't stay within the div. Here's what I have for the moment. Any advice would be appreciated.

Code:
<html>
<head>
<style type="text/css">
body {
	text-align: center;
	background-color: #fffff0;
	margin: 0px auto;
}

#body {
  width: 800px;
	border: #000000 solid 1px;
	margin: 15px auto;
	background-color: #eeeeee;
}

#container {
  width: 802px;
  margin: 0px auto;
	border: #000000 none 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 800px;
}

#container div {
	display: inline;
}

#box_left {
	width: 200px;
}

#box_right {
	width: 600px;
}
</style>
</head>
<body>
<div id='body'>
<div id='container' valign='top'>
	<div id='box_left'><img src='top1.jpg' height='242' width='200'></div><div id='box_right'><img src='top2.jpg' height='99' width='600'><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>
</div>
</div>
</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top