I'm in the process of taking an old table laden, poor code design web site and updating it to a modern day, mostly standards compliant design with only CSS where possible.
I'm not having trouble with the header or footers. Essentially, I have a two column layout. The entire site is configured to a width with auto left and right margins to keep everything centered. Is there a better way for doing this? I don't have a full div wrapper with my method, though.
Now here is the XHTML code for the two columns:
Now the CSS
The requirements are that the left and right divs are the same height. I have tried everything I can think of or just TRY and nothing will get them the same height. If I add a * {height: 100%;} the div does seem to pull a greater height in than filling for the content so I must be missing some height attribute.
Then, the image needs to be aligned to the bottom of the left side bar. I was able to get this but it has an issue. By setting the leftbar DIV to position: relative and the image to position: absolute; bottom: 0px; (I don't need the div around the image, then) it will force it to stay at the bottom but it will overlap any of the leftbar content unless the leftbar div is tall enough. I can force it to X pixels and it won't overlap but then some pages use longer menus so I'd need to set the height to quite a bit to allow for all combinations. And the image is random with varying heights ranging from tiny to quite long.
The leftbar has a black background while the rightbar has a white background so the left definitely needs to extend to the bottom of the page.
I would greatly appreciate some assistance. I have spent literally 5 hours researching, reading, and trying different combinations and methods. A simple table with two cells would fix it instantly but I want to avoid tables!
I'm not having trouble with the header or footers. Essentially, I have a two column layout. The entire site is configured to a width with auto left and right margins to keep everything centered. Is there a better way for doing this? I don't have a full div wrapper with my method, though.
Code:
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
Code:
<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 </div>
Code:
div.leftbar {
width: 201px;
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;
}
Then, the image needs to be aligned to the bottom of the left side bar. I was able to get this but it has an issue. By setting the leftbar DIV to position: relative and the image to position: absolute; bottom: 0px; (I don't need the div around the image, then) it will force it to stay at the bottom but it will overlap any of the leftbar content unless the leftbar div is tall enough. I can force it to X pixels and it won't overlap but then some pages use longer menus so I'd need to set the height to quite a bit to allow for all combinations. And the image is random with varying heights ranging from tiny to quite long.
The leftbar has a black background while the rightbar has a white background so the left definitely needs to extend to the bottom of the page.
I would greatly appreciate some assistance. I have spent literally 5 hours researching, reading, and trying different combinations and methods. A simple table with two cells would fix it instantly but I want to avoid tables!
Comment