Problems floating two columns in Firefox

Hello experts,

I have the code below to float two columns WITHIN a DIV. While Internet Explorer 7 displays correctly the columns floated to each side, Firefox doesn't. It does float correctly the first column, either to the left or to the right; the second is ALWAYS under the first. I tried already display: inline but it didn't make any effect.

Note that the page has a main two column layout and this one is well rendered by both browsers...

Any ideas what the problem could be and possible solutions?

Thanks a lot!

The CSS:


#subcolumnleft {
 float: left;
 width: 365px;
}
#subcolumnright {
 float: right;
 width: 365px;
 display: inline;
}


HTML below:
<div id="subcolumnleft">
<form name="soci" id="soci" action="">
<p><label for="numero_soci">N&uacute;mero soci</label>
<input type="text" id="numero_soci" name="numero_soci" size="7" /></p>
<p><label for="alies">&#192;lies</label>
<input type="text" id="alies" name="alies" size="20" /></p>
<p><label for="nom">Nom</label>
<input type="text" id="nom" name="nom" size="30" /></p>
<p><label for="cognom1">1r cognom</label>
<input type="text" id="cognom1" name="cognom1" size="30" /></p>
<p><label for="cognom2">2n cognom</label>
<input type="text" id="cognom2" name="cognom2" size="30" /></p>
<p><label for="datanaixement">Data naixement</label>
<input type="text" id="datanaixement" name="datanaixement" size="20" /></p>
<p><label for="dni">DNI</label>
<input type="text" id="dni" name="dni" size="20" /></p>
 
 
</div>
<div id="subcolumnright">
 
 
<p><label for="adreca">Adre&#231;a</label>
<input type="text" id="adreca" name="adreca" size="20" /></p>
<p><label for="cp">C.P.</label>
<input type="text" id="cp" name="cp" size="20" /></p>
<p><label for="ciutat">Ciutat</label>
<input type="text" id="ciutat" name="ciutat" size="20" /></p>
<p><label for="provincia">Prov&iacute;ncia</label>
<input type="text" id="provincia" name="provincia" size="20" /></p>
<p><label for="telefon">Tel&egrave;fon</label>
<input type="text" id="telefon" name="telefon" size="20" /></p>
<p><label for="email">E-mail</label>
<input type="text" id="email" name="email" size="20" /></p>
 
</div>

Open in new window

LVL 5
striker46Asked:
Who is Participating?
 
glumlunCommented:
hi it would help to see the rest o fthe html and css. especially the container that these two divs sit inside.

just from looking at that code thouigh i see that <form name="soci" id="soci" action=""> is not closed with a </form>

this will definately throw up some problems, especially visually in FF

i would suggest:
<form name="soci" id="soci" action="">
<div id="subcolumnleft">
<p><label for="numero_soci">N&uacute;mero soci</label>
<input type="text" id="numero_soci" name="numero_soci" size="7" /></p>
<p><label for="alies">&#192;lies</label>
<input type="text" id="alies" name="alies" size="20" /></p>
<p><label for="nom">Nom</label>
<input type="text" id="nom" name="nom" size="30" /></p>
<p><label for="cognom1">1r cognom</label>
<input type="text" id="cognom1" name="cognom1" size="30" /></p>
<p><label for="cognom2">2n cognom</label>
<input type="text" id="cognom2" name="cognom2" size="30" /></p>
<p><label for="datanaixement">Data naixement</label>
<input type="text" id="datanaixement" name="datanaixement" size="20" /></p>
<p><label for="dni">DNI</label>
<input type="text" id="dni" name="dni" size="20" /></p>
</div>
 
<div id="subcolumnright">
<p><label for="adreca">Adre&#231;a</label>
<input type="text" id="adreca" name="adreca" size="20" /></p>
<p><label for="cp">C.P.</label>
<input type="text" id="cp" name="cp" size="20" /></p>
<p><label for="ciutat">Ciutat</label>
<input type="text" id="ciutat" name="ciutat" size="20" /></p>
<p><label for="provincia">Prov&iacute;ncia</label>
<input type="text" id="provincia" name="provincia" size="20" /></p>
<p><label for="telefon">Tel&egrave;fon</label>
<input type="text" id="telefon" name="telefon" size="20" /></p>
<p><label for="email">E-mail</label>
<input type="text" id="email" name="email" size="20" /></p>
</div>
</form>

Open in new window

0
 
striker46Author Commented:
This is the 'full' HTML structure. Deleted large pieces of text content for space-saving purposes; the DIVs however are all there.

CSS comes in next post


PS: Thanks for pointing out the missing form tag; added it but problem persists...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
 
</head>
 
<body>
 
 <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
			
		Header here
   
		 </div>
		 <!-- End Header -->
		 
		 <!-- Begin Navigation -->
         <div id="navigation">
		 
		Navigation here
			   
		 </div>
		 <!-- End Navigation -->
		 
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
 
		Links here
 
		 
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 
		 <div id="contingut">
 
