Hello,
I'm stymied by some floats but don't know why. Below you will see the general premise behind the HTML/CSS. I have a main container which I'm trying to float:left a left nav and float:right my main content. This works but when I try to float:right a div or img inside of the main content div it breaks down in Firefox. The img will display on the left as if there were no float. Strangely enough, IE does a decent job.

Any help is greatly appreciated.

Brian

 
<div id="container">
 
     <div id="header">This has clear:both and fills the entire width of "container"</div>
 
     <div id="left-nav">This is has float left and a fixed pixel width equaling about 30% of "container"</div>
 
     <div id="main-content">This is has float:right and a width equaling about 70% of "container"
          
          <div id="column-right">This has float:right and a small width</div>
 
     </div>
 
</div>
 

Lets see a URL or ALL the code. There is no way to help you with just what you've posted here.

Sure, this is ALL of the code I have so far. Neither left or right margins or padding are being recognized in FF for #main_content and #right_column doesn't display floated to the right inside of #main_content. It works in IE but not in FF. In FF it is at left, underneath the <h2> text.

The bit of code that appears to be broken is down near the bottom of the HTML below <!--Begin Main_Content-->.

Thanks, Brian

 
@charset "utf-8";
/* CSS Document */
#home{
 background-image: url(../images/body_bg.jpg);
 background-position: center top;
 background-repeat: repeat-x;
 background-color: #fcedc8;
 margin: 0px;
 padding: 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 line-height: 1em;
 font-size: 1em;
}
.container {
 width: 950px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 padding-top: 0px;
 background-image: url(../images/container_bg_ref_DELETE_02.jpg);
}
/*Begin Universal*/
p {
 font-size:0.8em;
 margin-bottom: .8em;
 margin-top: 0.8em;
}
h1 {
 font: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
 font-size: 1.4em;
 color: #FFF3CA;
 margin-left: 30px;
 line-height: 1em;
}
a img, a:hover img, a:visited img {
 border: none;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
 } 
 
.offleft { /* Hides text off page so only sight impaired readers see it.*/
 position: absolute;
 left: -9000px;
 }
 
 
ul.offleft {
  position : absolute;
  top : -9000px;
  left : -9000px;
  z-index : 9; /* This is needed here to keep the links on top of the masthead */
 }
ul.offleft a:focus, ul.offset-ex a:active {
 position : absolute;
 top : 9020px; /* Fiddle and fudge as needed */
 left : 9020px; /* Fiddle and fudge as needed */
 display : block;
 padding : 20px; /* Fiddle and fudge as needed */
 width : 8em; /* Fiddle and fudge as needed */
 z-index : 9;
 font-size : 1.3em;
 font-weight : bold;
 color: white;
 border : 1px outset #000;
 background-color : #000;
 line-height: 2;
}  
ul.offleft a:active {
 top : 9000px; /* Fiddle and fudge as needed for IE */
}
 
/*End Universal*/
/*Begin Header*/
.header {
 width: 950px;
 height: 278px;
 margin-bottom: 0px;
 clear: both;
}
#logo {
 width: 261;
 height: 278px;
 float: left;
}
.header_container {
 width: 689px;
 height: 278px;
 float: right;
}
#home_contact_bar {
 width: 689px;
 height: 36px;
 background-image: url(../images/bg_home_contact.jpg);
}
#home_contact {
 width: 100px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #403225;
 font-weight: bold;
 font-size: 0.7em;
 float: right;
 margin-top: 9px;
}
#home_contact a, a:visited {
 color: #403225;
 text-decoration:none;
}
#home_contact a:hover {
 color: #861D00;
 text-decoration:none;
}
#section_title_bar {
 width: 689px;
 height: 51px;
 background-image: url(../images/bg_section_title.jpg);
}
#section_title {
 float: left;
}
#add_this {
 float: right;
 margin-right: 30px;
 margin-left: 8px;
 margin-top: 9px;
};
#banner_image {width: 689px; height: 191px;}
#print_page {
 display: block;
 width: 100px;
 height: 27px;
 background-image: url(../images/print_page.jpg);
 background-repeat: no-repeat;
 background-position: 0 0px;
 margin-right: 32px;
 float: right;
 margin-top: 13px;
  }
 
#print_page:hover
 {
 background-position: 0px -27px;
 }
#print_page span
 {
 display: none;
 }
/*End Header*/
 
/*Begin Left Column*/
#left_column {
 width: 261px;
 float: left;
}
 /*Begin Nav (Side)*/
 
 #left_nav {
 width: 261px;
 height: 240px;
 margin-top: 0px;
 background-image: url(../images/left_navigation/bg-left-nav.jpg);
}
 #left_nav ol {margin-top:0px; margin-bottom:0px;}
 
 /*End Nav (Side)*/
