Table inside div

Hi All,

I have a simple two column layout with header and footer.
Inside the main column I have inserted a table. The width of the table should be identical to the main div. This is displayed correctly in IE (where a long string in column 1 is word wrapped) but the table extends beyond the div in FF.

I dont have a demo server but the code is below:


html {
		margin:0;
		padding:0;
		background:white;
		color:#000;
	}
	body {
		min-width:700px;
		word-wrap; break-word;
	}
	#wrap {
		background:white;
		margin:0 auto;
		width:700px;
		border-right: 1px solid black;
		border-left: 1px solid black;
	}
	#header {
		width: 700px;
		height:108px;
		background:#ddd;
		border-top: 2px solid #6e879e;
		border-bottom: 2px solid #6e879e;
	}
	#header h1 {
    	padding:5px;
	    margin:0;
    }
	#nav {
		background:white;
		padding:5px;
	}
	#nav ul{
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li{
		display:inline;
		margin:0;
		padding:0;
	}
	#main {
		background:white;
		float:left;
		width:550px
		
	}
	#main h2, #main h3, #main p {
		padding:0 10px;
    }
	#sidebar {
		background:white;
		float:right;
		width:150px;
	}
	#sidebar ul {
		margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
		padding:0 10px 0 0;
    }
	#footer {
		background:blue;
		clear:both;
	}
	#footer p {
		padding:5px;
		margin:0;
    }
	
	
#box-table-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 1em auto;
	width: 90%;
	text-align: left;
	border-collapse: collapse;
	position: relative;
	float: left;
}
#box-table-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
#box-table-a td
{
	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}



  <body>
      <div id="wrap">
        <div id="header"></div>
          <div id="nav">
            <ul>
              <li>link</li>
              <li>link2</li>
            </ul>
          </div>
          <div id="main">
            <h2>Data</h2>

            <table width="100%">
 <thead>
  <tr>
    <th>Long Name</th>
    <th>something</th>
    <th>value</th>
    <th>Image</th>
    <th></th>
    <th></th>
  </tr>
 </thead>
  <tr>
    <td>a veryl ong string which should be word wrapped</td>
    <td align="center">aaaa</td>
    <td align="center">10.00</td>
    <td align="center"><img align="center" src=""/></td>
    <td>lalal</td>
    <td>lalala</td>
  </tr>
</table>



          </div>
          <div id="sidebar">
            <h2>hello</h2>
            <p>slslslsl hello</p>
          </div>
      <div id="footer">
          <p>Footer</p>
      </div>
      </div>
  </body>
</html>

Be wary of comments like this. Nothing displays correctly in IE. It is displaying correctly in FF, so to get what you want, make sure FF is displaying the way you want.

In FF the table (for me) is the exact width of the main div, but the words are not wrapping. How about setting a fixed width on the td?

The width of the table should be identical to the main div
Your table is the same width as your main div, when you are testing like this it is a good practice to set borders or background colors so you can see what’s happening. You have your table width at 100% and it is 550px just as your #main div.

You are also missing the universal reset * {margin:0; padding:0;} ,in your stylesheet, even when testing you need this to get all default margins and paddings zeroed out. That gets all browsers on the same playing field. Your code is displaying identical in IE7 and FF with it in place.

Your <img> attribute “align” has invalid value of “center”. Must be one of “top”, “middle”, “bottom”, “left”, “right”. You should be using “middle” in this situation.

Here is your code validating and displaying the same in all browsers now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">

[COLOR=Blue]* {margin:0; padding:0;} /* Universal Reset */[/COLOR]

