benn600 Posted October 1, 2007 Share Posted October 1, 2007 I have spent more than 6 hours researching and reading to solve these two problems. I have included a complete example in one file to assist others in helping me quickly and easily. Just copy to an HTML file and examine my complete issue. 1. Left black bar needs to match right-column height. 2. Image in left column needs to align to the bottom of the left bar. I tried absolute positioning the left image but it would then over-lap stuff in the left bar if the leftbar was not tall enough. In other words, it didn't take any space anymore and just covered up anything. <html> <head> <style tyle="text/css"> body { width: 850px; margin-left: auto; margin-right: auto; height: 100%; background-color: #fff; color: #000; font: 11pt arial, sans-serif; } div.leftbar { width: 201px; height: 100px; /* Should Not Be Required--adding for demonstration */ margin: 0px 5px 0px 0px; padding: 0px; background-color: #000; color: #ffd600; float: left; } div.rightbar { width: 670px; margin: 0px 0px 0px 201px; padding: 4px; background-color: #fff; border: 1px solid #f00; /* Added For Visibility */ } </style> </head> <body> <div class="leftbar"> Menu (pulled in from php) <div class="search"> Search </div> <div class="leftimage"> <img src=".jpg" /> </div> </div> <div class="rightbar"> MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar. I forced a height on the left bar to show it should touch the bottom (but doesn't) when the height is greater than sized for the content.<br /><br />Thanks for your help! </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 1, 2007 Share Posted October 1, 2007 - You've got no doctype. - You've got a typo in line 3 (should be type="text/css"). - You shouldn't be styling the body in that way. - The widths of your two columns are greater than the width you've declare for their parent. - You haven't cleared the floated elements. You can do a couple of things - Use a container div with a left-border and float + negative margins to pull the left column over the containers border. - Or use a repeating background image to simulate the appearance of equal length columns. - Use padding at the bottom on the left column and negative margins to pull the image over the padding (I'd use a css background image too). - Or use padding at the bottom of the left column (position:relative) and then use absolute positioning on the image's container element to position it over this padded region. 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.