Two Major CSS Problems div height; img align

**benn600** · 10-01-2007, 05:32 PM

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>

**dog** · 10-04-2007, 10:15 PM

yo ben600,

i think this does what you were looking for.

HTML Code:

<html>
<head>
<style tyle="text/css">
body {
font: 11pt arial, sans-serif;
}

#container {
	margin: 5px auto;
	background: #000 url(http://piy.dc5b.com/img/PIY-roller-dude_01.gif) no-repeat left bottom;
	width: 779px;
}

div#leftbar {
width: 250px;
color: #ffd600;
float: left;
}
div#rightbar {
margin-left: 250px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00;
}

#spacer {
	height: 300px;
}
</style>
</head>
<body>
<div id="container">

    <div id="leftbar">
        <p>Menu (pulled in from php)</p>
        <div id="search">Search</div>
    </div>
    
    <div id="rightbar">
        <h1>MAIN CONTENT</h1>
        <p>left bar should stretch to bottom of this column.</p>
        <p>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.</p>
        <p>Thanks for your help!</p>
        <div id="spacer"></div>
	</div>
    
</div>

</body>
</html>