html {
        margin:0;
        padding:0;
        background:white;
        color:#000;
    }
    body {
        min-width:700px;
        [COLOR=Blue]word-wrap: break-word; /*fixed typo*/[/COLOR]
    }
    #wrap {
        background:white;
        margin:0 auto;
        width:700px;
        border-right: 1px solid black;
        border-left: 1px solid black;
    }
    #header {
        width: 700px;
        height:108px;
        background:#ddd;
        border-top: 2px solid #6e879e;
        border-bottom: 2px solid #6e879e;
    }
    #header h1 {
        padding:5px;
        margin:0;
    }
    #nav {
        background:white;
        padding:5px;
    }
    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li{
        display:inline;
        margin:0;
        padding:0;
    }
    #main {
      [COLOR=Blue]  background:pink;[/COLOR]
        float:left;
        width:550px
        
    }
    #main h2, #main h3, #main p {
        padding:0 10px;
    }
    #sidebar {
        [COLOR=Blue]background: green;[/COLOR]
        float:right;
        width:150px;
    }
    #sidebar ul {
        margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
        padding:0 10px 0 0;
    }
    #footer {
        background:blue;
        clear:both;
    }
    #footer p {
        padding:5px;
        margin:0;
    }
[COLOR=Blue]table {background:yellow;}  [/COLOR]  /* Background color for testing */
    
#box-table-a
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 1em auto;
    width: 90%;
    text-align: left;
    border-collapse: collapse;
    position: relative;
    float: left;
}
#box-table-a th
{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
#box-table-a td
{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}

</style>
</head>
 <body>
      <div id="wrap">
        <div id="header"></div>
          <div id="nav">
            <ul>
              <li>link</li>
              <li>link2</li>
            </ul>
          </div>
          <div id="main">
            <h2>Data</h2>
            
            [COLOR=Blue]<table width="100%">[/COLOR]
 <thead>
  <tr>
    <th>Long Name</th>
    <th>something</th>
    <th>value</th>
    <th>Image</th>
    <th></th>
    <th></th>
  </tr>
 </thead>
  <tr>
    <td>a veryl ong string which should be word wrapped</td>
    <td align="center">aaaa</td> 
    <td align="center">10.00</td>
    <td align="center"><img align="[COLOR=Blue]middle[/COLOR]" src="#"/></td>
    <td>lalal</td>
    <td>lalala</td>
  </tr>
</table>
          
            
            
          </div>
          <div id="sidebar">
            <h2>hello</h2>
            <p>slslslsl hello</p>
          </div>
      <div id="footer">
          <p>Footer</p>
      </div>
      </div>
  </body>
</html>

Rayzur-When you you say Universal reset this is good with all browsers?
I never knew this. Now i know why everyone uses it at the beggining of their style sheets LOL.

Everyone doesn’t use it. I don’t, and I don’t for a reason.

Whats the reason why you dont use * {margin:0; padding:0;} in your stylesheet?

Well I think that’s rather off topic here and I don’t want to hijack the thread so I think I will just shut up about that. Probably shouldn’t have said it in the first place. Suffice to say I have my own reasons which satisfy me.

Long story short - it’s not so good for form elements. Takes away browser default styling which you can’t get back.

But way Ray/Rayzur was most likely saying was that it’s an easy thing to throw in there while testing to get all browsers on the same page. More specifically, the same line.

But way Ray/Rayzur was most likely saying was that it’s an easy thing to throw in there while testing to get all browsers on the same page.
That’s right Eric, I use it for testing if there are no form elements involved.
When I say “it gets all browsers on the same playing field” I am saying that they are all zeroed out and that puts me in full control of being able to make the pages display the same all across browserland. (You knew what I meant though)

People that don’t use a reset of any kind are asking for trouble, their client will be coming back and asking why theres a big GAP in IE. Nine times out of ten when people come to these forums saying I got gaps here and gaps there it is because [URL=“http://www.sitepoint.com/forums/showthread.php?t=568475”]they don’t have a reset in their css.

It should also be remembered that <ul>s and <ol>s have a list indent, applied via left margin on IE and left padding on FF, therefore both these should be controlled. The only way to do that is by zeroing them out completely ( and you might as well to it with the reset ) and then position your lists as the layout requires.

@BlakeAnthony, If you haven’t done so already be sure to go through this current four page thread on the CSS Reset. :slight_smile: