Floated DIV not visible

I am trying to create two columns using two divs, however they don't appear to be visible on the web page (IE6)

CSS:

.photo_left {
      width:40%;
      float:left;
}
.photo_right {
      float:right;
      width:40%;
}
  .spacer
{
     clear:both;
     line-height:.1em;
     font-size:.1em;
}

HTML

  <div class="photo_left">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p ><strong>Telephone: </strong><i>+44 (0)1228 672 020</i>      </p>
  <p ><strong>Fax: </strong>+44 (0) 1228 672 030 </p>
      <p ><i>(Local time now: <%=FormatDateTime(now(),4)%>)</i> </p>
  </div>
  <div class="photo_right"> <strong>Postal Address:</strong>
      </p>
    <p >Eurolite<br />
      Carlisle Brass Ltd<br />
      Kingstown Broadway<br />
      Kingstown Industrial Estate<br />
      Carlisle<br />
      CA3 0HA<br />
    United Kingdom</p>
  </div><div class="spacer"></div>
OrrolandAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
CrYpTiC_MauleRConnect With a Mentor Commented:
position:relative;
z-index:50;

add those to the

.photo_left {
    width:40%;
    float:left;
         border: 1px solid #778;
}
.photo_right {
    float:right;
    width:40%;
         border: 1px solid #778;
}


and it shold be over other elements
0
 
CrYpTiC_MauleRCommented:
Have you tried to put a border around them to see if the elemtn is visible at least and not just the text is not visible?
0
 
OrrolandAuthor Commented:
Thanks for the quick reply.

I have just tried putting a border - it seems to be the divs that are not visible.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
CrYpTiC_MauleRCommented:
Odd when I test out your code works fine can see the DIVs and text. Is there any extra CSS code somwhere that you are using that may be overriding something? Also at times I've noticed when I use different DTDs the elements do behave properly, what DTD are you using?
0
 
OrrolandAuthor Commented:
HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><!-- InstanceBegin template="/Templates/main.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Eurolite - Decorative Electrical Brassware</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="head" -->
<script language="JavaScript" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function YY_checkform() { //v4.71
//copyright (c)1998,2002 Yaromat.com
  var a=YY_checkform.arguments,oo=true,v='',s='',err=false,r,o,at,o1,t,i,j,ma,rx,cd,cm,cy,dte,at;
  for (i=1; i<a.length;i=i+4){
    if (a[i+1].charAt(0)=='#'){r=true; a[i+1]=a[i+1].substring(1);}else{r=false}
    o=MM_findObj(a[i].replace(/\[\d+\]/ig,""));
    o1=MM_findObj(a[i+1].replace(/\[\d+\]/ig,""));
    v=o.value;t=a[i+2];
    if (o.type=='text'||o.type=='password'||o.type=='hidden'){
      if (r&&v.length==0){err=true}
      if (v.length>0)
      if (t==1){ //fromto
        ma=a[i+1].split('_');if(isNaN(v)||v<ma[0]/1||v > ma[1]/1){err=true}
      } else if (t==2){
        rx=new RegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-zA-Z]{2,4}$");if(!rx.test(v))err=true;
      } else if (t==3){ // date
        ma=a[i+1].split("#");at=v.match(ma[0]);
        if(at){
          cd=(at[ma[1]])?at[ma[1]]:1;cm=at[ma[2]]-1;cy=at[ma[3]];
          dte=new Date(cy,cm,cd);
          if(dte.getFullYear()!=cy||dte.getDate()!=cd||dte.getMonth()!=cm){err=true};
        }else{err=true}
      } else if (t==4){ // time
        ma=a[i+1].split("#");at=v.match(ma[0]);if(!at){err=true}
      } else if (t==5){ // check this 2
            if(o1.length)o1=o1[a[i+1].replace(/(.*\[)|(\].*)/ig,"")];
            if(!o1.checked){err=true}
      } else if (t==6){ // the same
            if(v!=MM_findObj(a[i+1]).value){err=true}
      }
    } else
    if (!o.type&&o.length>0&&o[0].type=='radio'){
          at = a[i].match(/(.*)\[(\d+)\].*/i);
          o2=(o.length>1)?o[at[2]]:o;
      if (t==1&&o2&&o2.checked&&o1&&o1.value.length/1==0){err=true}
      if (t==2){
        oo=false;
        for(j=0;j<o.length;j++){oo=oo||o[j].checked}
        if(!oo){s+='* '+a[i+3]+'\n'}
      }
    } else if (o.type=='checkbox'){
      if((t==1&&o.checked==false)||(t==2&&o.checked&&o1&&o1.value.length/1==0)){err=true}
    } else if (o.type=='select-one'||o.type=='select-multiple'){
      if(t==1&&o.selectedIndex/1==0){err=true}
    }else if (o.type=='textarea'){
      if(v.length<a[i+1]){err=true}
    }
    if (err){s+='* '+a[i+3]+'\n'; err=false}
  }
  if (s!=''){alert('The required information is incomplete or contains errors:\t\t\t\t\t\n\n'+s)}
  document.MM_returnValue = (s=='');
}
//-->
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("css/eurolite.css");
-->
</style>
<!-- InstanceParam name="pagename" type="text" value="contact" -->
</head>

