HTML CSS Three Column Layout, with a twist - html

Question

I need a 3 column layout in HTML/CSS, but different from anything I can find on here.
What I'm really struggling to achieve:
3 Col table with a fixed width of 740px:
A fluid left column (this should expand/contract with whatever space is left)
A fixed width middle column (130px)
Auto-width right column (which is only as wide as the content, must not wrap text)
Is this even do-able? I've seen exmples of this with a fluid left, fixed right but i didn't know how to then add a 3rd auto-width column
Been driving me nuts for ages!
Added complication: Any CSS style needs to be inline, this is for an HTML email!
Thanks folks.

Answer 1

First of all please see the Help Center article on creating a Minimal, Complete, and Verifiable example. You should be trying out your own solution before posting here for help.
To get you started I created a quick codepen example of what you're looking for. The left section will use whatever space is available. The middle section will always be 130px and the right section will fit the width of whatever content you have. Let me know if you have any questions.
HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td class="middle">
middle
</td>
<td class="right">
right - this will fit to your content
</td>
</tr>
</table>
CSS
.middle {
width: 130px;
}
.right {
width: 1%;
}
Edit:
I just saw your note on making the CSS inline. You would just add the relevant CSS to style tags within the HTML instead of having an external style sheet.
New HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td style="width: 130px;">
middle
</td>
<td style="width: 1%;">
right - this will fit to your content
</td>
</tr>
</table>

Answer 2

Okay i can't beleive i wasted hours trying to get this work, yet I randomly tried this and it DID work!
<table style="width:100%; max-width:740px;" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
https://jsfiddle.net/Murdo/5fn1z3g5/
Not sure that setting width to 100% and then limiting it to a max of 740 is the best way...
Or I could put a DIV with a width of 740 and then set the table to 100% width inside the div...
<div style="width:740">
<table style="width:100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
</div>
UPDATE: This works great in browser.. sadly, outlook does not like DIV width, any max-width or min width either. Back to drawing board!

Answer 3

you can do it easly with CSS flex model.
HTML
<div class="Container">
<div>COL 1
Im taking all the rest
</div>
<div>COL 2</div>
<div>
COL 3
I'm taking excatly what i need
</div>
</div>
CSS
.Container
{
width: 740px;
height: 300px;
display: flex;
background-color: green;
}
.Container div:first-child
{
background-color: red;
flex: 1 0 auto;
}
.Container div:nth-child(2)
{
background-color: yellow;
flex: 0 0 130px;
}
.Container div:nth-child(3)
{
background-color: blue;
flex: 0 0 auto;
}
and here with Inline style (for your mail)