Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Problems floating two columns in Firefox

Posted on 2009-02-22
9
Medium Priority
?
506 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:striker46
  • 6
  • 3
9 Comments
 
LVL 11

Accepted Solution

by:
glumlun earned 2000 total points
ID: 23705399
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
 
LVL 5

Author Comment

by:striker46
ID: 23705425
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
 
LVL 5

Author Comment

by:striker46
ID: 23705432
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 11

Expert Comment

by:glumlun
ID: 23705484
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
 
LVL 5

Author Comment

by:striker46
ID: 23705498
Firefox is v 3.0.6

Screenshots attached

Thanks

FF.jpg
IE7.jpg
0
 
LVL 11

Expert Comment

by:glumlun
ID: 23705530
yee im running the same version and get no wrap.

gonna need the whole page exactly as is i reckons.
0
 
LVL 5

Author Comment

by:striker46
ID: 23705625
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
 
LVL 5

Author Closing Comment

by:striker46
ID: 31549787
Perfect! Thanks a lot
0
 
LVL 5

Author Comment

by:striker46
ID: 23705826
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question