SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs shift position when resizing

    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:
    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>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</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>
    CSS:
    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The right column drops because it has no width and will always try to find more room. If you don't float the right column then it shouldn't drop.

    e.g.
    Code:
    #main
    {
        /*float: left;*/
        margin-left:172px;
        background-color:#FFFFFF;
    }
    * html #main{height:1&#37;;margin-left:0}
    * html #sidebar{margin-right:-3px}
    Put the IE styles in the ie stylesheet of course.

    IE will still probably drop if you have fixed width content in the middle unless you use overflow:hidden or perhaps a more complicated negative margin technique like this:

    http://www.pmob.co.uk/temp/2col-nofloatdrop2.htm

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank You!

    Thanks for the advice. That, along with the link you sent did wonders. I appreciate the help.

    Dan


Bookmarks

Posting Permissions

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