By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,788 Members | 1,115 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,788 IT Pros & Developers. It's quick & easy.

CSS table relative width

P: 1
Hi,
I need to develop this:

A Main Content table fixed size 780 px.
Inside, two columns.
> Left column with relative width size (will contain text)
> Right column with relative width size (will contain an image inside)

The idea is: whenever I load a certain image in the Right Column, the column adjust itself to the image width, and therefore the Left Column width will also adjust occupiyng the rest of the width left in the Main Content (set as 780 px width.)

All of course in CSS table layout.

Here's the xhtml code I'm using:

Expand|Select|Wrap|Line Numbers
  1. <div id="main">
  2.     <div id="content">
  3.         <div id="leftCol">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </div>
  4.         <div id="rightCol">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
  5.     </div>
  6.     <div id="media"></div>
  7. </div>
And here's the CSS related:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #main {
  6.     width: 730px;
  7.     background-color: #999999;
  8. }
  9.     #content{
  10.         background-color: #FF0000;
  11.     }
  12.     #media{
  13.         background-color: #00FF00;
  14.         float:right;
  15.     }
  16.         #leftCol {
  17.             width: 50%;
  18.         }
  19.         #rightCol {
  20.             width: 50%;
  21.         }
  22.  
Hope you can help!
Thanks!
Mar 28 '07 #1
Share this Question
Share on Google+
1 Reply


KevinADC
Expert 2.5K+
P: 4,059
something along these lines:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. <style>
  7. body {
  8.     margin: 0;
  9.     padding: 0;
  10. }
  11. #main {
  12.     width: 780px;
  13.     height: 500px;
  14.     background-color: #999999;
  15. }
  16. #media{
  17.     background-color: #00FF00;
  18.     float:right;
  19. }
  20. #leftCol {
  21.     display: inline;
  22.     position: relative;
  23.     height: 100%;
  24.     align: left;
  25.     width: auto;
  26. }
  27. #rightCol {
  28.     display: inline;
  29.     position: relative;
  30.     height: 100%;
  31.     align: right;
  32.     width: auto;
  33. }
  34. </style>        
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div id="main">
  40.    <div id="leftCol">the left side </div>
  41.    <div id="rightCol"><img src="blah.gif" width="391" height="400" alt="this is where the image would be" border="1"></div>
  42. </div>
  43.  
  44. </body>
  45. </html>
Mar 29 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.