<form name="soci" id="soci" action="">
<div id="subcolumnleft">
<p><label for="numero_soci">N&uacute;mero soci</label>
<input type="text" id="numero_soci" name="numero_soci" size="7" /></p>
<p><label for="alies">&#192;lies</label>
<input type="text" id="alies" name="alies" size="20" /></p>
<p><label for="nom">Nom</label>
<input type="text" id="nom" name="nom" size="30" /></p>
<p><label for="cognom1">1r cognom</label>
<input type="text" id="cognom1" name="cognom1" size="30" /></p>
<p><label for="cognom2">2n cognom</label>
<input type="text" id="cognom2" name="cognom2" size="30" /></p>
<p><label for="datanaixement">Data naixement</label>
<input type="text" id="datanaixement" name="datanaixement" size="20" /></p>
<p><label for="dni">DNI</label>
<input type="text" id="dni" name="dni" size="20" /></p>
</div>
 
<div id="subcolumnright">
<p><label for="adreca">Adre&#231;a</label>
<input type="text" id="adreca" name="adreca" size="20" /></p>
<p><label for="cp">C.P.</label>
<input type="text" id="cp" name="cp" size="20" /></p>
<p><label for="ciutat">Ciutat</label>
<input type="text" id="ciutat" name="ciutat" size="20" /></p>
<p><label for="provincia">Prov&iacute;ncia</label>
<input type="text" id="provincia" name="provincia" size="20" /></p>
<p><label for="telefon">Tel&egrave;fon</label>
<input type="text" id="telefon" name="telefon" size="20" /></p>
<p><label for="email">E-mail</label>
<input type="text" id="email" name="email" size="20" /></p>
</div>
</form>
		 
		 </div>
		 <!-- End Right Column -->
		 
   </div>
   <!-- End Wrapper -->
 
</body>
</html>

Open in new window

0
 
striker46Author Commented:
CSS code:


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background-image: url('../img/bkg.jpg');
 background-repeat: repeat
}
#wrapper { 
  margin: 0 auto;
 width: 1022px;
}
#header {
 color: #333;
 width: 1020px;
 float: left;
 padding: 0px;
 border: 1px solid #2f2f2f;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background-image: url('../img/header.jpg');
}
#navigation {
 
 float: left;
 width: 1000px;
 height: 20px;
 color: #fff;
 padding: 10px;
 border: 1px solid #2f2f2f;
 margin: 0px 0px 0px 0px;
 background-image: url('../img/bkg-repeat.jpg');
 background-repeat: repeat-x;
}
 
#clock {
position: relative;
top: -18px;
padding: 5px;
margin: 0px 0px 0px 0px;
border: 1px solid #black;
float: right;
font-weight: bold;
background-image: url('../img/bkg-clock.gif');
background-repeat: repeat-x;
}
 
#leftcolumn { 
 float: left;
 color: #333;
 border: 1px solid #2f2f2f;
 background-image: url('../img/left-repeat.jpg');
 background-repeat: repeat-y;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 200px;
}
#contingut { 
 float: right;
 color: #333;
 border: 1px solid #2f2f2f;
 background: #e4e4e4;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 778px;
 display: inline;
 position: relative;
}
 
/* COLUMNS */
 
#subcolumnleft { 
 float: left;
 width: 365px;
}
#subcolumnright { 
 float: right;
 width: 365px; 
 display: inline;
}
 
input, textarea, select{
    background-color: #c2c2c2;
    border: 1px solid #555555;
    font-family: verdana;
    font-size: 12px;
    padding: 3px;
    color: #141213;
    margin: 3px;
}
 
label {
text-align: right;
display: block;
float: left;
width: 90px;
padding-right: 10px;
padding-top: 7px;
font-weight: bold;
}
 
h2
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: bold;
}
 
 
.left-link A:link {text-decoration: none; color: #000;}
.left-link A:visited {text-decoration: none; color: #000;}
.left-link A:active {text-decoration: none; color: #000}
.left-link A:hover {text-decoration: underline; color: yellow;}
.top-link A:link {text-decoration: none; color: #fff;}
.top-link A:visited {text-decoration: none; color: #fff;}
.top-link A:active {text-decoration: none; color: #fff;}
.top-link A:hover {text-decoration: underline; color: yellow;}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
glumlunCommented:
hi
in FF and IE7 that second div does float up to the right.
not sure what to offer you.
do you have a screen shot?
verison number of FF?
0
 
striker46Author Commented:
Firefox is v 3.0.6

Screenshots attached

Thanks

FF.jpg
IE7.jpg
0
 
glumlunCommented:
yee im running the same version and get no wrap.

gonna need the whole page exactly as is i reckons.
0
 
striker46Author Commented:
Okay I'm making some tests and I start finding out what the problem source could be: see, if I place the code directly in the page as i showed above, the content appears well placed. Fact is, the site does not have the code directly but it retrieves an external page (with the columns) to the index.php, to a certain DIV innerhtml. In the code above I placed the content of the external file directly in the DIV because otherwise it wouldn't work for you, as javascript code is needed for loading the external file to the innerhtml. Now I realise the CSS code seems to be correct but something else is interfering.

I don't know if I explained myself well (hope yes)

I'll try to find out more details and will post an update here...
0
 
striker46Author Commented:
Perfect! Thanks a lot
0
 
striker46Author Commented:
Okay! Your code suggestion was right!

Placing the form tag above the DIV solved it!

<form name="soci" id="soci" action="">
<div id="subcolumnleft">

Thanks a million
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.