HTML - Tables & Column Width

Hey all.

This is my first post on this forum and I'm new to HTML and CSS, so please bear with me. I apologize if it's in the wrong forum.

I've got a problem with my HTML code (I combine HTML with CSS).

Imagine I have a navigation bar on the left that takes up 10 'em's. Just to the right of that navigation bar is the space that contains the actual content of the page (separated by <div id="actualcontent"> </div> tags.

Works just fine... till I define a table within that content tags. The table is almost always too large (a horizontal scroll bar appears) or too small. I want the table to fill exactly 100% of the width of the "<div id="actualcontent"> </div>" tags, not 100% of the width of the whole window (which would include the navigation bar).

Code:

 <table width="100%"> </table>

makes the table as wide as the window. Yet, I want it to be only as wide as its parent (the actual content).

I do not want to set the width to something like "80%" and HOPE that the size is okay and no horizontal scroll bar shows up. Because it could be too much or too less once the user resizes the window. However, if I specify the width in pixels or 'em's (in CSS) I'll have the same problem: I can never be sure that the table will fill out EXACTLY 100% of its parent, the width you specify seems to always be the width in relation to the whole window.

Is there a solution to my problem?

Thanks in advance ,
AvoC

I am very new to CSS have only done basic html coding before. I have been messing with my ebay page and their code trying to get mine to look similar to theirs and learn a bit in the process. however I've run into a snag, Im trying to use a duel column format but the column on the right isn't maintaining its borders. its expanding off screen to fit the text rather than containing it and expanding downward. I also can't get the left column lvl with the right. I've messed with all the values I could find but have had no luck fixing the problem. I realize there is a tremendous about of extra code that I need to remove but If anyone could give me a hand I would very much appriceate it.

Many thanks in advance

Hey all,

http://www.lindesigns.us/rma/rmaonline.php

If you go to that site on Firefox, the "Return Code #" expands. But if you use IE, you'll see that it doesn't.

I could add a fix in there for the fields if they were static, but if you see my javascript, they are dynamically loading fields.


This "class":"wide" is not working:

Code:

invoiceInput.appendChild(createElement("input", {"type":"text", "name":"invoice[]", "size":"8", "class":"wide;"}));

I am using a script I found on a jQuery board (http://jsbin.com/acado/6), and it works for them, but not for me because my syntax is probably wrong. And they also are just using 1 field and not near-unlimited dynamically loading fields like I am.


How would I add in a fix to have the browser 'only' use the expansion if the user is using IE6 or IE7?

I searched on the boards but couldn't find the solution to this problem. Thanks in advance!

I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one).

How can I go about doing that?

Thanks!!

im creatinh a box containing a text. The box must be wide enough to fill a text.

menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that?

Hi,

Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad.

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Thanks alot
Joe

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

Hi...I'm having trouble with 2 things right now with my website. First of all, I want to create a new column on the right side of my webpage. And second of all, I want to make my website container a bit wider. Could someone use firebug and tell me how to do this? Here, is my website: http://www.2teachreading.comyr.com
Thanks in advance

I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ...

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2006  -->
<!--           http://www.coffeecup.com/           -->
<!--        Brewed on 9/9/2010 12:48:26 PM         -->

<head>
    <title>Zone Map</title>
<style type="text/css">

#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}

#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}

#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}

#container {
width: 800px;
}

#col_right {
position: relative;
float: right;
width: 250px;
}

#col_center {
position: absolute;
float: center;
width: 250px;
}

#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>

<body>
<p align="center">
	  <img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

<div id="container">

<div id="col_left">  
  
<p id="head"><br>ZONE 1: $750 minimum</p>

<div id="dotted"></div>

<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>

<div id="col_center">

<p id="head"><br>ZONE 2: $1,500 minimum</p>

<div id="dotted"></div>
 
<p id="content"> 
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV*  south and west of Fairmont to Bluefield,<br>
MA*  Pittsfield-Buzzards Bay-Monomet</p>
</div>

<div id="col_right">

<p id="head"><br>ZONE 3: $2,500 minimum</p>

<div id="dotted"></div>
 
<p id="content"> 
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>     
MI</p>
</div>

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

i tried a code for left right side by side columns but it didn't work can somebody give me a clue to why this didn't work?

<style>
#columns {
width:600px;}
#columns.column{
position:relative;
width:46%;
padding:1%;
boarder: solid 1px #000;}
#columns:left;{
float:left;}
#ciolumns:right{
float:right}
</style>
<div id="columns">
<div class="left column">
<p>text here</p>
</div>
<div class="right column">
<p>text here</p>
</div>
</div>

Hi all,
I'm trying to achieve a border around columns, like on this website:
http://www.birchandbird.com

I like the blue textured border around the columns but I'm completely stuck on how I achieve that. Can anyone please help me?
Thank you so much in advance!

hi, i have a table, i freezed(locked) the first column and firs row of the table.whilw scrolling down, the freezed(locked) column camouflages the freezed row.but i don't want this.i want the freezed row to caoumaflage the freezed column.do you have any ideas?
Regards.

Hi all,

I want to ask a question about column on html..

I have a table that contained 2 column..

First column I put image and the second I put text description.

Can I know how to make an image always on top. This is because when I write text description, the image will down and down followed the text that I wrote.

Thanks in advance