Domain Manage

FireFox Layout Problem

Discussion in 'Website Design' started by Darren, Dec 5, 2008.

Thread Status:
Not open for further replies.
  1. Darren United Kingdom

    Darren Well-Known Member

    Joined:
    Feb 2008
    Posts:
    2,203
    Likes Received:
    12
    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.
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
     
  3. admin Spain

    admin Administrator Staff Member

    Joined:
    Jun 2004
    Posts:
    10,083
    Likes Received:
    115
  4. bensd United Kingdom

    bensd Well-Known Member Exclusive Member

    Joined:
    Jan 2007
    Posts:
    4,956
    Likes Received:
    53
    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
     
  5. Darren United Kingdom

    Darren Well-Known Member

    Joined:
    Feb 2008
    Posts:
    2,203
    Likes Received:
    12
    Hello Ben, i tried your method and still getting the same problem.

    Thanks, Darren.
     
  6. bensd United Kingdom

    bensd Well-Known Member Exclusive Member

    Joined:
    Jan 2007
    Posts:
    4,956
    Likes Received:
    53
    PM Sent...
     
    • Like Like x 1
  7. Darren United Kingdom

    Darren Well-Known Member

    Joined:
    Feb 2008
    Posts:
    2,203
    Likes Received:
    12
    Many thanks Ben, now fixed.

    Reputation+ added.
     
Thread Status:
Not open for further replies.

Share This Page