Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fill remainder of browser window 1

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Jul 30, 2001
1,669
GB
I have a fairly 'traditional' page with a fixed width (100px) menu on the left edge . I want to create a table that will fill the remaining width of the browser window.

Am I right in thinking that if I set the table's width to 100%, it will cause it to 'overflow' to the right as 100px are already in use by the border? This appears to be the behaviour.

How can I combine absolute and relative widths to get it to use just what remains of the browser window and in such a way that, when the window is re-sized, it still uses the entire window?

Thanks in advance.
 
Sort by date Sort by votes
Is the menu in another frame?

If not why not have one table with two columns (with the width of the table set to 100%, and the width of the left column 100 px), with the menu in the left hand column, and then you can nest a table in the right column.

<table width='100%'>
<tr>
<td width='100%'>
'Insert your menu code here
</td>
<td>
<table width='100%'>
'Insert your right side table code here
</table>
</td>
</tr>
</table>

If you have a specific reason not to do it this wa, let me know


A computer always does what you tell it to, but rarely does what you want it to.....
 
Upvote 0 Downvote
Thanks for the reply.

The menu is not in another frame (I'm not using frames). However, it is contained in a SSI file that is brought into every page on the site. So I don't think a single table is practical.
 
Upvote 0 Downvote
I don't see how this would change anything - if it's a SSI, then the HTML is generated just as if it was part of the code isn't it?

If not, how about using javascript to return each user's resolution, having a couple of different pages for different resolution, then redirect them onto the relevant page? (where you don't have to use relative positioning at all)
Just put this javascript in your head of yor html:

<script language="Javascript">
<!--

if (screen.width == 1024) {
window.location = "index1024.htm";
}

if (screen.width == 800) {
window.location = "index800.htm";
}

//--></script>

A computer always does what you tell it to, but rarely does what you want it to.....
 
Upvote 0 Downvote
Thanks again.

The problem with the SSI aspect as I see it is that I would be trying to fill some cells in the table in the include file while filling other cells in the file that includes it. I can't see how to do that without making everything very messy.

If possible I'd prefer to avoid multiple pages. I guess I was hoping that I'd simply 'missed' a more obvious solution. If necessary, I will just size the menu as, say, 10% and size the other as 90% - assuming that works.

 
Upvote 0 Downvote
Can't you open and close a new table in the SSI file? Then when you use the <tr> and <td> commands you will be editing cells in the inner table until you close that table.

I really don't see how that can be a problem:

<table width='100%'>
<tr>
<td width='100%'>
<%
include 'menu.htm';
%>

'here is your simplified include file

<table>
<tr>
<td>
</td>
</tr>
</table>

'End of include file


</td>
<td>
<table width='100%'>
'Insert your right side table code here
</table>
</td>
</tr>
</table>

A computer always does what you tell it to, but rarely does what you want it to.....
 
Upvote 0 Downvote
This works for me in IE and FF:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	border: 2px solid #F00;
}

#content {
	margin-left: 104px;
}

#maintable {
	width: 100%;
	border: 2px solid #00F;
}
</style>
</head>

<body>
<div id="menu">
<h3>The menu</h3>

<a href="#">Page 1</a><br />
<a href="#">Page 2</a><br />
<a href="#">Page 3</a>
</div>

<div id="content">
<table id="maintable" border="1">
	<tr>
		<td>R1C1</td>
		<td>R1C2</td>
		<td>R1C3</td>
	</tr>
	<tr>
		<td>R2C1</td>
		<td>R2C2</td>
		<td>R2C3</td>
	</tr>
</table>
</div>

</body>
</html>

--James
 
Upvote 0 Downvote
Thanks James - I got there in the end with your help. I confess that I'm not sure exactly how. However, I think the key was in use of the margin-left rather than plain left also I removed the 100% attribute in one or two places and it seems to fall into place.

Thanks also draigGoch - I don't doubt that your suggestions would have worked but I was looking for a simpler solution and I think (!) I got it.

Now moving on to the (more challenging?) vertical equivalent problem.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
148
CoolBreeze007
CoolBreeze007
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
249
ChrisHirst
ChrisHirst
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
152
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top