<body>
<div id="container">
<div id="header"><img src="images/logo.gif" alt="Eurolite - Decorative Electrical Brassware " width="200" height="140" hspace="5" vspace="5" /></div>
<div id="content"><!-- InstanceBeginEditable name="main" --> <h1>Contact information for trade customers and brochure requests</h1>
  <div class="photo_left">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p ><strong>Telephone: </strong><i>+44 (0)1228 672 020</i>      </p>
  <p ><strong>Fax: </strong>+44 (0) 1228 672 030 </p>
      <p ><i>(Local time now: 14:51)</i> </p>
  </div>
  <div class="photo_right"> <strong>Postal Address:</strong>
      </p>
    <p >Eurolite<br />
      Carlisle Brass Ltd<br />
      Kingstown Broadway<br />
      Kingstown Industrial Estate<br />
      Carlisle<br />
      CA3 0HA<br />
    United Kingdom</p>
  </div><div class="spacer"></div>
  <h2><strong>Trade Enquiry Form / Brochure &amp; Price List Request:</strong></h2>
    <p>                Fields marked with <font color="#FF0000">*</font> must be completed. If you are concerned about Data Protection please see our <a href="privacy.asp">privacy policy</a>.</p>
    <form action="/test/contact.asp" method="post" name="form1" id="form1" onsubmit="YY_checkform('form1','enquiryforename','#q','0','You must enter your forename','enquirysurname','#q','0','You must enter your surname','enquiryemail','#q','0','You must enter your email address','enquirycompany','#q','0','Please enter your company / organisation name in the form','enquiryaddress1','#q','0','Please enter your address in the form','enquiryaddress3','#q','0','Please enter your town / city in the form','enquiryaddress4','#q','0','Please enter your postal / zip code in the form');return document.MM_returnValue">
              <table align="center" width="100%" cellpadding="3" cellspacing="3" summary="Layout table - this table is used to layout the contact form.  The first column contains the title and the second column contains the form fields.">
                <tr valign="middle" >
                  <td nowrap="nowrap"  height="2" align="right" width="23%">Title:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  height="2" width="77%">
                    <select name="enquirytitle" >
                      <option value="Mr" selected="selected">Mr</option>
                      <option value="Mrs">Mrs</option>
                      <option value="Miss">Miss</option>
                      <option value="Ms">Ms</option>
                      <option value="Dr">Dr</option>
                      <option>Other</option>
                    </select>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Forename:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryforename" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" height="2">Surname:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" height="2">
                    <input type="text" name="enquirysurname" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Email Address:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryemail" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Telephone Number:</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquirytelephone" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" height="2">Company name:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" height="2">
                    <input type="text" name="enquirycompany" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Address Line 1:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress1" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Address Line 2:</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress2" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Town / City:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress3" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Post Code:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress4" value="" size="8" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Country:</td>
                  <td nowrap="nowrap"  width="77%">
                    <select name="enquirycountry" >
                      <option selected="selected">Choose a country</option>
                      <option value="UK">United Kingdom</option>
                      <option value="AR">Argentina</option>
                      <option value="AU">Australia</option>
                      <option value="AT">Austria</option>
                      <option value="BS">Bahamas</option>
                      <option value="BE">Belgium</option>
                      <option value="BO">Bolivia</option>
                      <option value="BR">Brazil</option>
                      <option value="CA">Canada</option>
                      <option value="CH">Chile</option>
                      <option value="CN">China</option>
                      <option value="CO">Colombia</option>
                      <option value="CR">Costa Rica</option>
                      <option value="HR">Croatia</option>
                      <option value="CU">Cuba</option>
                      <option value="CZ">Czech, Rep.</option>
                      <option value="DK">Denmark</option>
                      <option value="DO">Dominican, Rep.</option>
                      <option value="EC">Ecuador</option>
                      <option value="EG">Egypt</option>
                      <option value="SV">El Salvador</option>
                      <option value="FI">Finland</option>
                      <option value="FR">France</option>
                      <option value="DE">Germany</option>
                      <option value="GR">Greece</option>
                      <option value="GT">Guatemala</option>
                      <option value="HN">Honduras</option>
                      <option value="HK">Hong Kong</option>
                      <option value="IN">India</option>
                      <option value="IE">Ireland</option>
                      <option value="IL">Israel</option>
                      <option value="IT">Italy</option>
                      <option value="JM">Jamaica</option>
                      <option value="JP">Japan</option>
                      <option value="LU">Luxembourg</option>
                      <option value="MX">Mexico</option>
                      <option value="MA">Morocco</option>
                      <option value="NL">Netherlands</option>
                      <option value="NZ">New Zealand</option>
                      <option value="NI">Nicaragua</option>
                      <option value="NG">Nigeria</option>
                      <option value="NO">Norway</option>
                      <option value="PY">Paraguay</option>
                      <option value="PE">Peru</option>
                      <option value="PL">Poland</option>
                      <option value="PT">Portugal</option>
                      <option value="PR">Puerto Rico</option>
                      <option value="RU">Russia</option>
                      <option value="SA">Saudi Arabia</option>
                      <option value="ZA">South Africa</option>
                      <option value="ES">Spain</option>
                      <option value="SE">Sweden</option>
                      <option value="CH">Switzerland</option>
                      <option value="TW">Taiwan</option>
                      <option value="TR">Turkey</option>
                      <option value="UK">United Kingdom</option>
                      <option value="US">United States</option>
                      <option value="UY">Uruguay</option>
                      <option value="VE">Venezuela</option>
                      <option value="OT">Other...</option>
                    </select>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top">Products of interest:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" valign="top">                    <input name="enquiryproducts" type="text" id="enquiryproducts" size="50" /></td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top" height="193">Enquiry type:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" valign="top" height="193">              <input type="checkbox" name="enquirytype" value="Bathroom Manufacturer" />
              Bathroom Manufacturer<br />              
              <input type="checkbox" name="enquirytype" value="Retail Distributor" />
              Retail Distributor<br />
              <input type="checkbox" name="enquirytype" value="House Builder" />
              House Builder<br />
              <input type="checkbox" name="enquirytype" value="Architect" />
              Architect<br />
              <input type="checkbox" name="enquirytype" value="Interior Designer" />
              Interior Designer<br />
              <input type="checkbox" name="enquirytype" value="Bespoke Kitchens" />
              Bespoke Kitchens<br />
              <input type="checkbox" name="enquirytype" value="Property Developer" />
              Property Developer<br />
              <input type="checkbox" name="enquirytype" value="Builder's Merchant" />
              Builders' Merchant<br />              
              <input type="checkbox" name="enquirytype" value="Designer" />
              Designer<br />
              Other (please specify):
              <input type="text" name="enquirytype" />                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top">Comments:</td>
                  <td nowrap="nowrap"  width="77%">
                    <textarea name="enquirycomments" cols="50" rows="10"  style="width:100%"></textarea>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">&nbsp;</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="submit" value="Send" name="Submit" />
                    <a href="privacy.asp">Privacy Policy</a> </td>
                </tr>
              </table>
              <input type="hidden" name="enquirydate" value="30/04/2004 14:51:37" />
              <input type="hidden" name="MM_insert" value="true" />
              <input type="hidden" name="enquiryreferrer" value="http://www.eurolite.co.uk/test/" />
              <input name="rangeID" type="hidden" id="rangeID" value="4" />
  </form><!-- InstanceEndEditable --></div>
