1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

<td> won't stretch with browser horizontally

         

jkim1684

8:55 am on Aug 20, 2010 (gmt 0)

10+ Year Member



Hi, I know this may be such a simple task, but I have tried so many things and just cannot figure it out.

I have created a table with various cells. I would like each cell to react to the size of the brower. When the browser stretches I would like the cell to stretch also, while keeping everything within the cell centered.

Here is the code I have so far.


<style type="text/css">

table {
width: 100%;
}
#container{
width:9000px;
height:600px;
}
#buttons{
position:fixed;
left: 33%;
}





</style>
<script type="text/javascript" src="thw.js"></script>
</head>

<body>
<div id="container">
<table width="100%" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>

<td width="10%"><a name="start" id="start"></a> <img src="logo.png" style="padding-left: 33%;"></td>

<td width="10%"><a name="about" id="about"></a> About Me</td>
<td width="10%"><a name="social" id="social"></a>Social Network</td>
<td width="10%"><a name="bio" id="bio"></a>Bio</td>
<td width="10%"><a name="books" id="books"></a>My Books</td>
<td width="10%"><a name="tutorials" id="tutorials"></a>Tutorials</td>
<td width="10%"><a name="photos" id="photos"></a>Mu Photos</td>
<td width="10%"><a name="contact" id="contact"></a>Contact Me</td>
<td width="10%"><a name="links" id="links"></a>Preferred links</td>
<td width="10%"><a name="end" id="end"></a>Woork</td>
</tr>
</table>
<div id="buttons">
<a href="#start">Start</a> |
<a href="#social">Social Network</a> |
<a href="#photos">My Photos</a> |
<a href="#books">My Books</a> |
<a href="#end">Go to the end</a> |
</div>
</div>
</body>
</html>

Thank you everyone for your help.

alias

1:38 pm on Aug 20, 2010 (gmt 0)

10+ Year Member



How do you expect the table to behave? Your #container has got a width of 9000px.

Major_Payne

3:20 pm on Aug 20, 2010 (gmt 0)



LOL 9000px. WOW! Probably a typo...I hope. Might try this: 


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

#container{
width:900px;
height:600px;
margin: 0 auto; /* remove if no centering wanted */
}

table {
width: 100%;
height: 600;
border-collapse: collapse;
}

td {
width: 10%;
}

#buttons{
position:fixed;
left: 33%;
}
</style> 



<body>
<div id="container">
<table>
<tr>
<td><a name="start" id="start"></a> <img src="logo.png" style="padding-left: 33%;" alt=""></td>
<td><a name="about" id="about"></a> About Me</td>
<td><a name="social" id="social"></a>Social Network</td>
<td><a name="bio" id="bio"></a>Bio</td>
<td><a name="books" id="books"></a>My Books</td>
<td><a name="tutorials" id="tutorials"></a>Tutorials</td>
<td><a name="photos" id="photos"></a>Mu Photos</td>
<td><a name="contact" id="contact"></a>Contact Me</td>
<td><a name="links" id="links"></a>Preferred links</td>
<td><a name="end" id="end"></a>Woork</td>
</tr>
</table>
<div id="buttons">
<a href="#start">Start</a> |
<a href="#social">Social Network</a> |
<a href="#photos">My Photos</a> |
<a href="#books">My Books</a> |
<a href="#end">Go to the end</a> |
</div>
</div>
</body>


Have no idea why you are using link tags like this: "<a name="start" id="start"></a>"

That's totally incorrect way to code them.

Cells mostly adjust/expand according to their contents unless a fixed width is set for them. You need to use percents more to make flexible layouts.



Ron

jkim1684

8:31 pm on Aug 20, 2010 (gmt 0)

10+ Year Member



The above code just mashed everything to the center.

The thing is I am trying to make a horizontal website. No vertical scolling.

Once the links are clicked it automatically scrolls to the sections which is a piece on the table. I want each cell of the table to expand as you stretch the browser window.

The width is 9000 because I thougth I had to determine how much actual space I needed in order to carry out my horizontal website idea.

here is the complete code with included is a javascript package

<!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=ISO-8859-1" />
<title>Horizontal Layout</title>
<style type="text/css">

table {
width: 100%;
}
#container{
width:9000px;
height:600px;
}
#buttons{
position:fixed;
left: 33%;
}





</style>
<script type="text/javascript" src="thw.js"></script>
</head>

<body>
<div id="container">
<table width="100%" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>

<td width="10%"><a name="start" id="start"></a> <img src="logo.png" style="padding-left: 33%;"></td>

