Jump to content
Stef's Coding Community
Sign in to follow this  
arnolfo

Force div class to bottom of div id

Recommended Posts

Please advise....

 

I have a div container with div class elements inside. The div "contentbox" has a bkgd image and is set to 100% depth of the parent container div.

 

Inside is a

with a background image of the bottom of the box. How can I force this div to sit on the bottom of the "contentbox" div? I've tried many routes that lead me to much frustration. The page is not yet live.

 

Look for


#

 

 

This is the html:

 

 

This is the Css

#gutofitall #contentbox {
   background-image: url(images/images/textbox_02.gif);
   background-repeat: repeat-y;
   background-position: left top;
   width: 594px;
   margin-right: auto;
   margin-left: auto;
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   color: #585858;
   line-height: 110%;
   text-align: left;
   margin-bottom: 30px;
   height: 100%;
}
#gutofitall #contentbox .top {
   background-image: url(images/images/textbox_01.gif);
   background-repeat: no-repeat;
   background-position: left top;
   height: 20px;
   width: 100%;
}
#gutofitall #contentbox .bottom {
   background-image: url(images/images/textbox_04_04.gif);
   background-repeat: no-repeat;
   height: 40px;
   position: relative;
   clear: both;
}
#gutofitall #contentbox p {
   margin-left: 180px;
   margin-right: 30px;
   margin-top: 0px;
}
#gutofitall #contentbox .name {
   margin-left: 30px;
   width: 150px;
   float: left;
}
#gutofitall #contentbox .cornergraphic {
}
#contentbox .cornergraphic span {
   background-image: url(images/gear.gif);
   display: block;
   background-repeat: no-repeat;
   background-position: right center;
   position: relative;
   height: 90px;
   float: right;
   width: 80px;
   right: 10px;
   bottom: 100px;
}

 

Many thanks...


 
 


asdfsadfasdfasdfasfsdf

         asdfasfasdfaasdfasdf
         asdfasdfasdfasfasfsaf

asdfsadfasdfasdfasfsdf

         asdfasfasdfaasdfasdf
         asdfasdfasdfasfasfsaf

asdfsadfasdfasdfasfsdf

         asdfasfasdfaasdfasdf
         asdfasdfasdfasfasfsaf

         asdfasdfasfasdfasdfasf asdfasdfasdfasfasfsaf

         asdfasdfasfasdfasdfasf asdfasdfasdfasfasfsaf

         asdfasdfasfasdfasdfasf asdfasdfasdfasfasfsaf

         asdfasdfasfasdfasdfasf


     




Share this post


Link to post
Share on other sites

You're missing a closing div tag in your html, and what you see will depend on where you put it. I added it to the end of the code, and just put some color and content to some of your divs so we can see them, and the footer is at the bottom:

http://www.aandbwebdesign.com/misc/div.html

 

Or is that not what you were trying to say?

Share this post


Link to post
Share on other sites

Andrea,

 

Thank you for responding, your assistance is greatly appreciated.

 

Yes, I see i must have not copied over the last

. Your example is just what I am trying to accomplish. However I have a background graphic in my .bottom. You wrote a new .bottom class just below my .bottom class. So, I deleted my class and added in the background to your class.

 

I also looked over my html and found it the same as your html. However my bottom box is still above the bottom by about 30 pixels.

 

The "content box" contains a background that repeats to the bottom. It also has a 30 px bottom margin. Would this be the cause of the gap?

 

I added a few more lines of dummy copy (actual copy yet to arrive from writer) and the bottom did drop to the bottom. If I add too much (or if the user increases the font size in browser) the bottom falls off.

 

So, maybe the "content box" needs to be set as "Auto" and not 100% height?

 

I am wondering if I use a

and not a
for the footer just outside and below the "content box" Maybe this will give me more control?

 

Please let me know what you think. I do not wish to take too much of your time, so I'll limit my questions to this last round.

 

Thanks again, Andrea.

 

a

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...