SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Place a div at the bottom of a container

    I have a problem - see: http://www.phoenixlondon.co.uk/clien...late/basis.htm

    I need to place a div at the bottom of the central box on the right below float right.

    I need to have float right at the top and at the bottom.

    Whilst we are at it I also need to make the central box (called container btw) stretch to within 20px of the bottom if the content is not longer enough.

    Can someone help (All the css is in the head area of the page)

    (OOOH! I am a zealot now )
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  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,

    You may not understand it but I think this does more or less what you want
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Douglas&amp;Gordon Independent Estate Agents</title>
    <style type="text/css">
    <!--
    /*mac hide \*/
    html,body { height:100%}
    /* end hide*/
    html,body{margin:0;padding:0}
    body,td,th {
     font-family: arial, helvetica, sans-serif;
     font-size:12px;
     color: #6095C1;
    }
    body {
     background-color: #FFFFFF;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
    }
    img {
     margin:0; padding:0; border:0;
    }
    p {
     margin: 0; padding:0; border:0;
     padding-bottom: 5px;
    }
    form {
     margin:0; padding:5px; border:0;
    }
    ul {
     margin:20px; padding:0; border:0;
    }
    #top {
     position:absolute;
     width:900px;
     left:0;
     top:0;
     background:#fff;
     z-index:100;
     height:114px;
    }
    #banner {
     position:absolute;
     top:0;left:10px;
     height:30px;
     width: 900px;
     background:#fff url(http://www.phoenixlondon.co.uk/clien...ges/banner.gif);
     z-index:100;
    }
    #logins {
     position:absolute;
     width:148px;
     height:60px;
     top: 40px;
     margin: 0; padding: 2px 5px; border: 1px dashed #6BA2C4;
     left: 10px;
     color: #FFFFFF;
     font-size: 10px;
     line-height:15px;
    }
    #logins a {
     display: block;
     background: #FFFFFF url(http://www.phoenixlondon.co.uk/clien...ginarrow_a.gif) no-repeat 2px 2px;
     margin:0;
     padding-left:20px;
     color: #6BA2C4;
     text-decoration: none;
    }
    /* commented backslash mac hiding hack \*/ 
    * html #logins a {height:1%;} 
    /* end hack */ 
    #logins a:hover {
     background: #6BA2C4 url(http://www.phoenixlondon.co.uk/clien...ginarrow_b.gif) no-repeat 2px 2px;
     color: #FFFFFF;
     text-decoration: none;
    }
    #mainmenu {
     border:0; margin:0; padding:0;
     position:absolute; 
     width:560px; 
     height:25px;
     left: 180px; 
     top: 90px;
    }
    #leftcolourbar {
     position:absolute; 
     width:160px; 
     height:5px; 
     left: 10px; 
     top: 115px; 
     background-color: #FF9900; 
     font-size:1px;
     }
    #centercolourbar {
     position:absolute; 
     width:558px; 
     height:5px; 
     left: 180px; 
     top: 115px; 
     background-color: #FF9900; 
     font-size:1px;
     border:0; margin:0; padding:0;
     border-left: 1px solid #FF9900;
     border-right: 1px solid #FF9900;
     }
    /*#container {
     position:absolute; 
     width:900px; 
     left: 10px; 
     top: 120px; 
     border:0; margin:0; padding:0;
    }*/
    #leftcolumn {
     float:left;
     width:160px;
     margin-left:-159px;
     left:-11px;
     position:relative;
     display:inline;
    }
    #rightcolumn {
     float:right;
     width:160px;
     margin-right:-159px;
     left:11px;
     position:relative;
     display:inline;
    }
    #centralcolumn {
     border:1px solid #6095C1;
     border-top:none;
     border-bottom:none;
     margin:0 0 0 180px; 
     width:558px;
     position:relative;
     min-height:100%;
     z-index:1;
    }
    /*mac hide \*/
    * html #centralcolumn { height:99.9%}
    /* end hide*/
    #filler{height:120px}
    #footer{
     height:20px;
     border:1px solid #fff;
     border-top:1px solid #6095C1;
     position:absolute;
     bottom:-1px;
     left:-1px;
     width:558px;
    }
    #footerpad {height:44px;clear:both;position:relative;}
    .content {
     border:0; margin:0; padding:5px;
     margin-right: 150px;
     }
    #contentdash{
     border:0; margin:0; padding:5px;
     border-bottom:1px dashed #6095C1;
     margin-right: 150px;
    }
    .contentscroll{
     height:100px;
     overflow:auto;
     margin:0; padding:5px; border:0;
     margin-right: 150px;
     scrollbar-face-color: #6095C1;
     scrollbar-highlight-color: #C2D7E7;
     scrollbar-3dlight-color: #85AECF;
     scrollbar-darkshadow-color: #427AA8;
     scrollbar-shadow-color: #315B7D;
     scrollbar-arrow-color: #FFFFFF;
     scrollbar-track-color: #4DECF8S;
    }
    .rightFloat {
     float: right;
     margin:0 0 0 0; 
     padding:5px; border:0;
     text-align: right;
     width:130px;
     position:relative;
    }
    * html .rightFloat {width:140px;w\idth:130px}
    .cleaner {
      clear:both;
      height:1px;
      overflow:hidden;
      margin:0;
      padding:0;
      margin-top:-1px;
      font-size:1px;
    }
    /* TEXT STYLES */ 
    body,td,th {
     font-family: arial, helvetica, sans-serif;
     font-size:12px;
     color: #6095C1;
    }
    h1 {
     font-size: 200%;
    }
    h2 {
     font-size: 150%;
    }
    h3 {
     font-size: 120%;
    }
    h4 {
     font-size: 110%;
    }
    h5 {
     font-size: 100%;
    }
    h6 {
     font-size: 80%;
    }
    h1,h2,h3,h4,h5,h6 {
     color: #084B88;
     margin:0; padding:0px; border:0;
    }
    .footerText {
     font-size: 9px;
     color: #666666;
    }
    .mainText {
     font-weight:bold;
     padding: 0 3px;
    }
    .titleText {
     font-weight:bold;
     color: #084887;
    }
    .tabMenuText {
     font-weight:bold;
     font-size:10px;
     padding: 0 3px;
    }
    .note {
     font-size: 11px;
     color: #084887;
    }
    .number {
     font-size: 200%;
     font-weight:bold;
    }
    .quicksearch {
      font-size: 11px;
      color: #FFFFFF;
      font-weight:bold;
    }
    #rightbottom{
     width:130px;
     padding:5px;
     position:absolute;
     bottom:22px;
     right:0;
     text-align:right;
    }
    * html #rightbottom{width:140px;w\idth:130px;}
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body>
    <!-- Container -->
    <div id="centralcolumn"> 
      <div id="filler"></div>
      <div id="leftcolumn">TEST LEFT</div>
      <div id="rightcolumn"><img src="http://www.phoenixlondon.co.uk/clien...60ad_white.gif" width="160" height="302" /></div>
      <div class="rightFloat">FLOAT RIGHT</div>
      <div id="contentdash"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="content"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="contentscroll"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="content"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div id-"footerpad"></div>
      <div class="cleaner"></div>
      <div id="footer"></div>
      <div id="rightbottom">Right bottom</div>
    </div>
    <div id="top"> 
      <div id="banner"></div>
      <div id="logins"><img src="http://www.phoenixlondon.co.uk/clien...ges/logins.gif" alt="Login Area" width="37" height="13"></div>
      <!-- MAIN MENU -->
      <div id="mainmenu"><img src="http://www.phoenixlondon.co.uk/clien...e/TEMP_TAB.gif" alt="REPLACE" width="140" height="25"><img src="http://www.phoenixlondon.co.uk/clien...e/TEMP_TAB.gif" alt="REPLACE" width="140" height="25"><img src="http://www.phoenixlondon.co.uk/clien...e/TEMP_TAB.gif" alt="REPLACE" width="140" height="25"><img src="http://www.phoenixlondon.co.uk/clien...e/TEMP_TAB.gif" alt="REPLACE" width="140" height="25"></div>
      <!-- COLOUR BARS -->
      <div id="leftcolourbar"></div>
      <div id="centercolourbar"></div>
    </div>
    </body>
    </html>
    Because the right element at the bottom is absolutely placed you will need to cater for it by applying padding to any elements above so that they don't overwrite it.

    Paul

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! That really works... but

    Now my funky little side menu appears not to work in IE. I have highlighted the areas of concern in bold... all help appreciated.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Douglas&Gordon Independent Estate Agents</title> <style type="text/css">
    <!--
    /*mac hide \*/
    html,body { height:100%}
    /* end hide*/
    html,body{margin:0;padding:0}
    body,td,th {
     font-family: arial, helvetica, sans-serif;
     font-size:12px;
     color: #6095C1;
    }
    body {
     background-color: #FFFFFF;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
    }
    img {
     margin:0; padding:0; border:0;
    }
    p {
     margin: 0; padding:0; border:0;
     padding-bottom: 5px;
    }
    form {
     margin:0; padding:5px; border:0;
    }
    ul {
     margin:20px; padding:0; border:0;
    }
    #top {
     position:absolute;
     width:900px;
     left:0;
     top:0;
     background:#fff;
     z-index:100;
     height:114px;
    }
    #banner {
     position:absolute;
     top:0;left:10px;
     height:30px;
     width: 900px;
     background:#fff url(../images/banner.gif);
     z-index:100;
    }
    #logins {
     position:absolute;
     width:148px;
     height:60px;
     top: 40px;
     margin: 0; padding: 2px 5px; border: 1px dashed #6BA2C4;
     left: 10px;
     color: #FFFFFF;
     font-size: 10px;
     line-height:15px;
    }
    #logins a {
     display: block;
     background: #FFFFFF url(../images/loginarrow_a.gif) no-repeat 2px 2px;  margin:0;  padding-left:20px;
     color: #6BA2C4;
     text-decoration: none;
    }
    /* commented backslash mac hiding hack \*/ 
    * html #logins a {height:1%;} 
    /* end hack */ 
    #logins a:hover {
     background: #6BA2C4 url(../images/loginarrow_b.gif) no-repeat 2px 2px;
     color: #FFFFFF;
     text-decoration: none;
    }
    #mainmenu {
     border:0; margin:0; padding:0;
     position:absolute; 
     width:560px; 
     height:25px;
     left: 180px; 
     top: 90px;
    }
    #leftcolourbar {
     position:absolute; 
     width:160px; 
     height:5px; 
     left: 10px; 
     top: 115px; 
     background-color: #FF9900; 
     font-size:1px;
     }
    #centercolourbar {
     position:absolute; 
     width:558px; 
     height:5px; 
     left: 180px; 
     top: 115px; 
     background-color: #FF9900; 
     font-size:1px;
     border:0; margin:0; padding:0;
     border-left: 1px solid #FF9900;
     border-right: 1px solid #FF9900;
     }
    /*#container {
     position:absolute; 
     width:900px; 
     left: 10px; 
     top: 120px; 
     border:0; margin:0; padding:0;
    }*/
    #leftcolumn {
     float:left;
     width:160px;
     margin-left:-159px;
     left:-11px;
     position:relative;
     display:inline;
     font-size: 11px;
    line-height:15px;
    }
    #leftmenu {
    	border:0; margin:0; padding:10px 0px;
    	border-left:1px solid #6095C1;
    	border-right:1px solid #6095C1;
    }
    #leftmenu a {
    	display: block;
    	background: #FFFFFF url(../images/arrow_orange.gif) no-repeat 4px 4px;
    	padding-left:20px;
    	color: #000000;
    }
    
    #leftmenu a:hover {
    	background: #FF9900 url(../images/arrow_white_down.gif) no-repeat 5px 2px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    #leftmenu .thispage {
    	background: #FFFFFF url(../images/arrow_orange_down.gif) no-repeat 5px 2px;
    	color: #FF9900;
    	text-decoration: none;
    	font-weight:bold;
    }
    #leftmenu a.submenu {
    	margin-left: 10px;
    	padding-left:10px;
    	background: #FFFFFF url(../images/circle_orange.gif) no-repeat 2px 4px;
    	color: #FF9900;
    	text-decoration: none;
    }
    #leftmenu a.submenu:hover {
    	background: #FF9900 url(../images/circle_white.gif) no-repeat 2px 4px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    #quicksearchbox {
    		margin:0; padding:5px; border:0;
    		color: #FFFFFF;
    		background: #FF9900 url(../images/tab_b.gif) bottom right no-repeat;
    }
    #rightcolumn {
     float:right;
     width:160px;
     margin-right:-159px;
     left:11px;
     position:relative;
     display:inline;
    }
    #centralcolumn {
     border:1px solid #6095C1;
     border-top:none;
     border-bottom:none;
     margin:0 0 0 180px; 
     width:558px;
     position:relative;
     min-height:100%;
     z-index:1;
    }
    /*mac hide \*/
    * html #centralcolumn { height:99.9%}
    /* end hide*/
    #filler{height:120px}
    #footer{
     height:20px;
     border:1px solid #fff;
     border-top:1px solid #6095C1;
     position:absolute;
     bottom:-1px;
     left:-1px;
     width:558px;
     padding: 2px 0;
    }
    #footerpad {height:44px;clear:both;position:relative;}
    .content {
     border:0; margin:0; padding:5px;
     margin-right: 140px;
     text-align:justify;
     }
    #contentdash{
     border:0; margin:0; padding:5px;
     border-bottom:1px dashed #6095C1;
     margin-right: 140px;
     text-align:justify;
    }
    .contentscroll{
     height:100px;
     overflow:auto;
     margin:0; padding:5px; border:0;
     margin-right: 140px;
     scrollbar-face-color: #6095C1;
     scrollbar-highlight-color: #C2D7E7;
     scrollbar-3dlight-color: #85AECF;
     scrollbar-darkshadow-color: #427AA8;
     scrollbar-shadow-color: #315B7D;
     scrollbar-arrow-color: #FFFFFF;
     scrollbar-track-color: #4DECF8S;
     text-align:justify;
    }
    .rightFloat {
     float: right;
     margin:0 0 0 0; 
     padding:5px; border:0;
     text-align: right;
     width:130px;
     position:relative;
    }
    * html .rightFloat {width:140px;w\idth:130px}
    .cleaner {
      clear:both;
      height:1px;
      overflow:hidden;
      margin:0;
      padding:0;
      margin-top:-1px;
      font-size:1px;
    }
    /* TEXT STYLES */ 
    body,td,th {
     font-family: arial, helvetica, sans-serif;
     font-size:12px;
     color: #6095C1;
    }
    h1 {
     font-size: 200%;
    }
    h2 {
     font-size: 150%;
    }
    h3 {
     font-size: 120%;
    }
    h4 {
     font-size: 110%;
    }
    h5 {
     font-size: 100%;
    }
    h6 {
     font-size: 80%;
    }
    h1,h2,h3,h4,h5,h6 {
     color: #084B88;
     margin:0; padding:0px; border:0;
    }
    .footerText {
     font-size: 9px;
     color: #666666;
    }
    .mainText {
     font-weight:bold;
     padding: 0 3px;
    }
    .titleText {
     font-weight:bold;
     color: #084887;
    }
    .tabMenuText {
     font-weight:bold;
     font-size:10px;
     padding: 0 3px;
    }
    .note {
     font-size: 11px;
     color: #084887;
    }
    .number {
     font-size: 200%;
     font-weight:bold;
    }
    .quicksearch {
      font-size: 11px;
      color: #FFFFFF;
      font-weight:bold;
    }
    .imgborder {
    	margin:0; padding:0;
    	border: 1px solid #6095C1
    }
    /* !! LINKS !! */
    
    /* ! DEFAULT ! */
    a:link {
    	color: #084B88;
    	text-decoration: none;
    }
    a:visited {
    	color: #084B88;
    	text-decoration: none;
    }
    a:hover {
    	color: #084B88;
    	text-decoration: underline;
    }
    a:active {
    	color: #084B88;
    	text-decoration: underline;
    }
    
    /* ! UNDERLINE ! */
    a.underline:link {
    	text-decoration: underline;
    	color: #084887;
    }
    a.underline:visited {
    	text-decoration: underline;
    	color: #084887;
    }
    a.underline:active {
    	text-decoration: underline;
    	color: #6095C1;
    }
    a.underline:hover{
    	text-decoration: underline;
    	color: #6095C1;
    }
    
    /* ! BLUE ! */
    a.blue:link {
    	color: #084887;
    }
    a.blue:visited {
    	color: #084887;
    }
    
    /* ! WHITE ! */
    a.white:link {
    	color: #FFFFFF;
    }
    a.white:visited {
    	color: #FFFFFF;
    }
    
    /* ! TITLE ! */
    a.titlelink:link {
    	color: #FFFFFF;
    }
    a.titlelink:visited {
    	color: #FFFFFF;
    }
    
    /* ! FOOTER TEXT ! */
    a.footerText:link {
    	color: #666666;
    }
    a.footerText:visited {
    	color: #666666;
    }
    
    /* ############################################################################################### */
    /* !! BUTTONS !! */
    
    /* ! BUTTON ! */
    .button {
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-color: #6095C1;
    	padding: 4px 6px 4px 7px;
    	border:0;
    	cursor:pointer;
    }
    a.button:link {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    a.button:visited {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    /* ! SEARCH BUTTON ! */
    .buttonSearch {
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-color: #6095C1;
    	padding: 3px 2px 2px 2px;
    	border:0;
    	cursor:pointer;
    }
    /* ! DARK BUTTON ! */
    .buttonDark {
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-color: #084887;
    	padding: 4px 6px 4px 7px;
    	border:0;
    	cursor:pointer;
    }
    a.buttonDark:link {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    a.buttonDark:visited {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    /* ! BLOCK BUTTON ! */
    a.blockButton:link, a.blockButton:visited, a.blockButton:active {
    	padding: 0px 3px 0px 3px;
    	color: #084887;
    	text-align: center;
    	vertical-align: middle;
    	display: inline-block;
    	border-color: #6095C1;
    	border-style: solid;
    	border-width: 1px;
    	background-color:#FFFFFF;
    	margin: 0px 1px 0px 1px;
    }
    a.blockButton:hover {
    	background-color:#D9F2FF;
    	text-decoration: none;
    }
    #rightbottom{
     width:130px;
     padding:5px;
     position:absolute;
     bottom:22px;
     right:0;
     text-align:right;
    }
    * html #rightbottom{width:140px;w\idth:130px;}
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body>
    <!-- Container -->
    <div id="centralcolumn"> 
      <div id="filler">FILLER</div>
      <div id="leftcolumn"><div id="leftmenu">
    		<a href="../index.htm">Home Page</a>
    		<a href="#">Properties to buy</a>
    		<a href="#">Properties to rent</a>
    		<a href="#">Mortgages</a>
    		<a href="#">Local Report</a>
    		<a href="#">Market Report</a>
    		<a href="#">Local Offices</a>
    		<a href="#">Who's who</a>
    		<a href="#">Publications</a>
    		<a href="#">Jargon Buster</a>
    		<a href="#">Testimonials</a>
    		<a href="#">Contact us</a>
    		</div>
    	<div id="quicksearchbox">
    	  <form action="../buy/results.htm" method="get">
    	    <p>
    	      <input name="searchType" type="radio" value="buy" checked>
    	    Buy
            <input name="searchType" type="radio" value="rent">
          Rent </p>
    	    <p>
    	      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
                <param name="movie" value="../images/flash/qsearch_slider.swf">
                <param name="quality" value="high">
                <embed src="../images/flash/qsearch_slider.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
              </object>
    </p>
    	    <p>
    	      <select name="select" class="note">
    	        <option selected>All Areas</option>
    	        <option>Battersea</option>
    	        <option>Clapham</option>
    	        <option>Clapham Sth</option>
    	        <option>Fulham</option>
    	        <option>Kensington</option>
    	        <option>Knightsbridge</option>
    	        <option>Pimlico</option>
    	        <option>Putney</option>
              </select>
    GO GIF	    </p>
          </form>
    	  <p><a href="#">Use saved search</a><br>
            <a href="#">Advanced search</a></p>
    	</div></div>
      <div id="rightcolumn"><img src="../images/TEMP_160ad_white.gif" width="160" height="302" /></div>
      <div class="rightFloat"><p class="note"><a href="#"><strong>&lt; Back</strong></a></p><br>
        <a href="#"><img src="../images/sample_RF_button.gif" alt="Sample Button" width="130" height="18" border="0"></a>
      <a href="#"><img src="../images/sample_RF_button.gif" alt="Sample Button" width="130" height="18" border="0"></a>
      <a href="#"><img src="../images/sample_RF_button.gif" alt="Sample Button" width="130" height="18" border="0"></a>
      <a href="#"><img src="../images/sample_RF_button.gif" alt="Sample Button" width="130" height="18" border="0"></a></div>
      <div id="contentdash"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="content"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="contentscroll"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div class="content"> 
    	<h1>TITLE</h1>
    	<p>Measure the process, not the people. To ensure that non-operating cash 
    	  outflows are assessed. Big is no longer impregnable empowerment of all personnel, 
    	  not just key operatives, the new golden rule gives enormous power to those 
    	  individuals and units. In a collaborative, forward-thinking venture brought 
    	  together through the merging of like minds.</p>
      </div>
      <div id-"footerpad"></div>
      <div class="cleaner"></div>
      <div class="footerText" id="footer">T&amp;C's | Privacy Policy | Contact Us | Primelocation | Head Office: 67-68 Warwick Square London SW1V 2AR T: 020 7963 4600</div>
      <div id="rightbottom">Right bottom</div>
    </div>
    <div id="top"> 
      <div id="banner"></div>
      <div id="logins"><img src="../images/logins.gif" alt="Login Area" width="37" height="13"></div>
      <!-- MAIN MENU -->
      <div id="mainmenu"><img src="../images/buytab_on.gif" alt="REPLACE" width="140" height="25"><img src="../images/servicetab_off.gif" alt="REPLACE" width="140" height="25"><img src="../images/abouttab_off.gif" alt="REPLACE" width="140" height="25"><img src="../images/preferencetab_off.gif" alt="REPLACE" width="140" height="25"></div>
      <!-- COLOUR BARS -->
      <div id="leftcolourbar"></div>
      <div id="centercolourbar"></div>
    </div>
    </body>
    </html>
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  4. #4
    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)
    Hmmm,

    What exactly is the problem with it - it looks as though its working to me

    A little more info please

    Paul

  5. #5
    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)
    Ok - i've managed to ocate your images and I assume you are talking about the missing rollovers and icons on that menu.

    Kust add position:relative;
    Code:
    #leftmenu {
    border:0; margin:0; padding:10px 0px;
    border-left:1px solid #6095C1;
    border-right:1px solid #6095C1;
    position:relative;
    }
    Its just one of ie's many layout bugs.
    You might want to shift the menu over a pisel to line it up properly as well.
    Code:
    #leftcolumn {
     float:left;
     width:160px;
     margin-left:-159px;
     left:-12px;
     position:relative;
     display:inline;
     font-size: 11px;
    line-height:15px;
    }

    Paul

  6. #6
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks You're a star as always
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.


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
  •