<td width="10%"><a name="about" id="about"></a> About Me</td>
<td width="10%"><a name="social" id="social"></a>Social Network</td>
<td width="10%"><a name="bio" id="bio"></a>Bio</td>
<td width="10%"><a name="books" id="books"></a>My Books</td>
<td width="10%"><a name="tutorials" id="tutorials"></a>Tutorials</td>
<td width="10%"><a name="photos" id="photos"></a>Mu Photos</td>
<td width="10%"><a name="contact" id="contact"></a>Contact Me</td>
<td width="10%"><a name="links" id="links"></a>Preferred links</td>
<td width="10%"><a name="end" id="end"></a>Woork</td>
</tr>
</table>
<div id="buttons">
<a href="#start">Start</a> |
<a href="#social">Social Network</a> |
<a href="#photos">My Photos</a> |
<a href="#books">My Books</a> |
<a href="#end">Go to the end</a> |
</div>
</div>
</body>
</html>



I took this code from a website and trying to readjust myself, but I am not able to. in other words, I would like to take the cells with each word in them and make them expand to according to the browser window.

[woorktuts.110mb.com...]

sorry for being unclear and thanks everyone for your help.

Major_Payne

9:54 pm on Aug 20, 2010 (gmt 0)



You must have left out something as I just checked the coding I did in Firefox and IE and it is not mushed all to the center.

I just used CSS and it should have made the same thing you had before except I cleared out all margins/paddings and borders before the CSS took over for the table. The cells DO NOT adjust according to the browser window. The adjust to the cell's content which you have limited to 10% of the table's width.

Demaestro

10:08 pm on Aug 20, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



yes I would say that this:

<td width="10%">

is your problem.

Bone

2:53 am on Aug 25, 2010 (gmt 0)

10+ Year Member



I think u can try this :

<style type="text/css">

table {
width: 100%;
}
#container{
margin: 0px auto;
width:100%;
height:600px;
}
#buttons{
position:fixed;
left: 33%;
}





</style>

Bone

2:54 am on Aug 25, 2010 (gmt 0)

10+ Year Member



I think u can try this :

<style type="text/css">

table {
width: 100%;
}
#container{
margin: 0px auto;
width:100%;
height:600px;
}
#buttons{
position:fixed;
left: 33%;
}





</style>

Major_Payne

8:00 pm on Aug 25, 2010 (gmt 0)



Containers do not center with margin: 0 auto; unless you specify a width less than 100%.

milosevic

12:18 pm on Aug 26, 2010 (gmt 0)

10+ Year Member



I'd say:

1. With working out stuff like this, give stuff a border with CSS rules while you are working on it so you can actually see what is going on, which helps massively eg:

table {
border:1px solid;
}

td {
border:1px solid;
}

2. The width="10%" on the tds is completely redundant and likely to to cause problems - tds will automatically expand to fill the width of the table anyway. If you wanted to control this you should use CSS anyway, not html attributes. Instead of writing width="10%" over and over again you can just write

td {
width: 10%
}

once in CSS.

Major_Payne

7:12 pm on Aug 26, 2010 (gmt 0)



1. With working out stuff like this, give stuff a border with CSS rules while you are working on it so you can actually see what is going on, which helps massively eg:
This is the best advice I've seen in this topic to date. I use it all the time to see how the layout is looking before I finally kill all borders and then tweak to compensate for their dimensions when used.

Putting in borders has made fixing layout problems a lot easier at times.

Demaestro

8:30 pm on Aug 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



1. With working out stuff like this, give stuff a border with CSS rules while you are working on it so you can actually see what is going on, which helps massively eg:


With the "web developer toolbar" addon for FF you can outline elements, even assign specific colors to different html classes. So divs are red, li yellow and so on.

milo is right. Outlining elements is a great way of figuring out what is happening in your markup rendering. I just found it easier to do with the addon.

Major_Payne

8:42 pm on Aug 26, 2010 (gmt 0)



I like the add-on and use it, but I like control over the way I want the page to look and therefore, at times, need to put in different color borders and edit quickly from my web editor.

Glad you mention the add-on. FF has ssome great ones that make life easier at times.

milosevic

6:41 pm on Aug 29, 2010 (gmt 0)

10+ Year Member



I find there's nothing quicker for design work (when you know the layout of the CSS file you're working on or are writing one from scratch) than the web developer toolbar's "edit css" function and hacking out the code by hand, once you are fluent with that. The "view style information" is a poor mans "inspect element button" in firebug and works well enough to see DOM hierarchy when hovering over stuff (only if you have a high res screen on some sites though lol).

Sometimes I've written hundreds of lines of css in one sitting like this.

Using the outline elements function idea at the same time is something I haven't tried (yet) but it sounds like a smart idea.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026