0

Possible Duplicate:
Two divs, one fixed width, the other, the rest

I want 2 divs side by side, where the right has a random width (this contains another 2 divs - a header with a random text and a body with a random image, all generated by JS) while the left should use the remaining width (this also contains another 2 divs - a header and a body, both containing static text only).

I currently have a solution with 3 tables that was quite simple do come up with, but as I'm recoding all my tables without strict tabular contents to CSS (yes I'm quite a few years late with this) I would prefer to have this in CSS too, if it's at all possible? After searching for a solution for quite some time it seems it may not be...

Worth noting is that the image height is always the same, also the width of every image is specified in the JS.

My current solution (with the JS and more stripped out to be as simple and clear as possible, the image is just an example and may have a width of up to 250px): My fiddle

HTML:

<table class="container" cellpadding="0">
 <tr>
  <td>
   <table class="left">
    <thead>
     <tr>
      <th>Text Header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>This just contains text.
      </td>
     </tr>
    </tbody>
   </table>
  </td>
  <td>
   <table class="right">
        <thead><tr>
        <th>Image Header</th>
        </tr></thead>
        <tbody>
        <tr>
        <td>
         <img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
        </td>
        </tr>
        </tbody>
        </table>
  </td>
 </tr>
</table>

CSS:

table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}

Please tell if you also want the JS and my unfinished CSS only solution.

Community
  • 1
  • 1
Mr Love
  • 103
  • 1
  • 1
  • 9
  • thanks, problem is I can't specify the width in the CSS as it's random - well maybe inline, I'll try – Mr Love Aug 03 '12 at 07:26
  • Many thanks, that did indeed work! You don't even have to specify the width in the CSS, all that is needed is `overflow: hidden;` in the left `div` and `float: right;` in the right - and putting the right before the left in the HTML. (That last thing seems a bit weird, kind of hackish, but it sure does the trick!) – Mr Love Aug 03 '12 at 08:05

1 Answers1

1

Rather than js, if you use two floating divs, one containing the text and text header, one containing the image and image header, I think it should do what you want:

http://jsfiddle.net/PeyWR/10/

(I lost some of your styling, but I think the idea's there).

Michael Peterson
  • 1,123
  • 6
  • 14
  • I will have a look at this too (I use JS for random image/code only). – Mr Love Aug 03 '12 at 08:06
  • This does indeed work too, and I suppose it's a good idea to use HTML headings instead of `div`s, however the `h2`s need more styling, and it seems I still need the 2 "body" `div`s for the text and image to get the padding right (well I can get rid of that for the text by putting padding on the `p`s instead). I'll also need `overflow: hidden;` for the left `div` once padding is applied. I see you are also reversing the order of the `div`s in the HTML, is that some standard practise when you want to float something to the right? – Mr Love Aug 03 '12 at 10:06
  • Basically, when floating elements, the floated element needs to come first - then the unfloated content will wrap around it. In this case floating the text left instead doesn't work, since the text has no width applied to it and so will expand to the entire width of the container, pushing the image below it. In terms of the h2, that is done for search engines. The more you match the type of containers you use to the type of content they hold, the easier it will be for search engines to interpret the relative importance of your content. But your page will render fine in either situation. – Michael Peterson Aug 03 '12 at 19:32