FireFox Layout Problem

Darren · Dec 5, 2008

I have created a mini-site template which seems to work fine with IE but have having several issues with other browsers including firefox. The small brown table should be on the left, with the block of text in the middle and adsense to the right. I have done the layout using DIV tags and CSS.

As you can see im not an expert in HTML / CSS or design.

Gold Card

Here is the CSS im using:

Code:

#leftcontent {
background-color:#FFFFFF;
width:190px;
min-height:300px;
height:100%;
margin: 5px 0px 0px 0px;
padding: 5px 5px 5px 5px;
float:left;
}


#content {
background-color:#FFFFFF;
width:390px;
min-height:300px;
height:100%;
padding: 5px 5px 5px 5px;
margin: 5px 0px 0px 5px;
text-align:left;
float:left;
}

#rightadsense {
background-color:#FFFFFF;
width:190px;
min-height:300px;
height:100%;
margin: 5px 0px 0px 0px;
padding: 5px 5px 5px 5px;
float:right;
}

Thanks for your help in advance.

Admin · Dec 5, 2008

Try this plugin:

https://addons.mozilla.org/en-US/firefox/addon/2289

bensd · Dec 5, 2008

I have always found it easier to code for firefox and then hack for ie.

You may want to check ie6 as well as it is not rendering correctly.

Something like this should work:

Code:

#Page {
background-color: #FFFFFF;
width: 800px;
min-height: 300px;
}

#LeftSidebar {
width: 190px;
padding: 5px 5px 5px 10px;
float: left;
display: inline;
} 

#Content {
width: 380px;
padding: 5px;
float: left;
display: inline;
} 

#RightSidebar {
width: 190px;
padding: 5px 10px 5px 5px;
float: left;
display: inline;
} 

.clear {clear: both;}


<div id="Page">
          <div id="LeftSidebar"></div>
          <div id="Content"></div>
          <div id="RightSidebar"></div>
</div>
<div class="clear"></div>

-Ben