468,238 Members | 1,779 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,238 developers. It's quick & easy.

CSS table relative width

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
1 2438
KevinADC
4,059 Expert 2GB
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.

Similar topics

2 posts views Thread by Stephen Weatherly | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.