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!

Register Log in
  • 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

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.


 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
335
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
125
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
112
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
636
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top