#newsletter_form {
 width:202px;
 height: 156px;
 background-image:url(../images/newsletter_DELETE.jpg);
 background-repeat:no-repeat;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 5px;
 padding-bottom: 5px;
 font-size: 0.8em;
 color: #000000;
 font-weight: normal;
}
#newsletter_form span {
 font-size: 1em;
 font-weight: bold;
 color: #5A5207;
};
/*End Left Column*/
/*Begin Subsection_Title Column*/
#subsection_title {
};
/*End Subsection_Title*/
/*Begin Right Column*/
#right_column {
 float: right;
 margin-left: 15px;
 margin-bottom: 15px;
};
/*End Column Ended*/
/*Begin Main Content*/
#main_content {
 width: 629px;
 float: right;
 margin-top: 0px;
 margin-right: 30px;
 margin-left: 30px;
}
#main_content h2{
 font-size: 1.1em;
 margin-bottom: 10px;
 margin-top: 10px;
};
/*End Main Content*/
 
/*Begin Footer*/
.footer {
 background-image: url(../images/footer-bg.jpg);
 height: 81px;
 width: 960px;
 clear: both;
}
/*Begin Footer Utility Nav*/
 
/*End Footer Utility Nav*/
 
/*End Footer*/

 
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="
"/>
<meta name="Keywords" content="
"
/>
<link rel="stylesheet" type="text/css" href="assets/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="assets/css/main_style.css" media="screen, projection" />
</head>
<body id="home">
<!--Container Div Begin-->
<div class="container">
 <!--Header Div Begin-->
 <div class="header">
 
        <!--Header_Container Div Begin-->
        <div class="header_container">
 
         <!--Home_Contact_Bar Div Begin-->
         <div id="home_contact_bar">
 
                <!--Add_This Div Begin-->
                <div id="add_this">
                <a href="http://www.addthis.com/bookmark.php" 
                onmouseover="return addthis_open(this, '', '[url]', '[TITLE]');" 
                onmouseout="addthis_close();" 
                onclick="return addthis_sendto();"><img 
                src="assets/images/add_this.jpg" 
                width="16" height="16" border="0" alt="Share" /></a>
                </div>
                <!--Add_This Div Ended-->
 
                <!--Home_Contact Div Begin-->
                <div id="home_contact">
                <a href="#">Home</a> | <a href="#">Contact</a> </div>
                <!--Home_Contact Div Ended-->
            </div>
            <!--Home_Contact_Bar Div Ended-->
 
            <div id="banner_image">
            <img src="assets/images/banner_photos/home_banner.jpg" width="689" height="191" />
            </div>
 
         <!--Section_Title Div Begin-->
   <div id="section_title_bar">
 
                <h1 id="section_title">Section Title</h1>            
 
                <!--Print_Page Div Begin-->
                <a id="print_page" href="#" title="Print Page"><span>Print Page</span></a>
                <!--Print_Page Div Ended-->
 
   </div>
            <!--Section Title Div Ended-->
 
        </div>
        <!--Header_Container Div Ended-->
 
     <!--Logo Div Begin-->
  <div id="logo">
        <img src="assets/images/logo.jpg" alt="NANACT Home" width="261" height="278" />      </div>
        <!--Logo Div Ended-->
 
 </div>
    <!--Header div Ended-->
 
 <!--Left_Column Div Begin-->
    <div id="left_column">
 
        <!--Left_Nav Div Begin-->
        <div id="left_nav">
 
        <ol>
        <li>Encounter the People</li>
        <li>Gallery</li>
        <li>Go Beyond: Travel the Trails</li>
        <li>News &amp; Events</li>
        <li>About NANACT</li>
        <li>Contact</li>
        </ol>
 
        </div>
        <!--Left_Nav Ended-->
 
        <!--Newsletter_Form Div Begin-->
        <div id="newsletter_form">
        <span>Newsletter Sign-up</span>
        <p>Receive news and event updates.</p>
        </div>
        <!--Newsletter_Form Div Ended-->
 
    </div>
    <!--Left_Column div Ended-->
<!--Begin Main_Content-->
 <div id="main_content"> 
        <h2>Subsection</h2>
 
        <!--Right_Column div Begin-->
        <div id="right_column">
  <img src="assets/images/promos/promo_travel_the_trails.jpg" />
        </div>
        <!--Right_Column div Ended-->
 
        <p>Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here.  </p>
        <p>Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. </p>    
</div>
<!--End Main_Content-->
 <br class="clearfloat" />             
</div>
<!--Container Div Ended-->
</body>
</html>
 

Well, you do have a bunch of mis-placed semi-colons in your CSS which do not belong and will cause problems, especially in Firefox which is much more strict than IE. Get rid of those and see if that helps. The semi-colons are showing up AFTER the } in several places.

You need to put a WIDTH on #right_column - any time you FLOAT an element you need to specify a width. It appears to be floating just fine. The margins on #main_content and #right_column are also working properly.

You mean I have to write code correctly for it to work!?

I did the same thing on a site last week but managed to catch the mistake. Working long, late hours produces some silly mistakes. Getting rid of the misplaced semicolons did the trick. I also placed a width on the right column.

Bless you,
Brian

You mean I have to write code correctly for it to work!?

GEEEEEE.. how 'bout that !! ???