...

View Full Version : Two Major CSS Problems div height; img align



benn600
10-01-2007, 07:29 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>

_Aerospace_Eng_
10-01-2007, 07:34 PM
Lets figure out one thing at a time.
#1 You will need to use the faux columns (http://alistapart.com/articles/fauxcolumns) technique to fake equal height columns.

Here is another example http://bonrouge.com/2c-hf-fixed.php

benn600
10-01-2007, 07:38 PM
But with faux columns, the left column doesn't stretch to the bottom of the right and the image cannot be aligned to the bottom.

_Aerospace_Eng_
10-01-2007, 07:51 PM
If done correctly its meant to appear to match the height. And I said lets take this one thing at a time. I didn't even mention anything about the image being aligned to the bottom. Slow down.

benn600
10-01-2007, 07:55 PM
I will convert it to faux columns right now and post the result. Might take a bit.

benn600
10-01-2007, 08:20 PM
Here is with a quick faux columns version. So now the height appears exactly as it should. Now the second problem is all that remains.

An image in the left column should absolute align to the bottom of the solid black column without "floating" over other leftbar stuff as it does with position: absolute when I tried it.

[bg.gif is attached!]


<html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
font: 11pt arial, sans-serif;
}
div.container {
background: url(bg.gif);
background-repeat: repeat-y;
}
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-right: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="container">
<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>
</div>
</body>
</html>

_Aerospace_Eng_
10-01-2007, 08:29 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style tyle="text/css">
html, body {
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
margin:0;
padding:0;
}
#container {
width:850px;
margin:auto;
min-height:100%;
background:#FFF url(bg.gif) repeat-y;
position:relative;
}
* html .container {
height:100%;
}
#leftbar {
width: 201px;
margin-right:5px;
background-color: #000;
color: #ffd600;
float: left;
padding-bottom:100px; /*this needs to be the height of the leftimage*/
}
#leftimage {
position:absolute;
left:0;
bottom:0;
}
#rightbar {
width: 636px;
padding: 4px;
background-color: #fff;
float:left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="container" class="clearfix">
<div id="leftbar"> Menu (pulled in from php)
<div id="search"> Search</div>
<div id="leftimage"> <img src=".jpg"></div>
</div>
<div id="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>
</div>
</body>
</html>
I changed your classes to ids. I also adjusted your #right div as it was too wide to fit. I also added a doctype or else some things wouldn't work in IE. Read the sticky about doctypes. I made the left image position:absolute with a left and bottom set to 0 this way it will always appear at the bottom of where the content stops. Study the code carefully.

Also use
not
to post code.

benn600
10-01-2007, 08:33 PM
Unfortunately, the issue I still see is that if you resize the browser window vertically decreasing it to zero, the left image just starts covering up content in the left nav bar. Is there a way to absolutely position it to the bottom while not allowing it to cover up other text/content?

_Aerospace_Eng_
10-01-2007, 08:44 PM
I edited my post as you replied. Retry the code. There is now padding that was added to the left side.

benn600
10-01-2007, 08:59 PM
That works much better! I ran a quick test and it seems to have fixed the big issue. There may still be a smaller issue but I'll have to implement the changes you made to my real design and see if it works. I'll post more here a little later (maybe not today...working on other projects). By the way: the code I posted first was intended to be as slimmed down as possible for simplicity so I omitted the doctype for instance. It's in the real template.

Thank you!

benn600
10-03-2007, 01:40 AM
I just integrated the key differences into my real template and it does exactly what I need it to do except the image in the left navigation bar still overlaps navigation content.

Am I correct in believing that the left image HAS to be positioned absolutely to the bottom? Are there any other ways to align it to the bottom? I believe it has to be absolutely aligned. However, with absolute positioning, it simply overlaps content without taking space in the div. So is there a way to have it take up its space and then align bottom? I was trying some padding-bottom or other things but it doesn't seem to help. And of course then there is a limit of what the padding is set to + small images will waste space and there will be some blank space in the left bar.

_Aerospace_Eng_
10-03-2007, 05:34 AM
Yes you add bottom padding but we can't help you further until you post a link to your page or post your full code. This snippet stuff isn't going to cut it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum