ansaurus

Question

tables insive divs not the same size as divs inside divs?

Answer 1

+1 A:

Some possible remedies:

CSS Margins

the table could have a margin set that the div doesn't. Try this css:

table {
    margin: 0px;
}

EDIT: Or if your div is the one with the margin, replace table by div in the above css.

CSS Box-Model

There are differences between the different CSS box models, for example Mozilla Firefox uses by default the content-box model. This may have confusing results when applying borders to elements. I believe IE uses the border-box model by default.

To "sanitize" the box model, you can add this to your CSS:

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This sets the box model to border-box for all html elements in Mozilla and CSS3 compatible browsers.

catchmeifyoutry 2010-03-04 06:22:51

hi, it does the same thing in all browsers, so not browser specific, i also tried adding the 0 margin and it didnt work, would be grateful if you can try out my code i added to the question just now, cheers

Ke 2010-03-04 07:17:42

cant believe it,this fixed it in ffox,thanku v much, just checked it though and it doesnt appear to work in IE, any specific fix for IE?

Ke 2010-03-04 07:25:37

I also updated my code to contain two tables, and now in IE there is a big gap on the 2nd table between the infobar2 and the table any ideas why?

Ke 2010-03-04 07:34:12

Answer 2

A:

check margin and padding

You also might want to check display. I've had issues in certain browsers with extra pixels being added to tables if they weren't set to.

display: block;

McAden 2010-03-04 06:36:09

tried this, didnt work, i added the code im using to the question, thx

Ke 2010-03-04 07:16:25

Answer 3

+1 A:

This is happening because your "find great things.." div is inside of an extra div. In order to remedy this the table needs to go inside of another div with a style having a 1px border, float:left, width:100% and a border of 1px. Also when doing this, take the border off the table since the new div will be handling it. Take a look at what I have below and that should give you a good example.

 #mainContent #infoBartest {
      border: 1px solid #8AD12B;
      border-bottom: 0px;
      float: left;
      width: 100%;
     }

    <div id="mainContent">
       <div id="topNav">
        <h1>Find great things.. </h1>
        <div id="topNav3">
         Find  great things
         <br/>
        </div>      
       </div>   
       <div id="infoBar2">
        <h1>a</h1> 
       </div> 
   <div id="infoBartest">
    <table>
     <tr>
      <td>
      <a href="#">asd</a>
      </td>
     </tr>
    </table> 
    </div>
      </div>

Ben 2010-03-04 08:16:59

ansaurus

tags:

views:

answers:

tables insive divs not the same size as divs inside divs?

CSS Margins

CSS Box-Model

related questions