1

I created this html page. It works fine in chrome and IE but in firefox fix_div goes out of container to right side. i couldn't find any problem. how to handle this? please help.

CSS 

        .container {
     width: 1300px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
 }
 #game {
     height:auto;
 }
 #header {
     bkground-color: #f2f2f2;
     width: 100%;
     height:91px;
 }
 #content {
     float: left;
     width: 1000px;
     border: 1px solid #b5b5b5;
 }
 .extra_div {
     float:left;
     width:140px;
     height:520px;
 }
 #tabs {
     background-color: #131313;
     float: left;
     width: 100%;
     height:50px;
 }
 #tabs ul {
     display: table;
     table-layout:fixed;
     text-align: center;
     border-spacing:12px;
 }
 #tabs li {
     display: table-cell;
     width: 12%;
     vertical-align: bottom;
     margin-left:15px;
 }
 #tabs a {
     width:75%;
     display: block;
     text-decoration:none;
     padding:5px 5px 5px 5px;
     background-color:#066;
     color: white;
     border:thin #030;
     border-radius: 3px 3px 3px 3px;
 }
 .fix_div {
     width:1000px;
     height:120px;
 }
 .fix_tbl {
     width:100%;
     height:auto;
     font-family:"Helvetica", Arial, sans-serif;
     border-collapse:collapse;
     border-width:1px;
     border-style:solid;
     border-color:#b5b5b5;
 }


</style>

Html

   <body>
    <div id="header"></div>
    <div class="container">
        <div class="extra_div"></div>
        <div id="content">
            <div id="tabs">
                <ul>
                    <li><a href="">home</a>
                    </li>
                    <li><a href="">link 1</a>
                    </li>
                    <li><a href="">link 2</a>
                    </li>
                    <li><a href="">link 3</a>
                    </li>
                    <li><a href="">link 4</a>
                    </li>
                    <li><a href="">link 5</a>
                    </li>
                    <li><a href="">link 6</a>
                    </li>
                </ul>
            </div>
            <div id="game">
                <div class="fix_div">
                    <table class="fix_tbl">
                        <tr>
                            <td>entry 1</td>
                            <td>entry 2</td>
                            <td>entry 3</td>
                            <td>entry 4</td>
                            <td>entry 5</td>
                            <td>entry 6</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="extra_div"></div>
    </div>
</body>
Amarnath Balasubramanian
  • 9,300
  • 8
  • 34
  • 62
HungryDB
  • 555
  • 3
  • 11
  • 30
  • It's because you haven't cleared your floated elements, read my answer [here](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) in detail to understand why that happens – Mr. Alien Feb 07 '14 at 08:19

4 Answers4

3

You need to add a single line of CSS to fix it.

#game { height:auto; clear:both; }

Hope it will help you.

SOLOMON SARKAR
  • 73
  • 1
  • 12
2

Clear the float after #game

Demo

.clear { clear:both;}
Richa
  • 4,240
  • 5
  • 33
  • 50
1

Try clearing your float after #tabs

Sean
  • 1,534
  • 12
  • 20
0

The short answer is clear your floats after tabs like others have mentioned, but after seeing your code there are many things that can be sorted out.

For example, I assume that your .extra_div elements are being used to center the content. You can get rid of them by using margin: 0 auto on #content div. I have also updated other css, removed some floats etc.

Here is the code

 <!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>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>

  .container
  {
width: 1300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#game
{
height:auto;
 }

  #header
  {
  bkground-color: #f2f2f2;
  width: 100%;
  height:91px;
  }  

 #content
 {
     width: 1000px;
       margin:0 auto;
     border: 1px solid #b5b5b5;

 }

  .extra_div
  {
    float:left; 
    width:140px;
     height:520px;


 }

#tabs
{
background-color: #131313;
width: 100%;
height:50px;
}

 #tabs ul
{
display: table;
table-layout:fixed;
text-align: center;
border-spacing:12px;
}

   #tabs li
 {
display: table-cell;
width: 12%;
vertical-align: bottom;
margin-left:15px;
 }



 #tabs a
  { 

width:75%;
display: block;
text-decoration:none;
padding:5px 5px 5px 5px;
background-color:#066;
color: white;
border:thin #030;
border-radius: 3px 3px 3px 3px;
 }

 .fix_div
 {
width:1000px;
height:120px;

 }

 .fix_tbl
  {
  width:100%;
   height:auto;
    font-family:"Helvetica", Arial, sans-serif;
     border-collapse:collapse;
   border-width:1px;
   border-style:solid;
   border-color:#b5b5b5;

 }

   </style>

  <title>Untitled Document</title>
    </head>

<body>

      <div id="header">

      </div>


      <div class="container">
      <div id="content">

          <div id="tabs">

                   <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">link 1</a></li>
                        <li><a href="">link 2</a></li>
                        <li><a href="">link 3</a></li>
                        <li><a href="">link 4</a></li>
                        <li><a href="">link 5</a></li>
                        <li><a href="">link 6</a></li>
                   </ul>

          </div>

           <div id="game">

                     <div class="fix_div">

                          <table class="fix_tbl">

                               <tr>
                                   <td>entry 1</td>
                                   <td>entry 2</td>
                                   <td>entry 3</td>
                                   <td>entry 4</td>
                                   <td>entry 5</td>
                                   <td>entry 6</td>
                               </tr>
                           </table>

                       </div>

           </div>

         </div>

     </div>


     </body>
 </html>

Demo

lazyprogrammer
  • 633
  • 9
  • 26