techtheatre Posted April 29, 2007 Share Posted April 29, 2007 I have a section of a page that is defined as "maincontent" and the CSS is below. What i want to do is place a small box below the bottom-right corner of this "maincontent" area. Both the new box (let's call it "footer" for convinience) and the "maincontent" are variable sizes. I know i probably need to use relative positioning, since the maincontent area can be variable height depending upon how much text and images in put within it. The footer's right edge should always align with the right edge of the maincontent, and may contain an image, text, or both. The footer's top border should be as close to the bottom border of main content as possible (i will not have the border drawn, so it should just be right next to it...but it does not have to overlap or anything). #maincontent { margin-left: 10%; margin-right: 10%; background-color: #FFFFCC; padding: 20px; border: dotted 1px #000; } I have been using tables forever and am trying to move towards CSS (i am currently in a bit of a hybrid mode). Unfortunately i have read various online tutorials and it all seems too complicated...primarily because it seems that anytime that CSS is used, countless hacks are required to get IE to cooperate...which makes me really hesitant to go 100%. This problem above wourl be VERY easy with tables, but so far this project is not using tables, so i want to keep that up if possible. THANKS! Quote Link to comment Share on other sites More sharing options...
techtheatre Posted May 4, 2007 Author Share Posted May 4, 2007 Buehler...Buehler... Anyone? I really don't want to have to resort to a table for this. I am SURE that someone knows how I can add a content box that is right aligned with a larger content box and placed directly below it...this can't be CSS rocket-science...or is it... Quote Link to comment Share on other sites More sharing options...
pezcore Posted May 5, 2007 Share Posted May 5, 2007 The best way I can think of is wrapping all of your content in a div that will set your overall page width. So if you wanted your width to be 80% with 10% on each side, it would something like this: #wrapper { width: 80%; marging-left: 10%; } Your maincontent would then be: #maincontent { width: 100%; margin: 0; background-color: #ffffcc; padding: 20px; border: dotted 1px #000; } Your "footer" could then be set up with the float attribute so it will hang out on the right edge: #footer { float: right; } So then your page would look like: <html> <head> <title>Whatev</title> </head> <body> <div id="wrapper"> <div id="maincontent"> Content </div> <div id="footer"> footer stuff </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.