ansaurus

Question

Need a table to fit full screen within div with another fix width div.

Answer 1

A:

Have a go with something like this, (untested)

#header{
  width: 100%;
}
#navdiv{
  width: 250px;
  float: left;
}
#mainarea{
  width: 100%;
  float:left;
  margin-left: 260px;
}
table{
  width: 100%;
  float: left;
  clear: left;
}

DavidYell 2010-08-11 13:19:46

Hi david, thanks for the reply, I gave your sample a go, but the mainarea div goes below the navdiv, and the table goes to far to the right of the page and adds a scroll...

daviemanchester 2010-08-11 13:29:35

Answer 2

+1 A:

This should work:

.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none;  }

Explanation:

I'm essentially using the standard two-column overflow: hidden trick to force the main content to stay in its own column (as opposed to wrapping under the nav). position: relative on the main content is to set it as the table's offset parent, so we can use width: 100% on the table to push it to the width of the main area.

The height on the nav, the background color, and borders are for demonstration purposes only.

On the hacks:

No other (modern) browser requires margin-left: 260px, as that is covered by the overflow: hidden (forcing it into two columns).

Still, at that point, the table seems to clear to the bottom of the nav (again, only in IE6). This is solved by removing any default clear (not sure that's necessary), and floating it to the right, so it doesn't take into account the size of the nav.

Ryan Kinal 2010-08-11 13:27:44

@Ryan... I like that you included the hacks for IE 6. Mind explaining the reasoning behind them?

Hristo 2010-08-11 13:34:27

Updated with explanations

Ryan Kinal 2010-08-11 13:47:16

@Ryan... +1 Thanks!

Hristo 2010-08-11 14:01:14

Thanks Ryan thats worked!! Really appreciate it, was driving me mad.

daviemanchester 2010-08-11 14:45:35

Always glad to help!

Ryan Kinal 2010-08-11 14:53:17

Answer 3

A:

You can use the following code. I wrapped your code with another div with class wrapper. You can modify the values. The navdiv class has 250px as you wish. You have to modify mainarea's width with percent. This is according to wrapper width. Just play a little and you will find what is the correct percent to fit with the wrapper's width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stackoverflow code</title>
<style>

.wrapper {
    width:900px;
    height:400px;
}

.header {
    width:900px;
    height:100px;
}

.navdiv {
    width:250px;
    float:left;
    height:100px;
}

.mainarea {
    width:72%;
    float:left;
    height:100px;
}

</style>
</head>

<body>
<div class="wrapper">
<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>
</div>
</body>

</html>

Sotiris 2010-08-11 13:35:04

Answer 4

A:

Try this: ?

.header{
  width:100%;
  overflow:hidden;
  }

.navdiv{
  width:250px;
  float:left;
  clear:none;
  margin:0 10px 0 0;
  }

.mainarea{
  float:left;
  clear:none;
  overflow:hidden;
  }

.mainarea table{
  width:100%;
  float:left;
  clear:none;
  }

webfac 2010-08-11 13:51:35

ansaurus

tags:

views:

answers:

Need a table to fit full screen within div with another fix width div.

related questions