Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two Major CSS Problems div height; img align

    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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Lets figure out one thing at a time.
    #1 You will need to use the faux columns technique to fake equal height columns.

    Here is another example http://bonrouge.com/2c-hf-fixed.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will convert it to faux columns right now and post the result. Might take a bit.

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Attached Thumbnails Attached Thumbnails Two Major CSS Problems div height; img align-bg.gif  

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!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 [code][/code] not [quote][/quote] to post code.
    Last edited by _Aerospace_Eng_; 10-01-2007 at 08:31 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I edited my post as you replied. Retry the code. There is now padding that was added to the left side.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •