2 columns, I need them to auto adjust their width for all website viewers.

[MasterACE14]

Morning Everyone,

 

I have 2 columns which are both 380px in width, and I need the 2 columns to automatically adjust their width depending on the website viewers screen size, currently my columns have been designed for 1280px by 800px screen resolutions, anything higher then that and the tables become to small.

 

All I need is the 2 columns to automatically adjust their widths. And have a small gap in between both columns.

 

here's my current code:

/* create 2 columns */
#leftcolumn { float: left; width: 380px; }
#rightcolumn { float: right; width: 380px; }

 

I have alot more CSS code if you need anymore. But thats just the part for the 2 columns.

 

Regards ACE

[AndyB]

I have 2 columns which are both 380px in width, and I need the 2 columns to automatically adjust their width depending on the website viewers screen size ...

 

If the width is defined as 380px, there's nothing to adjust. 

[MasterACE14]

oh, I've stuffed this post up, Change everything i just said to my 2 tables, 1 in each column, then it all makes sense.

 

here's the coding for the tables:

/* set table properties */
table { border: 1px solid lime;  }
td { border-bottom: 1px solid green; }

/* set table width and margin */
table { width: 380px;  }

/* compute column widths regardless of cell content */
table.fix { table-layout: fixed }

 

silly me 

 

actually no, the 2 columns, and the 2 tables both need to be able to automatically adjust their widths.

[AndyB]

... Change ... then it all makes sense.

Not to me, but maybe someone else can figure out what you're asking and come up with a coherent answer.

[MasterACE14]

ok, maybe these 2 pictures might make it clearer.

 

tables when they work fine in 1280 by 800 pixels

 

but they stuff up if the person viewing my website has a resolution any higher or any lower.

This is what happens when their resolution is lower, in this case 1024 by 768

 

and if their resolution is higher, the 2 columns with the tables in them spread apart really far.

[MasterACE14]

bump

[AndyB]

percentage - that's how to make anything fit any resolution.

[MasterACE14]

ok, I have a left panel, and a right panel setup like this:

#nav	{ float: left; width: 10%	}
#ads	{ float: right; width: 16% }

 

I have the center, the content area with margins:

#txt	{ margin-left: 105px; margin-right: 105px }

 

and then I got these 2 columns which I will try using a percentage on, the question is, what percentage? do I have to

take away 10, and 16(#nav and #ads) from 100, then divide my answer by 2 to give me each column's width in a percentage?

 

#leftcolumn { float: left; width: 380px; position: relative; }
#rightcolumn { float: right; width: 380px; position: relative; }

 

[MasterACE14]

bump

[cmgmyr]

check this out: http://www.glish.com/css/7.asp

[MasterACE14]

Thankyou so much! I've got the columns aligning correctly in all sorts of resolutions now 

 

I have one more quesion, how can I make a small gap between the leftnav, and the left column, and a small gap between the rightnav and the right column?

 

I believe I can do it this way:

left: 5px

for the the left column and just change it to right for the right column, but that doesn't do anything?

 

Regards ACE