I am creating a new page and while I have pretty much finished the rough look of the site, I have a problem when resizing the window. If the window gets too small, the main column will drop below the left column. In IE, this does not happen until the window is small enough to where the main column width is less than the image size, but in Firefox, it happens as soon at it reaches the content.
I need the main column/footer to stay to the right of the left column regardless of the window size.
HTML:
CSS:Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CarrieFell</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <link href="base.css" type="text/css" rel="stylesheet" media="screen" /> <!--[if lt IE 7]> <link href="ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <style type="text/css"> <!-- /* these are here because the colors will be changed by the client via the admin console */ #sidebar { background-color: #9C744D; border-right: solid 1px #8A6643; } #sidebar-headcolor { background-color: #AF2A3A; } .menu-alternate { background-color: #A8864A; } --> </style> </head> <body> <div id="wrapper"> <div id="sidebar"> <div class="menu-main"><a href="/" class="menu">Home</a></div> <div class="menu-alternate"><a href="/webfront/about" class="menu">About Carrie Fell</a></div> <div class="menu-main"><a href="/webfront/exhibitions" class="menu">Current Exhibitions</a></div> <div class="menu-alternate"><a href="/webfront/limited-editions" class="menu">Limited Editions For Sale</a></div> <div class="menu-main"><a href="/webfront/galleries" class="menu">Gallery Representation</a></div> <div class="menu-alternate"><a href="/webfront/newsletter" class="menu">Receive Newsletter</a></div> <div class="menu-main"><a href="/webfront/guarantee" class="menu">Conditional Guarantee</a></div> <div class="menu-alternate"><a href="/webfront/rubys-trails" class="menu">Stories of Ruby’s Trails</a></div> <div class="menu-main"><a href="/webfront/museums" class="menu">Museum Acquisition</a></div> <div class="menu-alternate"><a href="/webfront/contact" class="menu">Contact Carrie</a></div> </div> <div id="main"> <div class="main-content"> main page content will he here. <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div class="footer"> <div class="footer-content"> Please come view the Carrie Fell Exhibition at the Booth Western Art Museum from July 24 - October 14 <img src="/images/banners/booth-museum-small-84w.gif" alt="Visit Carrie's Exhibit at the Booth Westaern Art Museum" /> </div> </div> </div> </div> <div id="sidebar-headcolor"></div> <div id="carries-west"><img src="/images/globals/carries-west.png" alt="Find Yourself in Carrie's West" /></div> </body> </html>
Code:body,html { height:100%; width:100%; padding: 0; margin: 0; font-family: "Times New Roman", Times, serif; font-size: 12px; color:#000000; } #wrapper { overflow: hidden; float: none; display: block; min-height:100%; z-index:1; } #sidebar { float: left; width: 171px; padding-top: 166px; display: table-column; } #sidebar-headcolor { position: absolute; left: 0px; top: 0px; width: 172px; height: 166px; z-index: 2; } #carries-west { position: absolute; left: 116px; top: 65px; width: 616px; height: 75px; z-index: 3; } #main { float: left; background-color:#FFFFFF; } #sidebar,#main { /* Needed so that both columns look equally long */ padding-bottom: 32767px !important; margin-bottom: -32767px !important; } .main-content { font-size: 12px; padding-left: 75px; padding-top: 166px; padding-bottom: 15px; display: block; } .footer { width: 100%; height: 100%; background-color: #B3945D; border-top: solid 3px #9C744D; clear: both; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-right: 32767px !important; margin-right: -32767px !important; } .footer-content { font-size: 9px; font-weight: bold; padding-left: 75px; padding-top: 10px; padding-bottom: 15px; } .content { padding: 10px; font-size: 12px; } /* -- left column styles -- */ .menu-main { font-size: 12px; width: 100%; padding-top: 10px; padding-bottom: 10px; } .menu-alternate { font-size: 12px; width: 100%; padding-top: 10px; padding-bottom: 10px; } a.menu { color: #000; font-weight: bold; font-style: italic; text-decoration: none; font-size: 10px; padding-left: 10px; } a:hover.menu { color: #FFF; } /* -- end left column styles -- */ /* -- global misc styles -- */ img { border:0; } a.codegoodies { font-size: 11px; font-style: italic; color: #FFFFFF; font-weight: normal; text-decoration: underline; } a:hover.codegoodies { font-size: 11px; font-style: italic; color: #FFFFFF; font-weight: normal; text-decoration: none; } /* -- end global misc styles -- */
You may see my working example at carriefell.com/newlook-template and the stylesheet at carriefell.com/newlook-template/base.css.
I am a relative newbie with css and started out using the template at www.css-petals.net/templates/multi-columns/em-2-spalten/index.html and massaged it to where I want it.
Thank you in advance for your help
Bookmarks