<ul id="navlist" name="navlist">
<li id=""><a href="index.asp" id="">Home / Products</a></li>
<li id=""><a href="about.asp" id="">About Us</a></li>
<li id=""><a href="news.asp" id="">News</a></li>
<li id="active"><a href="contact.asp" id="current">Contact Us</a></li>
</ul>
<div id="footer">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p>&copy; Carlisle Brass Ltd 2004.  All Rights Reserved.</p>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
0
 
OrrolandAuthor Commented:
CSS

body {
      background-color:#FFFFCC;
}
a:hover {
      text-decoration: none;
}
#navlist
{
      position:absolute;
      right:3px;
      top: 131px;
      padding: 4px 0 3px 0;
      margin-left: 0;
      font: bold 12px Verdana, sans-serif;


      }
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #CCB566;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #C59A07;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
#header {
      background-image:url(../images/bk-header.jpg);
      height:150px;
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-top:  1px solid #778;
}
#content {
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-bottom: 1px solid #778;
      border-top:  1px solid #778;
      font-size: 80%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      padding:1em;
      background-color:#FFFFFF;
}
#content h1 {
      font-size:140%;
      color:#CB7901;
      padding: 0;
}
#footer {
      font-size: 70%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      padding:1em;
      text-align:center;
      background: #F7C519;
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-bottom: 1px solid #778;
}
.products_table {
      font-size:75%;
      clear:both;
}
.products_table th{
      text-align:left;
      border: 1px solid #778;
}
.products_table td{
      border: 1px solid #778;
      padding:3px;
      }
h2 {
      font-size:110%;
      color:#CB7901;
      padding: 0;
      margin: 0;
}
.finish_icons {
      background-color: #CCB566;
      border: 1px solid #778;
      padding:1px;
}
.photo_left {
      width:40%;
      float:left;
            border: 1px solid #778;
}
.photo_right {
      float:right;
      width:40%;
            border: 1px solid #778;
}
#container {
      position:relative;
}
.product_columns {
      width: 30%;
      text-align:center;

}
  .spacer
{
     clear:both;
     line-height:.1em;
     font-size:.1em;
}
0
 
CrYpTiC_MauleRCommented:
ok I know whats wrong, it seems that you have an element positioned OVER the DIVs remove the background colors and you will see =o)
0
 
CrYpTiC_MauleRCommented:
You can change the z-index values accordingly or put the DIVs inside another DIV which you can realtively position over the other elements. Give me some time to figure out which elements is overlapping the DIVs
0
 
OrrolandAuthor Commented:
I see now, how can I re-order things?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.